This demo demonstrates how to have connected (linked) dropdowns where the second dropdown gets binded via Ajax based on the selection of the first dropdown.

The technique requires both server-side C# and client-side jQuery javascript, please refer to the ASPX and C# tabs for implementation details.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="JQSuiteASPNETExample.examples.editing_data.edit_dialog_linked_dropdowns._default" %>
<%@ Register Assembly="Trirand.Web" TagPrefix="trirand" Namespace="Trirand.Web.UI.WebControls" %>

<!DOCTYPE html>
<html lang="en-us">
<head id="Head1" runat="server">
    <meta charset="utf-8">
    <title>jqGrid for ASP.NET WebForms - edit dialog - linked dropdowns</title>
    <!-- The jQuery UI theme that will be used by the grid -->
    <link rel="stylesheet" type="text/css" media="screen" href="http://code.jquery.com/ui/1.12.1/themes/redmond/jquery-ui.css" />
    <!-- The jQuery UI theme extension jqGrid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />
    <!-- jQuery runtime minified -->
    <script src="/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <!-- The localization file we need, English in this case -->
    <script src="/js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
    <!-- The jqGrid client-side javascript -->
    <script src="/js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script>    
    
    <style type="text/css">
        body, html { font-size: 80%; }    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       
       <trirand:JQGrid ID="JQGrid1" runat="server" Width="600px"  OnRowEditing="JQGrid1_RowEditing">         
            <Columns>                
                <trirand:JQGridColumn                    
                    DataField="ID"
                    Width="30">
                </trirand:JQGridColumn>
                <trirand:JQGridColumn 
                    DataField="Country"  
                    PrimaryKey="true"                   
                    Editable="true" 
                    EditType="DropDown" 
                    EditorControlID="CountriesList" />
                <%--Note - EditValues must be set to something, otherwise the select dropdown for city will not have an ID set--%>
                <trirand:JQGridColumn DataField="City" Editable="true" EditType="DropDown" EditValues="Select a City" />
            </Columns>
            <ToolBarSettings ShowEditButton="true" />
            <EditDialogSettings CloseAfterEditing="true" Caption="Edit the selected row" />                        
            <ClientSideEvents AfterEditDialogShown="populateCities" />
       </trirand:JQGrid>
       
       <script type="text/javascript">

           // This function gets called whenever an edit dialog is opened
           function populateCities() {               
               // first of all update the city based on the country               
               updateCityCallBack($("#Country").val());
               // then hook the change event of the country dropdown so that it updates cities all the time
               $("#Country").bind("change", function(e) 
               { 
                    updateCityCallBack($("#Country").val()); 
               });               
           }

           function updateCityCallBack(country) {
               $("#City")
                    .html("<option value=''>Loading cities...</option>")
                    .attr("disabled", "disabled");
                    
               $.ajax({
                   url: "/examples/grid/editing_data/edit_dialog_linked_dropdowns/default.aspx?country=" + country,
                   type: "GET",
                   success: function(citiesHtml) {                                                    
                       $("#City")
                            .removeAttr("disabled")
                            .html(citiesHtml);
                   }
               });
           }
       
       </script>
       
       <asp:DropDownList runat="server" ID="CountriesList">
            <asp:ListItem Text="USA"></asp:ListItem>
            <asp:ListItem Text="UK"></asp:ListItem>
            <asp:ListItem Text="Canada"></asp:ListItem>
       </asp:DropDownList>
       
       <br /><br />
       <trirand:codetabs runat="server" id="DataTableCodeTabs"></trirand:codetabs>           
       
       
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using Trirand.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web.Script.Serialization;
using System.Text;

namespace JQSuiteASPNETExample.examples.editing_data.edit_dialog_linked_dropdowns
{
    public partial class _default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (JQGrid1.AjaxCallBackMode == AjaxCallBackMode.RequestData)
            {
                JQGrid1.DataSource = GetData();
                JQGrid1.DataBind();
            }

