Simple GridView Grouping with out helper class or Custom GridView Control

In my previous post i used GNet GridView Control for acheiving Grouping.
In this post i will teach you how to acheive the same using ASP.NET GridView Control.

Type the following code in ASPX Page:


<asp:GridView ID="GridView1" runat="server" ShowHeader="false"

ShowFooter="false" AllowPaging="true" AutoGenerateColumns="false"

GridLines="None" PagerSettings-Mode="Numeric"

PagerSettings-Position="TopAndBottom" PagerStyle-HorizontalAlign="Right"

PagerStyle-Fore

Page PagerStyle-CssClass="GridPager" OnRowDataBound="GridView1_RowDataBound"

OnPageIndexChanging="GridView1_PageIndexChanging" >

<Columns>

<asp:TemplateField>

<ItemTemplate>

<table>

<tr>

<td align="center" class="innercircle_text" valign="top" width="488">

<table width="445" border="0" class="innercircle_text" cellspacing="1" cellpadding="2"

id="Table15">




//Here the Group header
<tr id="GridViewPointsHeader" runat="server">

<td align="center" class="innercircle_text" bgcolor="#F1ECDC" colspan="2" style="height: 25px">

<font><b><font size="2">

<asp:Label ID="lblTitlePoints" runat="server" ></asp:Label>

Points </font></b></font>

</td>

</tr>



<tr>

<td class="innercircle_text" valign="top" style="padding-top: 15px; width: 205px;">

<asp:Image ID="rewardImg" runat="server" AlternateText='<%# DataBinder.Eval(Container.DataItem,"image_path") %>' Width="200" Height="220" BorderWidth="0"/></td>

<td align="center" class="innercircle_text" bgcolor="#ffffffff" valign="top">

<table width="98%" height="220px" border="0" cellspacing="0" cellpadding="0" class="bodytext"

id="Table16">

<tr valign="top">

<td colspan="2" class="innercircle_text" height="120" valign="top">

<p class="innercircle_text">

<b>

<%# DataBinder.Eval(Container.DataItem,"points") %>

Points:

<%# DataBinder.Eval(Container.DataItem,"item_name") %>

</b>

</p>

<p class="innercircle_text">

<%# DataBinder.Eval(Container.DataItem,"item_desc") %>

</p>

</td>

</tr>

<tr>

<td class="innercircle_text">

Item Code:<%# DataBinder.Eval(Container.DataItem,"Item_Code") %>

</td>

<td class="innercircle_text" align="right" width="65%">

<a href="javascript:MM_openBrWindow('redeem_gift.asp?itemcode=<%# DataBinder.Eval(Container.DataItem,"Item_Code") %>&desc=<%# DataBinder.Eval(Container.DataItem,"points") %> Points:<%# Server.UrlEncode(DataBinder.Eval(Container.DataItem,"item_name").ToString()) %>','','scrollbars=no,resizable=no,width=500,height=590,left=230,right=200,top=130')"

class="prim">Redeem your Reward Points</a> <a href="javascript:void(0)">

<img src="top.gif" width="10" height="10" border="0" alt="top of page"></a></td>

</tr>

</table>

</td>

</tr>

<tr height="12">

<td style="width: 205px">



</td>

</tr>



</table>

</td>

</tr>



</table>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

And then type the follwing code in Code Behind File(ie,ASPX.CS) File

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string title;
HtmlTableRow GridViewPointsHeader = (HtmlTableRow)e.Row.FindControl("GridViewPointsHeader");
Label titleLabel = (Label)e.Row.FindControl("lblTitlePoints");
string strval = ds.Tables[0].Rows[e.Row.DataItemIndex]["points"].ToString().Trim();
if (e.Row.DataItemIndex == 0)
{

title = ds.Tables[0].Rows[e.Row.DataItemIndex]["points"].ToString().Trim();
titleLabel.Text = ds.Tables[0].Rows[e.Row.DataItemIndex]["points"].ToString();
GridViewPointsHeader.Visible = true;


}
else
{
title = ds.Tables[0].Rows[e.Row.DataItemIndex - 1]["points"].ToString().Trim();
if (title == strval)
{
GridViewPointsHeader.Visible = false;
}
else
{
titleLabel.Text = ds.Tables[0].Rows[e.Row.DataItemIndex]["points"].ToString();
GridViewPointsHeader.Visible = true;
}
}

Now you will get a nice GridView Grouping without any Helper Class or 3rd Party controls.


How to add Text or Server Controls(eg:Label) to GridView Pager

Add the below code to add any Text or Any other controls to GridView Pager.

The code below adds a simple bar in between numbers and it look like this "|"

I used ZNet GridView for getting 700 Points group header.

Code:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Pager)
{
TableCell sortCell = new TableCell();
sortCell.Text = "Page ";

Table tbl = (Table)e.Row.Cells[0].Controls[0];
foreach (TableCell mycells in tbl.Rows[0].Cells)
{

if (mycells.Controls[0] is Label)
{
Label lbl1 = new Label();
lbl1.Text = "|";

Label lbl2 = (Label)mycells.Controls[0];


mycells.Controls.Add(lbl2);
mycells.Controls.Add(lbl1);
}
else if (mycells.Controls[0] is LinkButton)
{
Label lbl = new Label();
lbl.Text = "|";

LinkButton lnk = (LinkButton)mycells.Controls[0];

mycells.Controls.Add(lnk);
mycells.Controls.Add(lbl);
}

}
tbl.Rows[0].Cells.AddAt(0, sortCell);


}
}