ASP.NET 3.5 - Populate grid view based on value selected in the dropdown

Q:
Can we populate grid view dynamically based on dropdown value?
I have a dropdown list. When user selects a particular value from the dropdown list, the grid view records needs to be changed based on the value selected in dropdown.

A:
Continuing to earlier post where I have demonstrated how we can bind dynamic dataset to the grid view; I am going to explain how we can achieve this.

Task:
I have a dropdown list for divisions e.g. 1st year, 2nd Year etc. If user selects 1st Year from the dropdown, students list for Division 1 will be displayed in the grid view. If user selects 2nd year, they will be presented 2nd year student list.

Below are the steps that we will have to follow to achieve the given task:
1. Add dropdown list for all division values
2. On change of the selected index, bind new dataset to the grid view
3. It is important to enable “AutoPostBack” property for the dropdown field

Step 1:
Below is the code snippet to add dropdown field for all divisions on the form:

<div style="margin-top:10px;">
<asp:Label ID="lbl_SelectDivision" runat="server" Text="Select division:"> </asp:Label>
</div>
<div style="margin-top:10px;" >
<asp:DropDownList ID="ddl_Division" runat="server" >
<asp:ListItem Text="I st year" Value="ISTYEAR" />
<asp:ListItem Text="II nd year" Value="IINDYEAR" />
</asp:DropDownList>
</div>

This adds 1st Year and 2nd year as two division values to the dropdown list.

Step 2:
The next is to add an event which will be called on change of the value selected in the dropdown. The name of this event is “onselectedindexchanged”. We will call a method defined in the code behind class for this page. [You can achieve the same using design view. If you go to property window for the dropdown and double click on the event name, IDE automatically add this function for you.]

<div style="margin-top:10px;">
<asp:Label ID="lbl_SelectDivision" runat="server" Text="Select division:"> </asp:Label>
</div>
<div style="margin-top:10px;" >
<asp:DropDownList ID="ddl_Division" runat="server" onselectedindexchanged="ddl_Division_SelectedIndexChanged" >
<asp:ListItem Text="I st year" Value="ISTYEAR" />
<asp:ListItem Text="II nd year" Value="IINDYEAR" />
</asp:DropDownList>
</div>

Here is the code behind method. This function has a duty to collect the selected value of the dropdown and pass it to helper function which does work to dynamically populate records in grid view.

/*
*This event handler simply collect current selected value of the dropdown
*Passes it to the helper function which will actually populate dynacmic data to grid view
*/
protected void ddl_Division_SelectedIndexChanged(object sender, EventArgs e)
{ PopulateStudentsList(ddl_Division.SelectedValue.ToString());
}

“PopulateStudentsList” is the method which we have seen in earlier post modified a little bit to accept the selected value as a parameter and use it for further processing.

public void PopulateStudentsList(string pm_selectedDivision)
{
gv_StudentsList.DataSource = getStudentList4Division(pm_selectedDivision);
gv_StudentsList.DataBind();
}

Step 3:
You are yet now done. Up to now, you have all source code ready to wok fine for your requirement. But the change in dropdown value will not call your event handler defined in step 2.
In order to fire this event handler, you must submit the page whenever you change the dropdown value. This is achieved using “AutoPostBack” property set to true for the dropdown field. “AutoPostBack” property if enabled - helps you to submit your page automatically whenever there is a change or action has been made on the control.

<div style="margin-top:10px;">
<asp:Label ID="lbl_SelectDivision" runat="server" Text="Select division:"> </asp:Label>
</div>
<div style="margin-top:10px;" >
<asp:DropDownList ID="ddl_Division" runat="server" onselectedindexchanged="ddl_Division_SelectedIndexChanged" AutoPostBack="True" >
<asp:ListItem Text="I st year" Value="ISTYEAR" />
<asp:ListItem Text="II nd year" Value="IINDYEAR" />
</asp:DropDownList>
</div>

Here is the result after you change the value from 1st Year to second your.



Note: If you do not want to submit the page on change of dropdown value; best approach is to use AJAX – next topic of discussion :)!