Filtering dropdown by value selected from another dropdown
This is the first posting of Beginners section of this blog. I will put here code samples that are not advanced enough to put them elsewhere in this blog. First example shows how to filter one dropdown list based on value selected from another.
Let’s create example web form and let’s name it as DropDownFiltering.aspx. We will add two dropdown lists to it and name it as ddlMain and ddlSub. ddlMain is main dropdown that provides filter value to ddlSub. The code of form follows.
<%@ Page
Language="C#" AutoEventWireup="true"
CodeBehind="DropDwonFiltering.aspx.cs"
Inherits="MyApplication1.DropDownFiltering" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>My Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
Main selection:
<asp:DropDownList runat="server" ID="ddlMain" DataTextField="Title"
DataValueField="Id" AutoPostBack="true"
onselectedindexchanged="ddlMain_SelectedIndexChanged">
</asp:DropDownList>
Sub selection
<asp:DropDownList runat="server" ID="ddlSub" DataTextField="Title"
DataValueField="Id">
</asp:DropDownList>
</div>
</form>
</body>
</html>
As you can see I defined OnSelectedIndexChanged event for ddlMain, also it has AutoPostBacks turned on. If user selects some value from ddlMain then web page will be sent to server and OnSelectedIndexChanged event will be fired.
Let’s see now the code behind this page. There are two methods for binding dropdown lists with data. These methods are separate and not part of some events because we need to call them in more than one place in our code. When Page is loaded we will check if it is post back. If it is not post back then there is no data in dropdown lists and we have to bind them.
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
namespace MyApplication1
{
public partial class DropDownFiltering : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
return;
BindMain();
BindSub();
}
protected void BindMain()
{
ddlMain.DataSource = GetMainData();
ddlMain.DataBind();
}
protected void BindSub()
{
DataTable table = GetSubData();
table.DefaultView.RowFilter = "ForeignID=" + ddlMain.SelectedValue;
ddlSub.DataSource = table;
ddlSub.DataBind();
}
protected DataTable GetMainData()
{
DataTable table = new DataTable();
table.Columns.Add("ID");
table.Columns.Add("Title");
DataRow dr;
dr = table.NewRow();
dr["ID"] = 1;
dr["Title"] = "First";
table.Rows.Add(dr);
dr = table.NewRow();
dr["ID"] = 2;
dr["Title"] = "Second";
table.Rows.Add(dr);
dr = table.NewRow();
dr["ID"] = 3;
dr["Title"] = "Third";
table.Rows.Add(dr);
return table;
}
protected DataTable GetSubData()
{
DataTable table = new DataTable();
table.Columns.Add("ID");
table.Columns.Add("ForeignID");
table.Columns.Add("Title");
DataRow dr;
dr = table.NewRow();
dr["ID"] = 1;
dr["ForeignID"] = 1;
dr["Title"] = "1:First";
table.Rows.Add(dr);
dr = table.NewRow();
dr["ID"] = 2;
dr["ForeignID"] = 1;
dr["Title"] = "1:Second";
table.Rows.Add(dr);
dr = table.NewRow();
dr["ID"] = 3;
dr["ForeignID"] = 2;
dr["Title"] = "2:First";
table.Rows.Add(dr);
dr = table.NewRow();
dr["ID"] = 4;
dr["ForeignID"] = 2;
dr["Title"] = "2:Second";
table.Rows.Add(dr);
return table;
}
protected void ddlMain_SelectedIndexChanged(object sender, EventArgs e)
{
BindSub();
}
}
}
The last thing is SelectedIndexChanged event handler that is attached to ddlMain. This event will be fired when the value of ddlMain is changed on client side. When ddlMain has changed then ddlSub is binded again to show the values that correspond to ddlMain value.
Methods GetData() and GetSubData() are for example purposes only and in real applications you should replace them with your own methods that provide real data to dropdowns.
