Grouping Gridview in ASP.NET MVC

• Download source code - 1.8 MB

Introduction

Grouping data in gridview is becoming an essential part of UI features these days. With ASP.NET MVC, where you require the complete control over HTML, many people don't like to use 3^rd party controls. Developers often use simple for loop to display tabular/grid so that they can customize it according to their needs easily. This article provides you the simplified way to group the gridview data by directly coding in your view. You may also put your customized data in group header and footer according to your need. Additionally, I have also shown the example on how you can use JQuery to implement expand/collapse behavior. I have used the razor view engine but the same approach would work in all other view engines too.

Below is the screen shot of how the grouped gridview would look like:

Background

This approach uses Linq group by to group the data of the gridview source and then uses normal conventional loop to display the data in a desired format. JQuery has been used to customize the behavior at client side. For UI look and feel, the default bootstrap is used. In the attached code, the 4 different views have been provided to delve step by step into the final grid so that beginners do not find it difficult to grasp the concept.

Using the Code

Using the code is simple. Just have a look over the View (.cshtml page) where Linq GroupBy query has been used to group the model. Then, we have iterated through the groups and then each data within the group.

The basic code for grouping looks like this:

@foreach(var group in Model.GroupBy(x=>x.Company))
    {
        <tr class="group-header">
            <td colspan="6">
                <span class="h3">@group.Key</span>
            </td>
        </tr>
        foreach (var item in group)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Designation)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Department)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Company)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Year)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Salary)
                </td>
            </tr>
        }
        <tr class="group-footer">
            <td colspan="6">
                <span class="label label-info">Company: @group.Key</span>
                <span class="label label-success">Total Employee: @group.Count()</span>
                <span class="label label-primary">Avg Salary: 
                       @group.Average(x => x.Salary).ToString("C")</span>
            </td>
        </tr>
    }  

In the above code, first, we are creating a group based on the field which is required to be grouped. Then, looping through each group which has code to generate group header and footer as a table row. Then, we have implemented a nested foreach loop to loop through each item in the group and display the data. In group header and footer, you can implement any custom logic and display the data in any format. In this case, we have demonstrated a basic linq operation like total count and Average in the footer. You may show the same in the header too.

Styling and Scripting

The above code will show the grouped data in your browser but to add Expand/Collapse feature, a little bit of JQuery is needed.

The code for expand/collapse looks like this:

$(function () {
        $('.group-header').click(function () {
            $(this).nextUntil('.group-header').toggle();
        });
    }); 

In this code, we are simply handling click event of each group header. Since, a class 'group-header' was assigned to each table header row of the grid, we can use this selector to toggle the display of that group.

In addition to the above, you may also implement various other styling or scripting behavior like:

• Expanding/Collapsing all headers
• Toggling all headers/footers
• Expanding/Collapsing all data, etc.

Adding Index to Row

Index to each row in a grid can be added just by 2-3 lines of JQuery code. The code below demonstrates this:

function addPaging() {
        $('#employeeGrid tr:first').prepend('<th style="width:60px;">S. No.</th>');
        $('#employeeGrid tr:not(:first, .group-header, .group-footer)').each(function (index) {
            $(this).prepend('<td class="text-right">' + (index + 1) + '.</td>');
        });
    }

The first line of the function adds a th (table header column) tag to the first row of the grid table. The next code loops through each row of the HTML table and prepends a new td tag to each row (tr tag) with index applied to it. Please have a look at the Sample Grid page of the attached code to see things in action.

Points of Interest

Apart from grouping gridview data in MVC, the code also acts as a sample on how to fetch data from Excel and populate the model using generics. To read Excel data, a <code><code>nuget package 'EPPlus' has been used.

Conclusion

Since you are using the raw HTML to generate your grid, the sky is your limit. You can customize your grid to whatever extent you want. You may not get a high degree of flexibility if you are using any 3^rd party control.

In my opinion, if time permits and performance is your preference, use the native approach. Else, there are a lot of MVC Grid tools (paid as well as free) in the market which will help you to develop your application quickly.

History

• 19^th April, 2014: First version created