Gridview

Question

User888679217 posted

hi All,

How to make  a gridview  like bellow :  http://dc672.4shared.com/download/ZYbuTfYfba/request.JPG?lgfp=3000 

For now i just can make like this : http://dc672.4shared.com/download/Bwf3T66vba/now.JPG?lgfp=3000    but it doesn't  have line picture above.

This my code : 

        For rowIndex As Integer = gv1.Rows.Count - 2 To 0 Step -1

            Dim gviewRow As GridViewRow = gv1.Rows(rowIndex)
            Dim gviewPreviousRow As GridViewRow = gv1.Rows(rowIndex + 1)

            For cellCount As Integer = 0 To gviewRow.Cells.Count - 1

                If gviewRow.Cells(cellCount).Text = gviewPreviousRow.Cells(cellCount).Text Then

                    If gviewPreviousRow.Cells(cellCount).RowSpan < 2 Then
                        gviewRow.Cells(cellCount).RowSpan = 2
                    Else
                        gviewRow.Cells(cellCount).RowSpan = gviewPreviousRow.Cells(cellCount).RowSpan + 1
                    End If

                    gviewPreviousRow.Cells(cellCount).Visible = False
                End If
            Next

        Next

somebody help me please

thanks.

Answer 1

User615288127 posted

Hi adong,

Select your gridview, go into properties and set border style = none, then set gridlines = Horizontal.

That should do it for you.

Please mark as correct answer if this helps.

Bulldog248

Answer 2

User888679217 posted

hi, 

thanks   for help,  I try  for your help. i did just like you said  : http://www.4shared.com/download/Yt7goPf-ba/ask.JPG?lgfp=3000 , But I want gridline like this : 

http://dc672.4shared.com/download/ZYbuTfYfba/request.JPG?lgfp=3000 . Can you help me again thanks.

Answer 3

User615288127 posted

adong,

Sorry, but I don't know any way to selectively turn the gridlines on and off.  They are either on or off.

Answer 4

User-271186128 posted

Hi adong,

As for this issue, you could try to use JQuery change the <tr> css style. More details, please refer to the following code:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
        table td {
            text-align: center;
        }
        .topborder {
            border-top: 1px solid #000;
        }
        .bottomborder {
            border-bottom: 1px solid #000;
        }
    </style>

<script>
    $(function () {
        $("#GridView1").find("tr").each(function () {
            var tds = $(this).find("td").length;
            if (tds == 3) {
                $(this).addClass("topborder");
            }
        })
        $("#GridView1 tr:last").addClass("bottomborder");
    })
</script>

            <asp:GridView AutoGenerateColumns="false" OnDataBound="GridView1_DataBound" GridLines="none" BorderStyle="None" OnRowDataBound="GridView1_RowDataBound" ID="GridView1" runat="server">
                <Columns>
                    <asp:BoundField DataField="StuId" HeaderText="StuId" ItemStyle-Width="100px" />
                    <asp:BoundField DataField="StuName" HeaderText="StuName" ItemStyle-Width="150px" />
                    <asp:BoundField DataField="Course" HeaderText="Course" ItemStyle-Width="100px" />
                </Columns>
            </asp:GridView>

The screenshot:

Best Regards,
Dillion