            string country = Request.QueryString["country"];
            if (!String.IsNullOrEmpty(country))
            {
                Response.Clear();
                Response.Write(GetCitiesJson(country));
                try
                {
                    Response.End();
                }
                catch
                {
                }
            }
        }

        protected void JQGrid1_RowEditing(object sender, Trirand.Web.UI.WebControls.JQGridRowEditEventArgs e)
        {
            DataTable dt = GetData();
            DataRow rowEdited = dt.Rows.Find(e.RowKey);            
            
            rowEdited["City"] = e.RowData["City"];
            rowEdited["Country"] = e.RowData["Country"];

            JQGrid1.DataSource = dt;
            JQGrid1.DataBind();
        }

        protected DataTable GetData()
        {            
            if (Session["LinkedDropDownsData"] == null)
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("ID", typeof(int));
                dt.Columns.Add("Country", typeof(string));
                dt.Columns.Add("City", typeof(string));
                dt.PrimaryKey = new DataColumn[] { dt.Columns["Country"] };

                dt.Rows.Add(new object[] { 1, "USA", "New York" });
                dt.Rows.Add(new object[] { 2, "UK", "London" });
                dt.Rows.Add(new object[] { 3, "Canada", "Toronto" });

                Session["LinkedDropDownsData"] = dt;

                return dt;
            }
            else
            {
                return Session["LinkedDropDownsData"] as DataTable;
            }
        }

        protected string GetCitiesJson(string country)
        {            
            DataTable dt = GetData();
            string selectedCity = dt.Rows.Find(country)["City"] as string;
            string optionHtml = "";
            StringBuilder dropdownHtml = new StringBuilder();

            if (country == "USA")
            {
                dropdownHtml.AppendFormat(optionHtml, "New York", GetSelected(selectedCity, "New York"));
                dropdownHtml.AppendFormat(optionHtml, "Los Angeles", GetSelected(selectedCity, "Los Angeles"));
                dropdownHtml.AppendFormat(optionHtml, "Washington", GetSelected(selectedCity, "Washington"));
            }
            if (country == "UK")
            {
                dropdownHtml.AppendFormat(optionHtml, "London", GetSelected(selectedCity, "London"));
                dropdownHtml.AppendFormat(optionHtml, "Liverpool", GetSelected(selectedCity, "Liverpool"));
                dropdownHtml.AppendFormat(optionHtml, "Manchester", GetSelected(selectedCity, "Manchester"));                
            }
            if (country == "Canada")
            {
                dropdownHtml.AppendFormat(optionHtml, "Vancouver", GetSelected(selectedCity, "Vancouver"));
                dropdownHtml.AppendFormat(optionHtml, "Toronto", GetSelected(selectedCity, "Toronto"));
                dropdownHtml.AppendFormat(optionHtml, "Quebec", GetSelected(selectedCity, "Quebec"));                                
            }

            return dropdownHtml.ToString();
        }

        private string GetSelected(string selectedCity, string city)
        {
            return city == selectedCity ? "selected" : "";
        }
    }
}
Switch theme:


Theming is based on the very popular jQuery ThemeRoller standard. This is the same theming mechanism used by jQuery UI and is now a de-facto standard for jQuery based components. The benefits of using ThemeRoller are huge. We can offer a big set of ready to use themes created by professional designers, including Windows-like themes (Redmond), Apple-like theme (Cupertino), etc. In addition to that any jQuery UI controls on the same page will pick the same theme.

Last, but not least, you can always roll your own ThemeRoller theme, using the superb Theme Editor

To use a theme, simply reference 2 Css files in your Html <head> section - the ThemeRoller theme you wish to use, and the jqGrid own ThemeRoller Css file. For example (Redmond theme):

<link rel="stylesheet" type="text/css" media="screen" href="/themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/themes/ui.jqgrid.css" />