GridView: Dynamic Cascading DropDownList using JavaScript

In this blog you will learn how to implement a dynamic cascading DropDownList within ASP.NET GridView control suing JavaScript.

Introduction

 

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

 

Using the code

 

The scenario is that the DropDownList 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 find this post useful.