How to group multiple rows in GridView

Last post 07-08-2008 9:29 PM by DotNetAdvisor. 10 replies.

Sort Posts:

  • How to group multiple rows in GridView

    07-07-2008, 6:34 PM

    Hi, I have a GridView that will have about 3 rows for each customer number. I want to group those 3 rows into 1 row where the customer number will span all 3 rows, then the other details will show up on each of the 3 rows, and the final column should have a link button that spans the 3 rows.  I also want to use an AlternatingRowStyle for each group of rows (like the 1st customer with its 3 detail rows should be white, then the next customer with its 3 detail rows should be blue, and so on).  I would like the rows to look like the example below with the section for Cust No 1 colored white, and the section for Cust No 2 colored blue, etc.  Is there a way to do this?  Thanks for your help!

     Cust No 1  Relationship Name 1   Amount  LinkButton

                      Relationship Name 2   Amount

                      Relationship Name 3   Amount

    Cust No 2   Relationship Name 1   Amount  LinkButton

                      Relationship Name 2   Amount

                      Relationship Name 3   Amount

     

     

  • Re: How to group multiple rows in GridView

    07-07-2008, 8:06 PM
    • Contributor
      4,576 point Contributor
    • DotNetAdvisor
    • Member since 10-29-2007, 4:33 PM
    • Raleigh, NC
    • Posts 869

    It can get a little tricky but here's the steps you'll need to take.

    1. Create a class level variable that will be able to track what the customer number was for the previous row and another variable to hold a reference to the table cells
    2. Create an event handler for the gridview's RowDataBound event
    3. In the event handler first test to make sure you're only operating on a datarow
    4. Then check the value of the cust no field and compare to the class level variable you created in step 1
    5. If the variable is different then set the variable to the current row's customer and set references to the customer cell and button cell.
    6. If they're the same then remove the tablecell in the row for the customer and button.  Increase the rowspan for the two cell variables in step 1.
    I know that was a lot of information.  Let me know if you have questions.
  • Re: How to group multiple rows in GridView

    07-07-2008, 8:44 PM

    Thank you so much for the fast response!  Would it be possible for you to post a code example of this?  I'm not familiar enough with it to know how to code all the steps you listed.  An example would be very helpful.  Thank you again!

  • Re: How to group multiple rows in GridView

    07-07-2008, 9:49 PM
    • Contributor
      4,576 point Contributor
    • DotNetAdvisor
    • Member since 10-29-2007, 4:33 PM
    • Raleigh, NC
    • Posts 869

    Can you post the html for your gridview?  I'll use that to write out some code.

    Oh and what language do you develop in? 

  • Re: How to group multiple rows in GridView

    07-07-2008, 10:08 PM

    That would be great!  I program in VB and below is the html for the gridview:

     

    <DIV style="OVERFLOW: auto; WIDTH: 100%; HEIGHT: 95%" align="center">

    <asp:GridView ID="gvSuspect" runat="server" width="100%"

    DataKeyNames="CU_CUSTOMER_NO,CU_SYSTEM_IN" AutoGenerateColumns="False" Font-Size="8pt" OnDataBound="gvSuspect_DataBound">

    <AlternatingRowStyle BackColor="#C1D1E5" /><AlternatingRowStyle />

     

    <HeaderStyle Wrap="true" CssClass="ms-formlabel DataGridFixedHeader" BackColor="Navy"

    Font-Bold="True"

    ForeColor="White" />

     

     

    <Columns>

    <asp:TemplateField>

     

     

    <ItemTemplate>

    <asp:Label ID="CU_CUSTOMER_NO" Visible="false" Text='<%# DataBinder.Eval (Container.DataItem, "CU_CUSTOMER_NO") %>'

    runat="server" />

    <asp:Label ID="CU_SYSTEM_IN" Visible=false Text='<%# DataBinder.Eval (Container.DataItem, "CU_SYSTEM_IN") %>'

    runat="server" />

     

    <asp:CheckBox runat="server" ID="chkSelect" />

     

    </ItemTemplate>

    </asp:TemplateField>

     

    <asp:BoundField ItemStyle-HorizontalAlign="left" DataField="CU_CUSTOMER_NO" HeaderText="RRN No" />

    <asp:BoundField ItemStyle-HorizontalAlign="left" DataField="RL_RAV_NAME_FINAL" HeaderText="RAV Name" />

    <asp:BoundField ItemStyle-HorizontalAlign="right" DataField="OR_TOT_EXP" HeaderText="Tot Exp" DataFormatString="{0:c0}" HtmlEncode="False"/>

     

    </Columns>

    </asp:GridView>

    </DIV>

  • Re: How to group multiple rows in GridView

    07-07-2008, 10:39 PM
    • Contributor
      4,576 point Contributor
    • DotNetAdvisor
    • Member since 10-29-2007, 4:33 PM
    • Raleigh, NC
    • Posts 869

    I was a little confused on the columns when comparing to your first post so I made a few guesses.  But here's an example to get you started.

    First add this attribute to the gridview: OnRowDataBound="gvSuspect_RowDataBound"

    Then put this in your code-behind

     

        Private customerNumber As String
        Private customerNumberCell As TableCell
        Private buttonCell As TableCell

        Protected Sub gvSuspect_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)

            ' Only perform on datarows
            If e.Row.RowType = DataControlRowType.DataRow Then

                ' If the customer number does not equal the variable
                ' then we've reached a new row and we'll reset
                ' the values of the tracking variables
                If Me.customerNumber <> e.Row.Cells(1).Text Then

                    Me.customerNumber = e.Row.Cells(1).Text
                    Me.customerNumberCell = e.Row.Cells(1)
                    Me.buttonCell = e.Row.Cells(3)

                Else

                    ' Remove the cells from the row
                    e.Row.Cells.RemoveAt(3)
                    e.Row.Cells.RemoveAt(1)

                    ' Increase the row span on the tracking cells
                    Me.customerNumberCell.RowSpan += 1
                    Me.buttonCell.RowSpan += 1

                End If

            End If

        End Sub

  • Re: How to group multiple rows in GridView

    07-08-2008, 12:55 AM

    see this example, how to group the column names by using stored procedure. 

    create table employee
    (
    EmpName varchar(50),
        Hobbies varchar(50)
    )
    insert into employee values ('ram','cricket')
    insert into employee values ('ram','Tennis')
    insert into employee values ('ram','FootBall')

    In sql server 2000

    select case when rn=1 then EmpName else '' end as EmpName,Hobbies
    from(select *,(select count(*) from employee where EmpName = e.EmpName and Hobbies <= e.Hobbies) as rnfrom employee e) t

    In SqlServer2005,

    select case when rn = 1 then EmpName else '' end as EmpName,Hobbies from
    (select *,row_number() over (order by EmpName) as rn from employee) t

    once you group the customerno, then to group the link button, you can do one thing. in row databound event,

    if(e.row.rowtype == DataControlRowType.datarow)

    {

                      Label lblCustNo = (Label)e.row.findcontrl("lblCustNo") // here in paranthesis, name of the label in itemtemplate of the customerno field.

                      Linkbutton lnkSelect = (Linkbutton )e.row.findcontrl("lnkSelect ") // in paranthesis, name of the linkbutton in itemtemplate of the linkbutton field.

                     if(lblCustNo.Text = "")

                                   lnkSelect.Text="";

    }

      

    Give a man a fish and you feed him for a day. Teach a man to fish and you feed him forever.
  • Re: How to group multiple rows in GridView

    07-08-2008, 5:43 PM

    This worked great!  Thank you so much.  I had to make 1 tweek to it; I added Me.customerNumberCell.RowSpan = 1 to the first part of the If statement so that the RowSpan would start with 1; otherwise it was starting at 0 and leaving off the last row that it needed to span.

    This was very helpful, I really appreciate it.  I have one more question on this.  In my original GridView, I had an AlternatingRowStyle so that 1 row was white, the next blue.  With this solution, the first column that spans 3 rows (the customer no column), it's white, but then the 3 rows that belong with that customer no alternate white, blue, white.  Is there any way to make all 3 rows white like the 1st column?  Then, the 2nd customer number which spans 3 rows is now blue, and the 3 rows that belong with it are blue, white, & blue.  I would like all 3 of those rows to be blue.  So, the first group of 3 rows should be white, the 2nd group of 3 rows should be blue, and so on.  Is there any way to do this?

    Thanks again for everything!

     

  • Re: How to group multiple rows in GridView

    07-08-2008, 7:44 PM
    Answer
    • Contributor
      4,576 point Contributor
    • DotNetAdvisor
    • Member since 10-29-2007, 4:33 PM
    • Raleigh, NC
    • Posts 869

    HeatherGebbia:
    I had to make 1 tweek to it; I added Me.customerNumberCell.RowSpan = 1 to the first part of the If statement so that the RowSpan would start with 1; otherwise it was starting at 0 and leaving off the last row that it needed to span.
     

    That's right.  I did forget that it's default is 0.  Good catch.

    There is a way to do what you want to do.  I believe it needs to be done in code.  Here's the code I wrote out.  Notice I added a handler for the gridview's databinding event.

     

        Private customerNumber As String
        Private customerNumberCell As TableCell
        Private buttonCell As TableCell

        Private oddRowStyle As TableItemStyle
        Private evenRowStyle As TableItemStyle
        Private activeRowStyle As TableItemStyle

        Protected Sub gvSuspect_DataBinding(ByVal sender As Object, ByVal e As EventArgs)

            ' Initialize the oddRowStyle

            ' Initialize the evenRowStyle

        End Sub

        Protected Sub gvSuspect_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)

            ' Only perform on datarows
            If e.Row.RowType = DataControlRowType.DataRow Then

                ' If the customer number does not equal the variable
                ' then we've reached a new row and we'll reset
                ' the values of the tracking variables
                If Me.customerNumber <> e.Row.Cells(1).Text Then

                    Me.customerNumber = e.Row.Cells(1).Text
                    Me.customerNumberCell = e.Row.Cells(1)
                    Me.buttonCell = e.Row.Cells(3)

                    If Me.activeRowStyle Is Nothing Or Me.activeRowStyle.Equals(Me.evenRowStyle) Then

                        Me.activeRowStyle = Me.oddRowStyle

                    Else

                        Me.activeRowStyle = Me.evenRowStyle

                    End If

                Else

                    ' Remove the cells from the row
                    e.Row.Cells.RemoveAt(3)
                    e.Row.Cells.RemoveAt(1)

                    ' Increase the row span on the tracking cells
                    If Me.customerNumberCell.RowSpan = 0 Then
                        Me.customerNumberCell.RowSpan = 2
                        Me.buttonCell.RowSpan = 2
                    Else
                        Me.customerNumberCell.RowSpan += 1
                        Me.buttonCell.RowSpan += 1
                    End If

                End If

                Me.activeRowStyle.MergeWith(e.Row.ControlStyle)

            End If

        End Sub

  • Re: How to group multiple rows in GridView

    07-08-2008, 8:51 PM

    You are awesome!  Thank you so much! 

    By the way, I have saved your website as one of my favorites, so next time I'm looking for answers I'll be starting there.  Smile

  • Re: How to group multiple rows in GridView

    07-08-2008, 9:29 PM
    • Contributor
      4,576 point Contributor
    • DotNetAdvisor
    • Member since 10-29-2007, 4:33 PM
    • Raleigh, NC
    • Posts 869

    You're welcome.  Glad I could help. 

Page 1 of 1 (11 items)