Monday, March 16, 2009

Filtered GridView using DataList


Many times the requirement comes like this.

need to show the first letter of products as a link outside grid and when the user clicks on it the grid will be showing the result with that particular product only.


Can be easily done using GridView and DataList.
Database used is Northwind.

The ASPX



<asp:DataList ID="dlstProducts" runat="server"
RepeatDirection="Horizontal">
<ItemTemplate>
<asp:LinkButton ID="lnkFirstLetters" runat="server"
Text='<%# Bind("ProductNameFirstLetter") %>'
onclick="lnkFirstLetters_Click">
</asp:LinkButton>
</ItemTemplate>
</asp:DataList>

<asp:GridView ID="gvwProducts" runat="server"
AutoGenerateColumns="false"
DataKeyNames="ProductID">
<Columns>
<asp:TemplateField HeaderText="Product Name">
<ItemTemplate>
<asp:Label ID="lblProductName" runat="server" Text='<%# Bind("ProductName") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity Per Unit">
<ItemTemplate>
<asp:Label ID="lblQuantityPerUnit" runat="server" Text='<%# Bind("QuantityPerUnit") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>



The ASPX.CS



public partial class GridView_GridViewDataListFirstAlphabet : System.Web.UI.Page
{
DataTable dtProducts = new DataTable();

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

protected void lnkFirstLetters_Click(object sender, EventArgs e)
{
BindGridView(((LinkButton)sender).Text.Trim());
}

private void InitialBindOfControls()
{
BindGridView("Initial");
BindDataList();
}

private void BindGridView(string strChar)
{
string strQuery = "SELECT ProductID, ProductName, QuantityPerUnit FROM Products "
+ ((strChar == "Initial") ? "" : "WHERE ProductName LIKE'" + strChar + "%'")
+ "ORDER BY ProductName";
using (SqlConnection sqlConn = new SqlConnection(ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ToString()))
{
using (SqlDataAdapter adapProducts = new SqlDataAdapter(strQuery, sqlConn))
{
adapProducts.Fill(dtProducts);
gvwProducts.DataSource = dtProducts;
gvwProducts.DataBind();
}
}
}

private void BindDataList()
{
if (gvwProducts.Rows.Count != 0)
{
DataTable dtTemp = new DataTable();
dtTemp.Columns.Add("ProductNameFirstLetter");
dtTemp.Rows.Add(((Label)gvwProducts.Rows[0].FindControl("lblProductName")).Text.Substring(0, 1));
foreach (GridViewRow gvrProducts in gvwProducts.Rows)
{
if (dtTemp.Rows[dtTemp.Rows.Count - 1][0].ToString() != ((Label)gvrProducts.FindControl("lblProductName")).Text.Substring(0, 1))
{
dtTemp.Rows.Add(((Label)gvrProducts.FindControl("lblProductName")).Text.Substring(0, 1));
}
}
dlstProducts.DataSource = dtTemp;
dlstProducts.DataBind();
}
}
}



Extra Namespace used


using System.Data.SqlClient;

Related Posts :



1 comments on "Filtered GridView using DataList"

Add your comment. Please don't spam!
Subscribe in a Reader
Simon on May 30, 2009 at 2:58 PM said...

I am looking for method to activate a blank footer when the GridView is initial no records. So that I can insert one new record. I am searching that find that you had given one feedback to a very good procedure. However, when I follow the line of code, it still not work in my case. In your post, you only post the cs without the .aspx. Maybe some problem on the defintion. Could you kindly give a workable solution with cs and Aspx. So that I can digest by myself. Maybe you can post it in your blog. Please use SQLDataSource (not ObjectDataSource) with a very simple data for me to refer.

Simon

Post a Comment