Grid View for ASP.NET Web Forms - How to use cascading combo boxes in inline edit mode

This example demonstrates how to create templated combo box columns, add cascading combo box editors to the templates, and configure the grid's cell edit functionality in inline mode.

Cascading combo boxes in inline edit mode

Overview

Add combo box columns to the grid, specify their EditItemTemplate properties, and add combo box editors to the templates.

ASPx
<dx:GridViewDataComboBoxColumn FieldName="Category1ID" VisibleIndex="4">  
    <PropertiesComboBox DataSourceID="dsCategory1" TextField="Name" ValueField="ID" ValueType="System.Int32" />  
    <EditItemTemplate>  
        <dx:ASPxComboBox ID="Cat1" runat="server" DataSourceID="dsCategory1" TextField="Name" ValueField="ID"  
            Value='<%# Bind("Category1ID") %>' AutoPostBack="true" ValueType="System.Int32"  
            OnSelectedIndexChanged="Cat1_SelectedIndexChanged">  
        </dx:ASPxComboBox>  
    </EditItemTemplate>  
</dx:GridViewDataComboBoxColumn>

For every template editor, handle its server-side SelectedIndexChanged event. In handlers, call the grid's FindEditRowCellTemplateControl method to access the subsequent editor and filter its data source based on the selected value of the primary editor.

C#
protected void Cat1_SelectedIndexChanged(object sender, EventArgs e) {  
    ASPxComboBox combo1 = (ASPxComboBox)sender;  
    object oldCat1 = Session["Cat1ID"];  
    if(oldCat1 != null && oldCat1.Equals(combo1.Value)) return;  
    Session["Cat1ID"] = combo1.Value;  
    ASPxComboBox combo2 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(  
        grid.Columns["Category2ID"] as GridViewDataComboBoxColumn, "Cat2"));  
    combo2.Value = null;  
    Cat2_SelectedIndexChanged(combo2, EventArgs.Empty);  
}

Wrap the grid with an update panel to avoid updating the entire page.

Documentation

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

Example Code

MultiCombo/Default.aspx

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

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>

            <asp:SqlDataSource ID="dsData" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                DeleteCommand="DELETE FROM [Data] WHERE [ID] = @ID" InsertCommand="INSERT INTO [Data] ([Title], [Description], [Category1ID], [Category2ID], [Category3ID], [Category4ID]) VALUES (@Title, @Description, @Category1ID, @Category2ID, @Category3ID, @Category4ID)" SelectCommand="SELECT * FROM [Data]"
                UpdateCommand="UPDATE [Data] SET [Title] = @Title, [Description] = @Description, [Category1ID] = @Category1ID, [Category2ID] = @Category2ID, [Category3ID] = @Category3ID, [Category4ID] = @Category4ID WHERE [ID] = @ID">
                <DeleteParameters>
                    <asp:Parameter Name="ID" Type="Int32" />
                </DeleteParameters>
                <UpdateParameters>
                    <asp:Parameter Name="Title" Type="String" />
                    <asp:Parameter Name="Description" Type="String" />
                    <asp:Parameter Name="Category1ID" Type="Int32" />
                    <asp:Parameter Name="Category2ID" Type="Int32" />
                    <asp:Parameter Name="Category3ID" Type="Int32" />
                    <asp:Parameter Name="Category4ID" Type="Int32" />
                    <asp:Parameter Name="ID" Type="Int32" />
                </UpdateParameters>
                <InsertParameters>
                    <asp:Parameter Name="Title" Type="String" />
                    <asp:Parameter Name="Description" Type="String" />
                    <asp:Parameter Name="Category1ID" Type="Int32" />
                    <asp:Parameter Name="Category2ID" Type="Int32" />
                    <asp:Parameter Name="Category3ID" Type="Int32" />
                    <asp:Parameter Name="Category4ID" Type="Int32" />
                </InsertParameters>
            </asp:SqlDataSource>

            <asp:SqlDataSource ID="dsCategory1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>"
                SelectCommand="SELECT * FROM [Category1]"></asp:SqlDataSource>

            <asp:SqlDataSource ID="dsCategory2All" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString3 %>"
                SelectCommand="SELECT ID, Name FROM Category2 ORDER BY Name"></asp:SqlDataSource>

            <asp:SqlDataSource ID="dsCategory3All" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString4 %>"
                SelectCommand="SELECT [ID], [Name] FROM [Category3] ORDER BY [Name]"></asp:SqlDataSource>

            <asp:SqlDataSource ID="dsCategory4All" runat="server" EnableCaching="True" ConnectionString="<%$ ConnectionStrings:ConnectionString5 %>"
                SelectCommand="SELECT [ID], [Name] FROM [Category4] ORDER BY [Name]"></asp:SqlDataSource>
            <asp:SqlDataSource ID="dsCategory3" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString4 %>"
                SelectCommand="SELECT [ID], [Name] FROM [Category3] WHERE ([Category2ID] = @Category2ID) ORDER BY [Name]">
                <SelectParameters>
                    <asp:SessionParameter DefaultValue="0" Name="Category2ID" SessionField="Cat2ID" Type="Int32" />
                </SelectParameters>
            </asp:SqlDataSource>

            <asp:SqlDataSource ID="dsCategory2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString3 %>"
                SelectCommand="SELECT ID, Name FROM Category2 WHERE (Category1ID = @Category1ID) ORDER BY Name">
                <SelectParameters>
                    <asp:SessionParameter DefaultValue="0" Name="Category1ID" SessionField="Cat1ID" Type="Int32" />
                </SelectParameters>
            </asp:SqlDataSource>

            <asp:SqlDataSource ID="dsCategory4" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString5 %>"
                SelectCommand="SELECT [ID], [Name] FROM [Category4] WHERE ([Category3ID] = @Category3ID) ORDER BY [Name]">
                <SelectParameters>
                    <asp:SessionParameter DefaultValue="0" Name="Category3ID" SessionField="Cat3ID" Type="Int32" />
                </SelectParameters>
            </asp:SqlDataSource>
       
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>

                    <dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False"
                        DataSourceID="dsData" KeyFieldName="ID" OnStartRowEditing="grid_StartRowEditing"
                        OnHtmlRowCreated="grid_HtmlRowCreated" OnRowUpdating="grid_RowUpdating"
                        OnRowInserting="grid_RowInserting" EnableCallBacks="False">
                        <Columns>
                            <dx:GridViewCommandColumn VisibleIndex="0" ShowEditButton="true" ShowNewButton="true" ShowDeleteButton="true" />
                            <dx:GridViewDataTextColumn FieldName="ID" ReadOnly="True" VisibleIndex="1">
                                <EditFormSettings Visible="False" />
                            </dx:GridViewDataTextColumn>
                            <dx:GridViewDataTextColumn FieldName="Title" VisibleIndex="2" />
                            <dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="3" />
                            <dx:GridViewDataComboBoxColumn FieldName="Category1ID" VisibleIndex="4">
                                <PropertiesComboBox DataSourceID="dsCategory1" TextField="Name" ValueField="ID" ValueType="System.Int32" />
                                <EditItemTemplate>
                                    <dx:ASPxComboBox ID="Cat1" runat="server"
                                        DataSourceID="dsCategory1" TextField="Name" ValueField="ID" Value='<%# Bind("Category1ID") %>'
                                        AutoPostBack="true" OnSelectedIndexChanged="Cat1_SelectedIndexChanged" ValueType="System.Int32">
                                    </dx:ASPxComboBox>
                                </EditItemTemplate>
                            </dx:GridViewDataComboBoxColumn>
                            <dx:GridViewDataComboBoxColumn FieldName="Category2ID" VisibleIndex="5">
                                <PropertiesComboBox DataSourceID="dsCategory2All" TextField="Name" ValueField="ID"
                                    ValueType="System.Int32" />
                                <EditItemTemplate>
                                    <dx:ASPxComboBox ID="Cat2" runat="server"
                                        DataSourceID="dsCategory2" TextField="Name" ValueField="ID"
                                        AutoPostBack="true" OnSelectedIndexChanged="Cat2_SelectedIndexChanged" ValueType="System.Int32">
                                    </dx:ASPxComboBox>
                                </EditItemTemplate>
                            </dx:GridViewDataComboBoxColumn>
                            <dx:GridViewDataComboBoxColumn FieldName="Category3ID" VisibleIndex="6">
                                <PropertiesComboBox DataSourceID="dsCategory3All" TextField="Name" ValueField="ID"
                                    ValueType="System.Int32" />
                                <EditItemTemplate>
                                    <dx:ASPxComboBox ID="Cat3" runat="server"
                                        DataSourceID="dsCategory3" TextField="Name" ValueField="ID"
                                        AutoPostBack="true" OnSelectedIndexChanged="Cat3_SelectedIndexChanged" ValueType="System.Int32">
                                    </dx:ASPxComboBox>
                                </EditItemTemplate>
                            </dx:GridViewDataComboBoxColumn>
                            <dx:GridViewDataComboBoxColumn FieldName="Category4ID" VisibleIndex="7">
                                <PropertiesComboBox DataSourceID="dsCategory4All" TextField="Name" ValueField="ID"
                                    ValueType="System.Int32" />
                                <EditItemTemplate>
                                    <dx:ASPxComboBox ID="Cat4" runat="server"
                                        DataSourceID="dsCategory4" TextField="Name" ValueField="ID"
                                        AutoPostBack="true" ValueType="System.Int32">
                                    </dx:ASPxComboBox>
                                </EditItemTemplate>
                            </dx:GridViewDataComboBoxColumn>
                        </Columns>
                        <SettingsEditing Mode="Inline" />
                    </dx:ASPxGridView>
                </ContentTemplate>
            </asp:UpdatePanel>

        </div>
    </form>
</body>
</html>

MultiCombo/Default.aspx.cs(vb)

C#
VB.NET

C#
using System;
using DevExpress.Web;
using System.Collections.Specialized;

namespace MultiCombo {
    public partial class _Default : System.Web.UI.Page {
        protected void Cat1_SelectedIndexChanged(object sender, EventArgs e) {
            ASPxComboBox combo1 = (ASPxComboBox)sender;
            object oldCat1 = Session["Cat1ID"];
            if(oldCat1 != null && oldCat1.Equals(combo1.Value)) return;
            Session["Cat1ID"] = combo1.Value;
            ASPxComboBox combo2 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(
                grid.Columns["Category2ID"] as GridViewDataComboBoxColumn, "Cat2"));
            combo2.Value = null;
            Cat2_SelectedIndexChanged(combo2, EventArgs.Empty);
        }
        protected void Cat2_SelectedIndexChanged(object sender, EventArgs e) {
            ASPxComboBox combo2 = (ASPxComboBox)sender;
            object oldCat2 = Session["Cat2ID"];
            if(oldCat2 != null && oldCat2.Equals(combo2.Value)) return;
            Session["Cat2ID"] = combo2.Value;
            ASPxComboBox combo3 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(
                grid.Columns["Category3ID"] as GridViewDataComboBoxColumn, "Cat3"));
            combo3.Value = null;
            Cat3_SelectedIndexChanged(combo3, EventArgs.Empty);
        }

        protected void Cat3_SelectedIndexChanged(object sender, EventArgs e) {
            ASPxComboBox combo3 = (ASPxComboBox)sender;
            object oldCat3 = Session["Cat3ID"];
            if(oldCat3 != null && oldCat3.Equals(combo3.Value)) return;
            Session["Cat3ID"] = combo3.Value;
            ASPxComboBox combo4 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(
                grid.Columns["Category4ID"] as GridViewDataComboBoxColumn, "Cat4"));
            combo4.Value = null;
        }

        protected void grid_HtmlRowCreated(object sender, DevExpress.Web.ASPxGridViewTableRowEventArgs e) {
            if((e.RowType == GridViewRowType.InlineEdit)) {
                ASPxComboBox combo2 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(
                    grid.Columns["Category2ID"] as GridViewDataComboBoxColumn, "Cat2"));
                if(Request.Params[combo2.UniqueID] != null) return;

                if(!grid.IsNewRowEditing) {
                    object[] vals = (object[])grid.GetRowValues(grid.EditingRowVisibleIndex,
                    new string[] { "Category2ID", "Category3ID", "Category4ID" });
                    ASPxComboBox combo4 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(
                    grid.Columns["Category4ID"] as GridViewDataComboBoxColumn, "Cat4"));
                    ASPxComboBox combo3 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(
                    grid.Columns["Category3ID"] as GridViewDataComboBoxColumn, "Cat3"));
                    combo2.Value = vals[0];
                    combo3.Value = vals[1];
                    combo4.Value = vals[2];
                }
            }
        }

        protected void grid_StartRowEditing(object sender, DevExpress.Web.Data.ASPxStartRowEditingEventArgs e) {
            object[] vals = (object[])grid.GetRowValuesByKeyValue(e.EditingKeyValue,
                new string[] { "Category1ID", "Category2ID", "Category3ID" });
            Session["Cat1ID"] = vals[0];
            Session["Cat2ID"] = vals[1];
            Session["Cat3ID"] = vals[2];
        }

        protected void grid_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
            SaveOrInsertData(e.NewValues);
        }

        private void SaveOrInsertData(OrderedDictionary NewValues) {
            object cat1 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(
                grid.Columns["Category1ID"] as GridViewDataComboBoxColumn, "Cat1")).Value;
            NewValues["Category1ID"] = cat1;
            object cat2 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(
                grid.Columns["Category2ID"] as GridViewDataComboBoxColumn, "Cat2")).Value;
            NewValues["Category2ID"] = cat2;
            object cat3 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(
                grid.Columns["Category3ID"] as GridViewDataComboBoxColumn, "Cat3")).Value;
            NewValues["Category3ID"] = cat3;
            object cat4 = ((ASPxComboBox)grid.FindEditRowCellTemplateControl(
                grid.Columns["Category4ID"] as GridViewDataComboBoxColumn, "Cat4")).Value;
            NewValues["Category4ID"] = cat4;
        }

        protected void grid_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
            SaveOrInsertData(e.NewValues);
        }
    }
}

