Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

GridView: Dynamic Cascading DropDownList using JavaScript

0.00/5 (No votes)
30 Jun 2016 1  
A quick example on how to implement a dynamic cascading DropDownList within ASP.NET GridView control using JavaScript

Introduction

Recently, a user in the forums was asking how to populate one dropdownlist based on a value selected from another dropdownlist using JavaScript in ASP.NET. The question was quite interesting and thought I'd share the solution I posted on that thread as a reference to others who might face the same problem.

Using the Code

The scenario is that the dropdownlists are inside a GridView TemplateFields and the user wanted to implement a cascading dropdown by dynamically creating the items on the fly without using jQuery, AJAX and database, but purely JavaScript.

To implement that, let's add a GridView in the markup and setup some TemplateField columns with DropDownLists on it. Our ASPX markup should look something like this:

<form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:DropDownList ID="ddlStatus" 
                        runat="server" 
                        onchange="buildDropDown(this);">
                            <asp:ListItem></asp:ListItem>
                            <asp:ListItem Value="Ma">Ma</asp:ListItem>
                            <asp:ListItem Value="Mi">Mi</asp:ListItem>
                            <asp:ListItem Value="Others">Others</asp:ListItem>
                        </asp:DropDownList>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:DropDownList ID="ddlReason" runat="server">
                        </asp:DropDownList>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>

There's nothing fancy in the markup above, except that we wired-up the onchange event to ddlStatus DropDownList.

Now let's create the JavaScript function. Here's the code block below:

<script type="text/javascript">
        function buildDropDown(obj) {
            var status = obj.options[obj.selectedIndex].value;
            var row = obj.parentNode.parentNode;
            var rowIndex = row.rowIndex - 1;
            //you may need to change the index of cells value based on the location
            //of your ddlReason DropDownList
            var ddlReason = row.cells[1].getElementsByTagName('SELECT')[0];

            switch (status) {
                case "Ma":
                    ddlReason.options[0] = new Option("OK", "OK");
                    ddlReason.options[1] = new Option("Good", "Good");
                    break;
                case "Mi":
                    ddlReason.options[0] = new Option("Data", "Data");
                    ddlReason.options[1] = new Option("Resoure", "Resoure");
                    ddlReason.options[2] = new Option("Time", "Time");
                    break;
                case "Others":
                    ddlReason.options[0] = new Option("Some Item", "Some Item");
                    break;
            }
        }
  </script>

The function buildDropDown() takes a parameter obj. This parameter is a reference to a DropDownList control that is inside a GridView. Now let's take a look at what we've done there.

The status variable holds the selected value of the first DropDownList called ddlStatus.

The row variable serves as the naming container to which the DropDownList ddlStatus is located. Remember that a grid contains rows, so we need to determine which DropDown to populate.

The ddlReason variable represents the ddlReason DropDownList. Once we get the row, we can easily find an element in the cells using row.cells[1].getElementsByTagName('SELECT')[0]; That line means get the first SELECT element in the array that is within the second Column of the GridView. cells[1] represents the 2nd column. Keep in mind that index always starts at 0, so you may need to change the index based on your requirements.

The switch statement simply determines what items to be populated in the ddlReason DropDown based on the status value.

That's it! I hope someone finds this post useful.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here