[Sample of Apr 16th] Group cells in ASP.NET GridView


Homepage image
Sample of the Day RSS Feed

Sample Downloads:
C# version:
VB version: http://code.msdn.microsoft.com/VBASPNETGroupedGridView-a69579a7

Today’s code sample shows how to group cells in GridView with the same value.

imageYou can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage http://1code.codeplex.com/.



The code sample shows how to group cells in ASP.NET GridView with the same value.


Running the Code

Open the sample project and run tha web application.  In Default.aspx, you will see two GridViews binding the same data (Product Name, Category, Weight).  The first GridView shows each row of data as usual.  The second GridView groups Product Name and Category, and shows the merged cells.


Using the Code

Step1. Open your Visual Studio 2000 to create a Visual Basic Web application by choosing "File" -> "New" -> "Project...", expand the "Visual Basic" tag and select "Web", then choose "ASP.NET Web Application".  You can name it as "VBASPNETGroupedGridView".

Step2. In Default.aspx, add two GridViews.

               <td style='padding:20px'>
                       General GridView</h3>
                   <asp:GridView ID="generalGridView" runat="server" AllowPaging="True"
                       <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                       <RowStyle HorizontalAlign="Center" VerticalAlign="Middle" />
               <td style='padding:20px'>
                       Grouped GridView</h3>
                   <asp:GridView ID="groupedGridView" runat="server" AllowPaging="True"
                       <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                       <RowStyle HorizontalAlign="Center" VerticalAlign="Middle" />

Step3. Reference the jQuery library and add the following reusable Javascript function for grouping GridView cells.

   <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
   <script type="text/javascript">

       // This js function will automatially combine the GridView cells
       // gridviewId: The id of the gridview.
       function GroupGridViewCells(gridviewId) {

           // Get the number of the rows
           var rowNum = $(gridviewId + " tr").length;

           // Get the number of the columns;
           var colNum = $(gridviewId + " tr:eq(0)>th").length;

           // Get the current cell
           var cell = null;

           // Get the previous cell
           var previouscell = null;

           // Begin to loop from the second row to the end
           for (var col = 0; col < colNum; ++col) {

               for (var row = 1; row < rowNum; ++row) {

                   cell = $(gridviewId + " tr:eq(" + row + ")>td:eq(" + col + ")").first();

                   // We haven't the previous row to compare with, so keep this first
                   if (row == 1) {
                       previouscell = $(gridviewId + " tr:eq(" + row + ")>td:eq(" + col + ")").first();
                       previouscell.attr("rowspan", "1");
                   else {

                       // If the current value has the same value as the previous one,
                       // the previous one's rowspan should be increased by 1, and you should
                       // hide the current cell.
                       if (cell.html() == previouscell.html()) {

                           previouscell.attr("rowspan", parseInt(previouscell.attr("rowspan") + 1));
                           cell.css("display", "none");
                       else {
                           // If the current cell's value doesn't equal to the previous one
                           // we should restart keep the cell for future comparation.
                           previouscell = $(gridviewId + " tr:eq(" + row + ")>td:eq(" + col + ")");
                           previouscell.attr("rowspan", "1");
                           previouscontent = previouscell.html();

Step4. Call the GroupGridViewCells function to group cells in the second GridView control.

       // Call the js function like this:
       $(function () {

Step5. Switch to the code-behind and the following code to bind the same sorted test data to the GridViews.

   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
       If Not IsPostBack Then
       End If
   End Sub

   ''' <summary>
   ''' Bind sorted test data to the given GridView control.
   ''' </summary>
   ''' <param name="gridView">the GridView control</param>
   ''' <remarks></remarks>
   Private Sub BindSortedTestData(ByVal gridView As GridView)
       Const TestDataViewStateId As String = "TestData"

       Dim dt As DataTable = TryCast(ViewState(TestDataViewStateId), DataTable)
       If dt Is Nothing Then
           dt = New DataTable()
           dt.Columns.Add("Product Name", GetType(String))
           dt.Columns.Add("Category", GetType(Integer))
           dt.Columns.Add("Weight", GetType(Double))
           Dim r As New Random(DateTime.Now.Millisecond)

           For i As Integer = 1 To 50
               ' Adding ProductId, Category, and random price.
               dt.Rows.Add( _
                   "Product" & r.Next(1, 5), _
                   r.Next(1, 5), _
                   Math.Round(r.NextDouble() * 100 + 50, 2))

           ViewState(TestDataViewStateId) = dt
       End If

       ' Sort by Product Name and Category
       dt.DefaultView.Sort = "Product Name,Category"

       gridView.DataSource = dt
   End Sub

Comments (0)

Skip to main content