Visual Basic
Imports System
Imports DevExpress.Web
Imports System.Collections.Specialized

Namespace MultiCombo
    Partial Public Class _Default
        Inherits System.Web.UI.Page

        Protected Sub Cat1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
            Dim combo1 As ASPxComboBox = DirectCast(sender, ASPxComboBox)
            Dim oldCat1 As Object = Session("Cat1ID")
            If oldCat1 IsNot Nothing AndAlso oldCat1.Equals(combo1.Value) Then
                Return
            End If
            Session("Cat1ID") = combo1.Value
            Dim combo2 As ASPxComboBox = (CType(grid.FindEditRowCellTemplateControl(TryCast(grid.Columns("Category2ID"), GridViewDataComboBoxColumn), "Cat2"), ASPxComboBox))
            combo2.Value = Nothing
            Cat2_SelectedIndexChanged(combo2, EventArgs.Empty)
        End Sub
        Protected Sub Cat2_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
            Dim combo2 As ASPxComboBox = DirectCast(sender, ASPxComboBox)
            Dim oldCat2 As Object = Session("Cat2ID")
            If oldCat2 IsNot Nothing AndAlso oldCat2.Equals(combo2.Value) Then
                Return
            End If
            Session("Cat2ID") = combo2.Value
            Dim combo3 As ASPxComboBox = (CType(grid.FindEditRowCellTemplateControl(TryCast(grid.Columns("Category3ID"), GridViewDataComboBoxColumn), "Cat3"), ASPxComboBox))
            combo3.Value = Nothing
            Cat3_SelectedIndexChanged(combo3, EventArgs.Empty)
        End Sub

        Protected Sub Cat3_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
            Dim combo3 As ASPxComboBox = DirectCast(sender, ASPxComboBox)
            Dim oldCat3 As Object = Session("Cat3ID")
            If oldCat3 IsNot Nothing AndAlso oldCat3.Equals(combo3.Value) Then
                Return
            End If
            Session("Cat3ID") = combo3.Value
            Dim combo4 As ASPxComboBox = (CType(grid.FindEditRowCellTemplateControl(TryCast(grid.Columns("Category4ID"), GridViewDataComboBoxColumn), "Cat4"), ASPxComboBox))
            combo4.Value = Nothing
        End Sub

        Protected Sub grid_HtmlRowCreated(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxGridViewTableRowEventArgs)
            If (e.RowType = GridViewRowType.InlineEdit) Then
                Dim combo2 As ASPxComboBox = (CType(grid.FindEditRowCellTemplateControl(TryCast(grid.Columns("Category2ID"), GridViewDataComboBoxColumn), "Cat2"), ASPxComboBox))
                If Request.Params(combo2.UniqueID) IsNot Nothing Then
                    Return
                End If

                If Not grid.IsNewRowEditing Then
                    Dim vals() As Object = CType(grid.GetRowValues(grid.EditingRowVisibleIndex, New String() { "Category2ID", "Category3ID", "Category4ID" }), Object())
                    Dim combo4 As ASPxComboBox = (CType(grid.FindEditRowCellTemplateControl(TryCast(grid.Columns("Category4ID"), GridViewDataComboBoxColumn), "Cat4"), ASPxComboBox))
                    Dim combo3 As ASPxComboBox = (CType(grid.FindEditRowCellTemplateControl(TryCast(grid.Columns("Category3ID"), GridViewDataComboBoxColumn), "Cat3"), ASPxComboBox))
                    combo2.Value = vals(0)
                    combo3.Value = vals(1)
                    combo4.Value = vals(2)
                End If
            End If
        End Sub

        Protected Sub grid_StartRowEditing(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxStartRowEditingEventArgs)
            Dim vals() As Object = CType(grid.GetRowValuesByKeyValue(e.EditingKeyValue, New String() { "Category1ID", "Category2ID", "Category3ID" }), Object())
            Session("Cat1ID") = vals(0)
            Session("Cat2ID") = vals(1)
            Session("Cat3ID") = vals(2)
        End Sub

        Protected Sub grid_RowUpdating(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs)
            SaveOrInsertData(e.NewValues)
        End Sub

        Private Sub SaveOrInsertData(ByVal NewValues As OrderedDictionary)
            Dim cat1 As Object = CType(grid.FindEditRowCellTemplateControl(TryCast(grid.Columns("Category1ID"), GridViewDataComboBoxColumn), "Cat1"), ASPxComboBox).Value
            NewValues("Category1ID") = cat1
            Dim cat2 As Object = CType(grid.FindEditRowCellTemplateControl(TryCast(grid.Columns("Category2ID"), GridViewDataComboBoxColumn), "Cat2"), ASPxComboBox).Value
            NewValues("Category2ID") = cat2
            Dim cat3 As Object = CType(grid.FindEditRowCellTemplateControl(TryCast(grid.Columns("Category3ID"), GridViewDataComboBoxColumn), "Cat3"), ASPxComboBox).Value
            NewValues("Category3ID") = cat3
            Dim cat4 As Object = CType(grid.FindEditRowCellTemplateControl(TryCast(grid.Columns("Category4ID"), GridViewDataComboBoxColumn), "Cat4"), ASPxComboBox).Value
            NewValues("Category4ID") = cat4
        End Sub

        Protected Sub grid_RowInserting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInsertingEventArgs)
            SaveOrInsertData(e.NewValues)
        End Sub
    End Class
End Namespace

DevExpress Support Team

last modified 2 years ago

Modified: June 20, 2023 6:36 AM

Platform: ASP.NET Web Forms

Product: ASPxDataEditors

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.