how to implement cascading dropdownlist in gridview using asp.net

By: Suresh Dasari Nov 12, 2011

Introduction:

In this article I will explain how to implement cascading dropdownlist in gridview using asp.net.

Description:

In Previous posts I explained clearly how to implement ajax cascading dropdownlist using asp.net and lot of articles regarding Gridview. Now I will explain how to implement cascading dropdown list in gridview using asp.net. Here I am using previous implemented article ajax cascading dropdownlist in asp.net to bind data to dropdownlists.

After that I am binding the data to gridview for that first design table in database and give name UserInfomation

ColumnName	DataType
UserId	Int(set identity property=true)
UserName	varchar(50)
LastName	varchar(50)
Location	varchar(50)

After completion table creation add ajax reference to your application because here I am using ajax cascading dropdownlists bind to gridview and design your aspx page like this

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Cascading Dropdownlist Sample</title>

</head>

<body>

<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>

<div>

<asp:GridView runat="server" ID="gvdetails" DataSourceID="dsdetails" AllowPaging="true" PageSize="10" AutoGenerateColumns="false" ShowFooter="true">

<asp:TemplateField HeaderText="UserId">

<asp:Label ID="lblUserId" runat="server" Text='<%#Eval("UserId") %>'/>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="UserName">

<asp:Label ID="lblUserName" runat="server" Text='<%#Eval("UserName") %>'/>

</ItemTemplate>

<asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>

<ajax:CascadingDropDown ID="CountryCascading" runat="server" Category="Country" TargetControlID="ddlCountry" LoadingText="Loading Countries..." PromptText="Select Country" ServiceMethod="BindCountrydropdown" ServicePath="DropdownWebService.asmx">

</ajax:CascadingDropDown>

</FooterTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="LastName">

<asp:Label ID="lblLastName" runat="server" Text='<%#Eval("LastName") %>'/>

</ItemTemplate>

<asp:DropDownList ID="ddlState" runat="server"></asp:DropDownList>

<ajax:CascadingDropDown ID="StateCascading" runat="server" Category="State" TargetControlID="ddlState" ParentControlID="ddlCountry" LoadingText="Loading States..." PromptText="Select State" ServiceMethod="BindStatedropdown" ServicePath="DropdownWebService.asmx">

</ajax:CascadingDropDown>

</FooterTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Location">

<asp:Label ID="lblLocation" runat="server" Text='<%#Eval("Location") %>'/>

</ItemTemplate>

<asp:DropDownList ID="ddlregion" runat="server"></asp:DropDownList>

<ajax:CascadingDropDown ID="RegionCascading" runat="server" Category="Region" TargetControlID="ddlregion" ParentControlID="ddlState" LoadingText="Loading Cities..." PromptText="select" ServiceMethod="BindRegiondropdown" ServicePath="DropdownWebService.asmx">

</ajax:CascadingDropDown>

</FooterTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<asp:SqlDataSource ID="dsdetails" runat="server" ConnectionString="<%$ConnectionStrings:dbconnection %>"

SelectCommand="select * from UserInformation"/>

</div>

</form>

</body>

</html>

If you observe above code I used ajax cascading dropdownlist to bind in gridview. To bind data to dropdownlist and data tables design check this post ajax cascading dropdownlist using asp.net .After completion of bind data to dropdownlists use above code to place dropdownlist in gridview and bind data to gridview if you have any doubts just download the attached code to and check the details.

Here don’t forgot to set the connection string in web.config file here I am getting database connection from web.config file for that reason you need to set the connectionstring in web.config file like this

</connectionStrings>

Demo

Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

10 comments :

Anonymous said...: Hi Suresh,
If the gridview initially does not have any data or is not binded to datasource but if we need some dropdownlists in such gridview. Should we have empty data template? I am confused what to do. I also have to populate the dropdownlist

Initially the gridview will have just 1 row with 4 dropdownlists which are populated. How to do this?; December 15, 2011 at 9:18 PM
Suresh Dasari said...: hi,
i think that feature available in 4.0 version except that version we don't have any option like empty data template. we need to write custom code to display gridview even if that doesn't contain any data check below post
http://www.aspdotnet-suresh.com/2010/12/v-behaviorurldefaultvmlo.html; December 15, 2011 at 9:31 PM
mariammalswe said...: fine; December 21, 2011 at 12:22 AM
Anonymous said...: Hello sir,
I am getting method error 500 rply; April 4, 2013 at 6:00 AM
Unknown said...: hi friend i need 1 textbox1 ajax autocomplete, on select suggestion my textbox2 and textbox3 automatically display corresponding field the database table,,,,

c#.net microsoft sql server, ajax(asmx web service); May 8, 2013 at 11:25 PM
ranvijay said...: please provide your database backup; June 3, 2013 at 10:16 PM
Janu said...: please tel me how to covert date into weekday and i want to display that date into gridview.; August 23, 2013 at 12:11 AM
Unknown said...: Dear sir in my gridview i have 3 dropdown list country
state and city when i change country according to change state and city..
pls help me; September 24, 2013 at 9:19 PM
Anonymous said...: how can we do the same without using ajax; March 10, 2014 at 5:05 AM
Unknown said...: i want add a new row ????; April 19, 2014 at 12:12 PM