Grid View for ASP.NET Web Forms - Cascading Combo Boxes

This example demonstrates how to implement cascading combo box editors within ASPxGridView.

CascadingComboBoxes

Setup the Grid and its Column Editors

Create an ASPxGridView control, assign its data source, and set the grid's edit mode to Inline. Add two columns of the GridViewDataComboBoxColumn type and specify their data sources.

XML
<dx:ASPxGridView ID="Grid" runat="server" AutoGenerateColumns="false" DataSourceID="Customers"  
    KeyFieldName="CustomerID" ClientInstanceName="grid">  
    <Columns>  
        <%--...--%>  
        <dx:GridViewDataComboBoxColumn Caption="Country" FieldName="CountryID">  
            <PropertiesComboBox DataSourceID="Countries" ValueField="CountryID" ValueType="System.Int32"  
                <%--...--%>  
            </PropertiesComboBox>  
        </dx:GridViewDataComboBoxColumn>  
        <dx:GridViewDataComboBoxColumn Caption="City" FieldName="CityID">  
            <PropertiesComboBox DataSourceID="AllCities" ValueField="CityID" ValueType="System.Int32"  
                <%--...--%>  
            </PropertiesComboBox>  
        </dx:GridViewDataComboBoxColumn>  
    </Columns>  
    <SettingsEditing Mode="Inline" />  
</dx:ASPxGridView>  
<asp:ObjectDataSource ID="Customers" runat="server" ... />  
<asp:ObjectDataSource ID="Countries" runat="server" ... />  
<asp:ObjectDataSource ID="AllCities" runat="server" ... />

Respond to a Selection Change on the Client Side

Handle the primary editor's client-side SelectedIndexChanged event. In this event handler, get the editor value (the GetValue method) and pass it as a parameter in the PerformCallback method of the secondary editor. To access the secondary editor, call the GetEditor method.

XML
<dx:ASPxGridView ID="Grid" runat="server" ... >  
    <Columns>  
        <%--...--%>  
        <dx:GridViewDataComboBoxColumn Caption="Country" FieldName="CountryID" ...>  
            <PropertiesComboBox DataSourceID="Countries" ValueField="CountryID" ...>  
                <ClientSideEvents SelectedIndexChanged="CountriesCombo_SelectedIndexChanged" />  
            </PropertiesComboBox>  
        </dx:GridViewDataComboBoxColumn>  
        <dx:GridViewDataComboBoxColumn Caption="City" FieldName="CityID" ... />  
    </Columns>  
</dx.ASPxGridView>

JavaScript
function CountriesCombo_SelectedIndexChanged(s, e) {  
    grid.GetEditor("CityID").PerformCallback(s.GetValue());  
}

Filter the Secondary Combo Box Values on the Server Side

In the CellEditorInitialize event handler, access the secondary editor and add a handler to its Callback event. In the handler, use the Parameter argument property to obtain the primary editor's value from the client side. Filter the secondary editor's data source based on this value and bind the filtered values to the editor.

C#
protected void Grid_CellEditorInitialize(object sender, ASPxGridViewEditorEventArgs e) {  
    if(e.Column.FieldName == "CityID") {  
        var combo = (ASPxComboBox)e.Editor;  
        combo.Callback += new CallbackEventHandlerBase(combo_Callback);  

        var grid = e.Column.Grid;  
        if (!combo.IsCallback) {  
            var countryID = -1;  
            if (!grid.IsNewRowEditing)  
                countryID = (int)grid.GetRowValues(e.VisibleIndex, "CountryID");  
            FillCitiesComboBox(combo, countryID);  
        }  
    }  
}  

private void combo_Callback(object sender, CallbackEventArgsBase e) {  
    var countryID = -1;  
    Int32.TryParse(e.Parameter, out countryID);  
    FillCitiesComboBox(sender as ASPxComboBox, countryID);  
}  

protected void FillCitiesComboBox(ASPxComboBox combo, int countryID) {  
    combo.DataSourceID = "Cities";  
    Cities.SelectParameters["CountryID"].DefaultValue = countryID.ToString();  
    combo.DataBindItems();  

    combo.Items.Insert(0, new ListEditItem("", null)); // Null Item  
}

Documentation

More Examples

Example Code

WebSite/App_Code/DataProvider.cs(vb)

C#
VB.NET

C#
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;

public static class DataProvider {

    static HttpSessionState Session { get { return HttpContext.Current.Session; } }

