Introduction
In this post, I explain How to group columns in gridview header row in ASP.NET (programmer friendly way)The ASP.NET GridView data control is a very rich tool for displaying tabular data in web applications. In this article, I am examine how to merge a grid view column header.
I have seen that, many programers do different ways to achive this. Here I have done a little bit trick, I have used ControlStyle-CssClass property of BoundField field for make it programmer friendly.
Steps :
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 table for fetch data.
Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.Step-4: 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-5: Add a Webpage and Design for Show Data in Gridview With Group Column
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.HTML Code
<h3> Group columns in gridview header row in ASP.NET (programmer friendly way)</h3><br /> <asp:GridView ID="GridView1" runat="server" CellPadding="5" AutoGenerateColumns="false" HeaderStyle-BackColor="#f3f3f3" BackColor="White"> <Columns> <asp:BoundField HeaderText="Column 1" DataField="Column1" ControlStyle-CssClass="Group 1" /> <asp:BoundField HeaderText="Column 2" DataField="Column2" ControlStyle-CssClass="Group 1" /> <asp:BoundField HeaderText="Column 3" DataField="Column3" ControlStyle-CssClass="Group 1" /> <asp:BoundField HeaderText="Column 4" DataField="Column4" ControlStyle-CssClass="Group 2" /> <asp:BoundField HeaderText="Column 5" DataField="Column5" ControlStyle-CssClass="Group 2" /> <asp:BoundField HeaderText="Column 6" DataField="Column6" /> <asp:BoundField HeaderText="Column 7" DataField="Column7" /> <asp:BoundField HeaderText="Column 8" DataField="Column8" /> </Columns> </asp:GridView>
Step-6: Write following code in Page_Load event for Show data in Gridview With grouping column.
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { PopulateData(); } }
private void PopulateData() { using (MyDatabaseEntities dc = new MyDatabaseEntities()) { GridView1.DataSource = dc.SampleDatas.ToList(); GridView1.DataBind(); } // Add Group Header SetGroupHeader(); }
private void SetGroupHeader() { int count = 1; string groupName = ""; List<TableCell> headerCells = new List<TableCell>(); if (GridView1.Rows.Count > 0) { foreach (DataControlField col in GridView1.Columns) { if (col.ControlStyle.CssClass != groupName) { if (groupName != "") { headerCells.Add(GetGroupHeader(groupName, count)); count = 1; } } else { count++; } groupName = col.ControlStyle.CssClass; } if (count > 1) { headerCells.Add(GetGroupHeader(groupName,count)); } } if (headerCells.Count > 0) { GridViewRow gvrow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal); foreach (TableCell tc in headerCells) { gvrow.Cells.Add(tc); } GridView1.Controls[0].Controls.AddAt(0, gvrow); } }
private TableCell GetGroupHeader(string headerText, int colSpan) { TableCell headerCell = new TableCell(); headerCell.Text = headerText; headerCell.ColumnSpan = colSpan; return headerCell; }
Step-7: Run Application.
Related Post: