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