    static DemoDataObject DemoData {
        get {
            const string key = "FB1EB35F-86F5-4FFE-BB23-CBAAF1514C49";
            if (Session[key] == null) {
                var obj = new DemoDataObject();
                obj.FillObj();
                Session[key] = obj;
            }
            return (DemoDataObject)Session[key];
        }
    }

    public static IEnumerable GetCustomers() {
        return DemoData.Customers;
    }

    public static void InsertCustomer(string customerName, int countryID, int cityID) {
        var c = new Customer() {
            CustomerID = DemoData.Customers.Count,
            CustomerName = customerName,
            CountryID = countryID,
            CityID = cityID
        };

        DemoData.Customers.Add(c);
    }

    public static void UpdateCustomer(int customerID, string customerName, int countryID, int cityID) {
        var c = DemoData.Customers.First(i => i.CustomerID == customerID);

        c.CustomerName = customerName;
        c.CountryID = countryID;
        c.CityID = cityID;
    }

    public static IEnumerable GetCountries() {
        return DemoData.Countries;
    }

    public static IEnumerable GetCities() {
        return DemoData.Cities;
    }

    public static IEnumerable GetCities(int countryID) {
        return from c in DemoData.Cities
               where c.CountryID == countryID
               select c;
    }
}

public class DemoDataObject {
    public List<Customer> Customers { get; set; }
    public List<Country> Countries { get; set; }
    public List<City> Cities { get; set; }

    public void FillObj() {
        Customers = new List<Customer>();
        Countries = new List<Country>();
        Cities = new List<City>();

        var uk = CreateCountry("UK");
        var usa = CreateCountry("USA");

        CreateCustomer("Jacob", CreateCity("Brighton", uk.CountryID));
        CreateCustomer("Michael", CreateCity("Glasgow", uk.CountryID));
        CreateCustomer("Emily", CreateCity("London", uk.CountryID));
        CreateCustomer("Joshua", CreateCity("Bath", uk.CountryID));
        CreateCustomer("Emma", CreateCity("Manchester", uk.CountryID));
        CreateCustomer("Madison", CreateCity("Wells", uk.CountryID));
        CreateCustomer("Matthew", CreateCity("York", uk.CountryID));
        CreateCustomer("Olivia", CreateCity("Dallas", usa.CountryID));
        CreateCustomer("Ethan", CreateCity("Las Vegas", usa.CountryID));
        CreateCustomer("Hannah", CreateCity("Los Angeles", usa.CountryID));
        CreateCustomer("Abigail", CreateCity("New York City", usa.CountryID));
        CreateCustomer("Isabella", CreateCity("San Francisco", usa.CountryID));
        CreateCustomer("Andrew", CreateCity("Washington D.C.", usa.CountryID));
        CreateCustomer("Daniel", CreateCity("Miami", usa.CountryID));

        CreateCity("Cardiff", uk.CountryID);
        CreateCity("Liverpool", uk.CountryID);
        CreateCity("Oxford", uk.CountryID);
        CreateCity("Atlanta", usa.CountryID);
        CreateCity("Houston", usa.CountryID);
        CreateCity("Phoenix", usa.CountryID);
    }

    Customer CreateCustomer(string name, City city) {
        var c = new Customer() {
            CustomerName = name,
            CityID = city.CityID,
            CountryID = city.CountryID,
            CustomerID = Customers.Count
        };

        Customers.Add(c);

        return c;
    }

    Country CreateCountry(string name) {
        var c = new Country() { CountryName = name };
        c.CountryID = Countries.Count;
        Countries.Add(c);
        return c;
    }

    City CreateCity(string name, int countryID) {
        var c = new City() {
            CityName = name,
            CountryID = countryID,
            CityID = Cities.Count
        };

        Cities.Add(c);

        return c;
    }
}

public class Customer {
    public int CustomerID { get; set; }
    public string CustomerName { get; set; }
    public int CountryID { get; set; }
    public int CityID { get; set; }
}

public class Country {
    public int CountryID { get; set; }
    public string CountryName { get; set; }
}

public class City {
    public int CityID { get; set; }
    public string CityName { get; set; }
    public int CountryID { get; set; }
}

Visual Basic
Imports Microsoft.VisualBasic
Imports System.Collections
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.SessionState

