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.