Gridview Grouping in C#.Net

Introduction

In this post, I explain how to group data in gridview using C#.NET. Sometimes we need to show group data in our ASP.NET Application like show List of State group by Country. Here I have done this using C#.NET. Steps are given below:-

For MVC Developer visit:  Grouping Gridview in MVC 4





Prerequisite

I used followings:
  • .Net framework 4.0
  • Entity Framework
  • SQL Server 2008

Steps :

Just follow the steps and get result easily.

Step - 1 : Create New Project

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create two tables and insert data for show grouped data in Gridview

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have created two table 1. CountryMaster 2. StateMaster.
Create table and insert data for Show in grouped gridview.

Step-4: Add Needed files( 2 js, 1 CSS and some images).

These files are required to design our page and to give better looks.
I have added this files in the Scripts folder.
Right Click on the Scripts folder > Add > Existing Item > Select Files > Add.
Here I have added some images in this location --> Root > Scripts > Images

Step-5: Design Web Page (Default.aspx).

Just Write the following code to your page.




Inside Head Content



<link href="Scripts/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.js" type="text/javascript"></script>
    <style>
        .ui-icon {display: inline-block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
    </style>
    <script language="javascript">
        $(function () {
            $('#accordion').accordion({
                collapsible: true,
                autoHeight: false
            });
        });
    </script>


 Inside Body Content

<div>
        Gridview Grouping Example
        <div>
            <asp:ListView ID="ListView1" runat="server" ItemPlaceholderID="ItemPH" OnItemDataBound="ListView1_ItemDataBound">
                <LayoutTemplate>
                    <div id="accordion">
                        <asp:PlaceHolder ID="ItemPH" runat="server" />
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <h3>Country : <%#Eval("CountryName") %></h3>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                        <Columns>
                            <asp:TemplateField HeaderText="State ID">
                                <ItemTemplate>
                                    <%#Eval("StateID") %>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="State Name">
                                <ItemTemplate>
                                    <%#Eval("StateName") %>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </ItemTemplate>
            </asp:ListView>
        </div>
    </div>

Step-6: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-7: Add Code For Populate Country Data.

Write the followings code in your page load event for fetch Country Data from Database.



      protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                PopulateCountry();
            }
        }




And Here is the function code


      private void PopulateCountry()
        {
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                var v = dc.CountryMasters.ToList();
                ListView1.DataSource = v;
                ListView1.DataBind();
            }
        }

Step-8: Add Code For Populate State Data.

Write the followings code in your ListView ItemDataBound event for fetch State Data from Database.


protected void ListView1_ItemDataBound(object sender, ListViewItemEventArgs e)
        {
            if (e.Item.ItemType == ListViewItemType.DataItem)
            {
                GridView grd1 = (GridView)e.Item.FindControl("GridView1");
                CountryMaster cm = e.Item.DataItem as CountryMaster;
                if (cm != null)
                {
                    if (grd1 != null)
                    {
                        using (MyDatabaseEntities dc = new MyDatabaseEntities())
                        {
                            var v = dc.StateMasters.Where(a => a.CountryID.Equals(cm.CountryID)).ToList();
                            grd1.DataSource = v;
                            grd1.DataBind();
                        }
                    }
                }
            }
        }

STEP-9: Run Application

Run Application and Get result in your browser.

Thank You

Download Source Code...

Related Post

Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.