Public NotInheritable Class DataProvider

    Private Sub New()
    End Sub
    Private Shared ReadOnly Property Session() As HttpSessionState
        Get
            Return HttpContext.Current.Session
        End Get
    End Property

    Private Shared ReadOnly Property DemoData() As DemoDataObject
        Get
            Const key As String = "FB1EB35F-86F5-4FFE-BB23-CBAAF1514C49"
            If Session(key) Is Nothing Then
                Dim obj = New DemoDataObject()
                obj.FillObj()
                Session(key) = obj
            End If
            Return CType(Session(key), DemoDataObject)
        End Get
    End Property

    Public Shared Function GetCustomers() As IEnumerable
        Return DemoData.Customers
    End Function

    Public Shared Sub InsertCustomer(ByVal customerName As String, ByVal countryID As Integer, ByVal cityID As Integer)
        Dim c = New Customer() With {.CustomerID = DemoData.Customers.Count, .CustomerName = customerName, .CountryID = countryID, .CityID = cityID}

        DemoData.Customers.Add(c)
    End Sub

    Public Shared Sub UpdateCustomer(ByVal customerID As Integer, ByVal customerName As String, ByVal countryID As Integer, ByVal cityID As Integer)
        Dim c = DemoData.Customers.First(Function(i) i.CustomerID = customerID)

        c.CustomerName = customerName
        c.CountryID = countryID
        c.CityID = cityID
    End Sub

    Public Shared Function GetCountries() As IEnumerable
        Return DemoData.Countries
    End Function

    Public Shared Function GetCities() As IEnumerable
        Return DemoData.Cities
    End Function

    Public Shared Function GetCities(ByVal countryID As Integer) As IEnumerable
        Return _
            From c In DemoData.Cities _
            Where c.CountryID = countryID _
            Select c
    End Function
End Class

Public Class DemoDataObject
    Private privateCustomers As List(Of Customer)
    Public Property Customers() As List(Of Customer)
        Get
            Return privateCustomers
        End Get
        Set(ByVal value As List(Of Customer))
            privateCustomers = value
        End Set
    End Property
    Private privateCountries As List(Of Country)
    Public Property Countries() As List(Of Country)
        Get
            Return privateCountries
        End Get
        Set(ByVal value As List(Of Country))
            privateCountries = value
        End Set
    End Property
    Private privateCities As List(Of City)
    Public Property Cities() As List(Of City)
        Get
            Return privateCities
        End Get
        Set(ByVal value As List(Of City))
            privateCities = value
        End Set
    End Property

    Public Sub FillObj()
        Customers = New List(Of Customer)()
        Countries = New List(Of Country)()
        Cities = New List(Of City)()

        Dim uk = CreateCountry("UK")
        Dim usa = CreateCountry("USA")

        CreateCustomer("Jacob", CreateCity("Brighton", uk.CountryID))
        CreateCustomer("Michael", CreateCity("Glasgow", uk.CountryID))
        CreateCustomer("Emily", CreateCity("London", uk.CountryID))
        CreateCustomer("Joshua", CreateCity("Bath", uk.CountryID))
        CreateCustomer("Emma", CreateCity("Manchester", uk.CountryID))
        CreateCustomer("Madison", CreateCity("Wells", uk.CountryID))
        CreateCustomer("Matthew", CreateCity("York", uk.CountryID))
        CreateCustomer("Olivia", CreateCity("Dallas", usa.CountryID))
        CreateCustomer("Ethan", CreateCity("Las Vegas", usa.CountryID))
        CreateCustomer("Hannah", CreateCity("Los Angeles", usa.CountryID))
        CreateCustomer("Abigail", CreateCity("New York City", usa.CountryID))
        CreateCustomer("Isabella", CreateCity("San Francisco", usa.CountryID))
        CreateCustomer("Andrew", CreateCity("Washington D.C.", usa.CountryID))
        CreateCustomer("Daniel", CreateCity("Miami", usa.CountryID))

        CreateCity("Cardiff", uk.CountryID)
        CreateCity("Liverpool", uk.CountryID)
        CreateCity("Oxford", uk.CountryID)
        CreateCity("Atlanta", usa.CountryID)
        CreateCity("Houston", usa.CountryID)
        CreateCity("Phoenix", usa.CountryID)
    End Sub

    Private Function CreateCustomer(ByVal name As String, ByVal city As City) As Customer
        Dim c = New Customer() With {.CustomerName = name, .CityID = city.CityID, .CountryID = city.CountryID, .CustomerID = Customers.Count}

        Customers.Add(c)

        Return c
    End Function

    Private Function CreateCountry(ByVal name As String) As Country
        Dim c = New Country() With {.CountryName = name}
        c.CountryID = Countries.Count
        Countries.Add(c)
        Return c
    End Function

    Private Function CreateCity(ByVal name As String, ByVal countryID As Integer) As City
        Dim c = New City() With {.CityName = name, .CountryID = countryID, .CityID = Cities.Count}

        Cities.Add(c)

        Return c
    End Function
