Grid View for ASP.NET Web Forms - How to implement cascading combo boxes in grid

This example demonstrates how to create cascading combo boxes for each row of the ASPxGridView control.

To implement the cascading behavior between a pair of ASPxComboBox controls defined within the same row, editor settings are specified dynamically in the Init event.

C#
protected void cmbMaster_Init(object sender, EventArgs e) {  
    ASPxComboBox cmbParent = (ASPxComboBox)sender;  
    GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)cmbParent.NamingContainer;  
    cmbParent.ClientSideEvents.SelectedIndexChanged = string.Format("function(s, e) {{ OnSelectedIndexChanged(s, e, {0}); }}", templateContainer.VisibleIndex);  
}  
protected void cmbChild_Init(object sender, EventArgs e) {  
    ASPxComboBox cmbChild = (ASPxComboBox)sender;  
    GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)cmbChild.NamingContainer;  
    cmbChild.ClientInstanceName = string.Format("cmbChild_{0}", templateContainer.VisibleIndex);  
    cmbChild.Callback += new DevExpress.Web.CallbackEventHandlerBase(cmbChild_Callback);  
}

Documentation

Access Controls in Templates on the Server

Online Demos

More Examples

Example Code

WebSite/Default.aspx

ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dx" %>

<!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></title>
    <script language="javascript" type="text/javascript">
        function OnSelectedIndexChanged(s, e, visibleIndex) {
            var cmbChild = eval('cmbChild_' + visibleIndex);
            cmbChild.PerformCallback(s.GetValue());
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxGridView ID="grid" runat="server" AutoGenerateColumns="False" DataSourceID="ads"
            KeyFieldName="EmployeeID">
            <Columns>
                <dx:GridViewDataTextColumn FieldName="EmployeeID" ReadOnly="True" VisibleIndex="0">
                    <EditFormSettings Visible="False" />
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="LastName" VisibleIndex="1">
                    <DataItemTemplate>
                        <dx:ASPxComboBox ID="cmbMaster" runat="server" DataSourceID="adsMaster"
                            ValueType="System.Int32" ValueField="CategoryID" TextField="CategoryName" OnInit="cmbMaster_Init">
                        </dx:ASPxComboBox>
                        <asp:AccessDataSource ID="adsMaster" runat="server" DataFile="~/App_Data/nwind.mdb"
                            SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:AccessDataSource>
                    </DataItemTemplate>
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="FirstName" VisibleIndex="2">
                    <DataItemTemplate>
                        <dx:ASPxComboBox ID="cmbChild" runat="server" DataSourceID="asdChild"
                            ValueType="System.Int32" ValueField="ProductID" TextField="ProductName" OnInit="cmbChild_Init">
                        </dx:ASPxComboBox>
                        <asp:AccessDataSource ID="asdChild" runat="server" DataFile="~/App_Data/nwind.mdb"
                            SelectCommand="SELECT [ProductID], [ProductName] FROM [Products] WHERE ([CategoryID] = ?)">
                            <SelectParameters>
                                <asp:Parameter DefaultValue="-1" Name="CategoryID" Type="Int32" />
                            </SelectParameters>
                        </asp:AccessDataSource>
                    </DataItemTemplate>
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="Title" VisibleIndex="3">
                </dx:GridViewDataTextColumn>
            </Columns>
        </dx:ASPxGridView>
    </div>
    <asp:AccessDataSource ID="ads" runat="server" DataFile="~/App_Data/nwind.mdb"
        SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]">
    </asp:AccessDataSource>
    </form>
</body>
</html>

WebSite/Default.aspx.cs(vb)

C#
VB.NET

C#
using System;
using DevExpress.Web;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page {
    protected void cmbMaster_Init(object sender, EventArgs e) {
        ASPxComboBox cmbParent = (ASPxComboBox)sender;
        GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)cmbParent.NamingContainer;
        cmbParent.ClientSideEvents.SelectedIndexChanged = string.Format("function(s, e) {{ OnSelectedIndexChanged(s, e, {0}); }}", templateContainer.VisibleIndex);
    }
    protected void cmbChild_Init(object sender, EventArgs e) {
        ASPxComboBox cmbChild = (ASPxComboBox)sender;
        GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)cmbChild.NamingContainer;
        cmbChild.ClientInstanceName = string.Format("cmbChild_{0}", templateContainer.VisibleIndex);
        cmbChild.Callback += new DevExpress.Web.CallbackEventHandlerBase(cmbChild_Callback);
    }

    void cmbChild_Callback(object sender, DevExpress.Web.CallbackEventArgsBase e) {
        ASPxComboBox cmbChild = (ASPxComboBox)sender;
        AccessDataSource cmbChildAccessDataSource = (AccessDataSource)cmbChild.NamingContainer.FindControl("asdChild");
        cmbChildAccessDataSource.SelectParameters[0].DefaultValue = e.Parameter;
        cmbChild.DataBindItems();
    }
}

Visual Basic
Imports System
Imports DevExpress.Web
Imports System.Web.UI.WebControls

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

    Protected Sub cmbMaster_Init(ByVal sender As Object, ByVal e As EventArgs)
        Dim cmbParent As ASPxComboBox = DirectCast(sender, ASPxComboBox)
        Dim templateContainer As GridViewDataItemTemplateContainer = CType(cmbParent.NamingContainer, GridViewDataItemTemplateContainer)
        cmbParent.ClientSideEvents.SelectedIndexChanged = String.Format("function(s, e) {{ OnSelectedIndexChanged(s, e, {0}); }}", templateContainer.VisibleIndex)
    End Sub
    Protected Sub cmbChild_Init(ByVal sender As Object, ByVal e As EventArgs)
        Dim cmbChild As ASPxComboBox = DirectCast(sender, ASPxComboBox)
        Dim templateContainer As GridViewDataItemTemplateContainer = CType(cmbChild.NamingContainer, GridViewDataItemTemplateContainer)
        cmbChild.ClientInstanceName = String.Format("cmbChild_{0}", templateContainer.VisibleIndex)
        AddHandler cmbChild.Callback, AddressOf cmbChild_Callback
    End Sub

    Private Sub cmbChild_Callback(ByVal sender As Object, ByVal e As DevExpress.Web.CallbackEventArgsBase)
        Dim cmbChild As ASPxComboBox = DirectCast(sender, ASPxComboBox)
        Dim cmbChildAccessDataSource As AccessDataSource = CType(cmbChild.NamingContainer.FindControl("asdChild"), AccessDataSource)
        cmbChildAccessDataSource.SelectParameters(0).DefaultValue = e.Parameter
        cmbChild.DataBindItems()
    End Sub
End Class

Mike (DevExpress)

last modified 2 years ago

Modified: November 24, 2023 11:14 AM

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.