End Class

Public Class Customer
    Private privateCustomerID As Integer
    Public Property CustomerID() As Integer
        Get
            Return privateCustomerID
        End Get
        Set(ByVal value As Integer)
            privateCustomerID = value
        End Set
    End Property
    Private privateCustomerName As String
    Public Property CustomerName() As String
        Get
            Return privateCustomerName
        End Get
        Set(ByVal value As String)
            privateCustomerName = value
        End Set
    End Property
    Private privateCountryID As Integer
    Public Property CountryID() As Integer
        Get
            Return privateCountryID
        End Get
        Set(ByVal value As Integer)
            privateCountryID = value
        End Set
    End Property
    Private privateCityID As Integer
    Public Property CityID() As Integer
        Get
            Return privateCityID
        End Get
        Set(ByVal value As Integer)
            privateCityID = value
        End Set
    End Property
End Class

Public Class Country
    Private privateCountryID As Integer
    Public Property CountryID() As Integer
        Get
            Return privateCountryID
        End Get
        Set(ByVal value As Integer)
            privateCountryID = value
        End Set
    End Property
    Private privateCountryName As String
    Public Property CountryName() As String
        Get
            Return privateCountryName
        End Get
        Set(ByVal value As String)
            privateCountryName = value
        End Set
    End Property
End Class

Public Class City
    Private privateCityID As Integer
    Public Property CityID() As Integer
        Get
            Return privateCityID
        End Get
        Set(ByVal value As Integer)
            privateCityID = value
        End Set
    End Property
    Private privateCityName As String
    Public Property CityName() As String
        Get
            Return privateCityName
        End Get
        Set(ByVal value As String)
            privateCityName = value
        End Set
    End Property
    Private privateCountryID As Integer
    Public Property CountryID() As Integer
        Get
            Return privateCountryID
        End Get
        Set(ByVal value As Integer)
            privateCountryID = value
        End Set
    End Property
End Class

WebSite/Default.aspx

ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v15.1, Version=15.1.15.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dx" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to implement cascaded combobox columns in ASPxGridView without using templates
    </title>
    <style type="text/css">
        .grid {
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript">
        function CountriesCombo_SelectedIndexChanged(s, e) {
            grid.GetEditor("CityID").PerformCallback(s.GetValue());
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <dx:ASPxGridView ID="Grid" runat="server" AutoGenerateColumns="false" DataSourceID="Customers"
            Width="800" CssClass="grid" KeyFieldName="CustomerID" ClientInstanceName="grid"
            OnCellEditorInitialize="Grid_CellEditorInitialize">
            <Columns>
                <dx:GridViewCommandColumn Width="100" ShowNewButton="true" ShowEditButton="true"/>
                <dx:GridViewDataColumn FieldName="CustomerID" Visible="false" SortOrder="Descending" />
                <dx:GridViewDataTextColumn FieldName="CustomerName" Width="200">
                    <PropertiesTextEdit>
                        <ValidationSettings RequiredField-IsRequired="true" Display="Dynamic" />
                    </PropertiesTextEdit>
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataComboBoxColumn Caption="Country" FieldName="CountryID" Width="200">
                    <PropertiesComboBox DataSourceID="Countries" ValueField="CountryID" ValueType="System.Int32"
                        TextField="CountryName" EnableSynchronization="False" IncrementalFilteringMode="StartsWith">
                        <ValidationSettings RequiredField-IsRequired="true" Display="Dynamic" />
                        <ClientSideEvents SelectedIndexChanged="CountriesCombo_SelectedIndexChanged" />
                    </PropertiesComboBox>
                </dx:GridViewDataComboBoxColumn>
                <dx:GridViewDataComboBoxColumn Caption="City" FieldName="CityID" Width="200">
                    <PropertiesComboBox DataSourceID="AllCities" ValueField="CityID" ValueType="System.Int32"
                        TextField="CityName" EnableSynchronization="False" IncrementalFilteringMode="StartsWith">
                        <ValidationSettings RequiredField-IsRequired="true" Display="Dynamic" />
                    </PropertiesComboBox>
                </dx:GridViewDataComboBoxColumn>
            </Columns>
            <Settings ShowGroupPanel="true" />
            <SettingsEditing Mode="Inline" />
        </dx:ASPxGridView>
        <asp:ObjectDataSource ID="Customers" runat="server" TypeName="DataProvider" SelectMethod="GetCustomers"
            InsertMethod="InsertCustomer" UpdateMethod="UpdateCustomer">
            <InsertParameters>
                <asp:Parameter Name="CustomerName" Type="String" />
                <asp:Parameter Name="CountryID" Type="Int32" />
                <asp:Parameter Name="CityID" Type="Int32" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="CustomerID" Type="Int32" />
                <asp:Parameter Name="CustomerName" Type="String" />
                <asp:Parameter Name="CountryID" Type="Int32" />
                <asp:Parameter Name="CityID" Type="Int32" />
            </UpdateParameters>
        </asp:ObjectDataSource>
        <asp:ObjectDataSource ID="Countries" runat="server" TypeName="DataProvider" SelectMethod="GetCountries" />
        <asp:ObjectDataSource ID="AllCities" runat="server" TypeName="DataProvider" SelectMethod="GetCities" />
        <asp:ObjectDataSource ID="Cities" runat="server" TypeName="DataProvider" SelectMethod="GetCities">
            <SelectParameters>
                <asp:Parameter Name="CountryID" Type="Int32" />
            </SelectParameters>
        </asp:ObjectDataSource>
    </form>
</body>
</html>

WebSite/Default.aspx.cs(vb)

C#
VB.NET

C#
using System;
using DevExpress.Web;

public partial class _Default : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        if (!IsPostBack)
            Grid.StartEdit(0);
    }

    protected void Grid_CellEditorInitialize(object sender, ASPxGridViewEditorEventArgs e) {
        if (e.Column.FieldName == "CityID") {
            var combo = (ASPxComboBox)e.Editor;
            combo.Callback += new CallbackEventHandlerBase(combo_Callback);

            var grid = e.Column.Grid;
            if (!combo.IsCallback) {
                var countryID = -1;
                if (!grid.IsNewRowEditing)
                    countryID = (int)grid.GetRowValues(e.VisibleIndex, "CountryID");
                FillCitiesComboBox(combo, countryID);
            }
        }
    }

    private void combo_Callback(object sender, CallbackEventArgsBase e) {
        var countryID = -1;
        Int32.TryParse(e.Parameter, out countryID);
        FillCitiesComboBox(sender as ASPxComboBox, countryID);
    }

    protected void FillCitiesComboBox(ASPxComboBox combo, int countryID) {
        combo.DataSourceID = "Cities";
        Cities.SelectParameters["CountryID"].DefaultValue = countryID.ToString();
        combo.DataBindItems();

        combo.Items.Insert(0, new ListEditItem("", null)); // Null Item
    }
}

Visual Basic
Imports Microsoft.VisualBasic
Imports System
Imports DevExpress.Web

Partial Public Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If (Not IsPostBack) Then
            Grid.StartEdit(0)
        End If
    End Sub

    Protected Sub Grid_CellEditorInitialize(ByVal sender As Object, ByVal e As ASPxGridViewEditorEventArgs)
        If e.Column.FieldName = "CityID" Then
            Dim combo = CType(e.Editor, ASPxComboBox)
            AddHandler combo.Callback, AddressOf combo_Callback

            Dim grid = e.Column.Grid
            If (Not combo.IsCallback) Then
                Dim countryID = -1
                If (Not grid.IsNewRowEditing) Then
                    countryID = CInt(Fix(grid.GetRowValues(e.VisibleIndex, "CountryID")))
                End If
                FillCitiesComboBox(combo, countryID)
            End If
        End If
    End Sub

    Private Sub combo_Callback(ByVal sender As Object, ByVal e As CallbackEventArgsBase)
        Dim countryID = -1
        Int32.TryParse(e.Parameter, countryID)
        FillCitiesComboBox(TryCast(sender, ASPxComboBox), countryID)
    End Sub

    Protected Sub FillCitiesComboBox(ByVal combo As ASPxComboBox, ByVal countryID As Integer)
        combo.DataSourceID = "Cities"
        Cities.SelectParameters("CountryID").DefaultValue = countryID.ToString()
        combo.DataBindItems()

        combo.Items.Insert(0, New ListEditItem("", Nothing)) ' Null Item
    End Sub
End Class

DevExpress Support Team

last modified 7 years ago

Modified: November 1, 2017 12:44 PM

Platform: ASP.NET Web Forms

Product: ASPxGridView

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.