Grid View for ASP.NET Web Forms - Display an editor in a templated column based on another editor's value

This example demonstrates how to add editors to templated columns and show or hide an editor based on another editor's selection.

Display editors in templated columns

Overview

Follow the steps below to show or hide template editors:

For two grid columns, specify their DataItemTemplate properties and add editors to the templates.

ASPx
<dx:GridViewDataTextColumn Caption="Send Promotion" VisibleIndex="4">  
    <DataItemTemplate>  
        <dx:ASPxRadioButtonList ID="ASPxRadioButtonList1" runat="server" OnInit="ASPxRadioButtonList1_Init">  
            <Items>  
                <!-- ... -->  
            </Items>  
        </dx:ASPxRadioButtonList>  
    </DataItemTemplate>  
</dx:GridViewDataTextColumn>  
<dx:GridViewDataTextColumn Caption="Reason" VisibleIndex="5">  
    <DataItemTemplate>  
        <dx:ASPxComboBox ID="ASPxComboBox1" runat="server" ValueType="System.String" OnInit="ASPxComboBox1_Init">  
            <Items>  
                <!-- ... -->  
            </Items>  
        </dx:ASPxComboBox>  
        <br />  
        <dx:ASPxMemo ID="ASPxMemo1" runat="server" Height="71px" Width="170px" OnInit="ASPxMemo1_Init">  
        </dx:ASPxMemo>  
    </DataItemTemplate>  
</dx:GridViewDataTextColumn>

For all editors, handle their server-side Init events and do the following in the handlers:

Access an editor's template container and get the container's visible index.
Specify an editor's ClientInstanceName property based on the container's visible index.

C#
protected void ASPxComboBox1_Init(object sender, EventArgs e) {  
    ASPxComboBox cmb = (ASPxComboBox)sender;  
    GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)cmb.NamingContainer;  
    cmb.ID = string.Format("cmb_{0}", templateContainer.VisibleIndex);  
    cmb.ClientInstanceName = string.Format("cmb_{0}", templateContainer.VisibleIndex);  
}

For the radio button editor, handle its client-side SelectedIndexChanged event. In the handler, call SetVisible methods to show or hide other editors based on the selected value in the radio button editor.

C#
protected void ASPxRadioButtonList1_Init(object sender, EventArgs e) {  
    ASPxRadioButtonList rb = (ASPxRadioButtonList)sender;  
    GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)rb.NamingContainer;  
    rb.ID = string.Format("rb_{0}", templateContainer.VisibleIndex);  
    rb.ClientInstanceName = string.Format("rb_{0}", templateContainer.VisibleIndex);  
    rb.ClientSideEvents.SelectedIndexChanged = string.Format("function(s, e) {{ OnSelectedIndexChangedEventHandler({0}, '{1}'); }}", rb.ClientInstanceName, templateContainer.VisibleIndex);  
}

JavaScript
function OnSelectedIndexChangedEventHandler(radioButtonList, rowVisibleIndex) {  
    var comboBox = ASPxClientControl.Cast('cmb_' + rowVisibleIndex.toString());  
    var memo = ASPxClientControl.Cast('memo_' + rowVisibleIndex.toString());  
    var selectedItem = radioButtonList.GetSelectedItem();  
    if (selectedItem) {  
        switch (selectedItem.value) {  
            case '0':  
                comboBox.SetVisible(false);  
                memo.SetVisible(true);  
                break;  
            case '1':  
                comboBox.SetVisible(true);  
                memo.SetVisible(false);  
                break;  
        }  
    }  
}

Documentation

Grid View Templates

More Examples

Grid View for ASP.NET Web Forms - How to hide template controls in the specified cells

Example Code

WebSite/Default.aspx

ASPx
<%@ Page Language="C#" AutoEventWireup="false" 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="dxwgv" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.14.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dxe" %>
<!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 type="text/javascript" language="javascript">
        function OnSelectedIndexChangedEventHandler(radioButtonList, rowVisibleIndex) {
            var comboBox = ASPxClientControl.Cast('cmb_' + rowVisibleIndex.toString());
            var memo = ASPxClientControl.Cast('memo_' + rowVisibleIndex.toString());
            
            var selectedItem = radioButtonList.GetSelectedItem();
            if (selectedItem) {
                switch (selectedItem.value) {
                    case '0':
                        comboBox.SetVisible(false);
                        memo.SetVisible(true);
                        break;
                    case '1':
                        comboBox.SetVisible(true);
                        memo.SetVisible(false);
                        break;
                }
           }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <dxwgv:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False"
                DataSourceID="AccessDataSource1" KeyFieldName="CustomerID">
                <Columns>
                    <dxwgv:GridViewDataTextColumn FieldName="CustomerID" ReadOnly="True" VisibleIndex="0">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="CompanyName" VisibleIndex="1">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="ContactName" VisibleIndex="2">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn FieldName="ContactTitle" VisibleIndex="3">
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Send Promotion" VisibleIndex="4">
                        <DataItemTemplate>
                            <dxe:ASPxRadioButtonList ID="ASPxRadioButtonList1" runat="server" OnInit="ASPxRadioButtonList1_Init">
                                <Items>
                                    <dxe:ListEditItem Text="Send" Value="1" />
                                    <dxe:ListEditItem Text="No Send" Value="0" />
                                </Items>
                            </dxe:ASPxRadioButtonList>
                        </DataItemTemplate>
                    </dxwgv:GridViewDataTextColumn>
                    <dxwgv:GridViewDataTextColumn Caption="Reazon" VisibleIndex="5">
                        <DataItemTemplate>
                            <dxe:ASPxComboBox ID="ASPxComboBox1" runat="server" ValueType="System.String" OnInit="ASPxComboBox1_Init">
                                <Items>
                                    <dxe:ListEditItem Text="Rain" Value="Rain" />
                                    <dxe:ListEditItem Text="Storm" Value="Storm" />
                                    <dxe:ListEditItem Text="No Car" Value="No Car" />
                                    <dxe:ListEditItem Text="No Fly" Value="No Fly" />
                                </Items>
                            </dxe:ASPxComboBox>
                            <br />
                            <dxe:ASPxMemo ID="ASPxMemo1" runat="server" Height="71px" Width="170px" OnInit="ASPxMemo1_Init">
                            </dxe:ASPxMemo>
                        </DataItemTemplate>
                    </dxwgv:GridViewDataTextColumn>
                </Columns>
            </dxwgv:ASPxGridView>
            <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
                DeleteCommand="DELETE FROM [Customers] WHERE (([CustomerID] = ?) OR ([CustomerID] IS NULL AND ? IS NULL))"
                InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle]) VALUES (?, ?, ?, ?)"
                SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle] FROM [Customers] ORDER BY [ContactName]"
                UpdateCommand="UPDATE [Customers] SET [CompanyName] = ?, [ContactName] = ?, [ContactTitle] = ? WHERE (([CustomerID] = ?) OR ([CustomerID] IS NULL AND ? IS NULL))">
                <DeleteParameters>
                    <asp:Parameter Name="CustomerID" Type="String" />
                </DeleteParameters>
                <UpdateParameters>
                    <asp:Parameter Name="CompanyName" Type="String" />
                    <asp:Parameter Name="ContactName" Type="String" />
                    <asp:Parameter Name="ContactTitle" Type="String" />
                    <asp:Parameter Name="CustomerID" Type="String" />
                </UpdateParameters>
                <InsertParameters>
                    <asp:Parameter Name="CustomerID" Type="String" />
                    <asp:Parameter Name="CompanyName" Type="String" />
                    <asp:Parameter Name="ContactName" Type="String" />
                    <asp:Parameter Name="ContactTitle" Type="String" />
                </InsertParameters>
            </asp:AccessDataSource>
            <dxe:ASPxButton ID="ASPxButton1" runat="server" Text="Save" OnClick="ASPxButton1_Click">
            </dxe:ASPxButton>
        </div>
    </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 ASPxRadioButtonList1_Init(object sender, EventArgs e) {
        ASPxRadioButtonList rb = (ASPxRadioButtonList)sender;
        
        GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)rb.NamingContainer;
        rb.ID = string.Format("rb_{0}", templateContainer.VisibleIndex);
        rb.ClientInstanceName = string.Format("rb_{0}", templateContainer.VisibleIndex);
        rb.ClientSideEvents.SelectedIndexChanged = string.Format("function(s, e) {{ OnSelectedIndexChangedEventHandler({0}, '{1}'); }}", rb.ClientInstanceName, templateContainer.VisibleIndex);
    }
    protected void ASPxComboBox1_Init(object sender, EventArgs e) {
        ASPxComboBox cmb = (ASPxComboBox)sender;
        
        GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)cmb.NamingContainer;
        cmb.ID = string.Format("cmb_{0}", templateContainer.VisibleIndex);
        cmb.ClientInstanceName = string.Format("cmb_{0}", templateContainer.VisibleIndex);
    }
    protected void ASPxMemo1_Init(object sender, EventArgs e) {
        ASPxMemo memo = (ASPxMemo)sender;
        
        GridViewDataItemTemplateContainer templateContainer = (GridViewDataItemTemplateContainer)memo.NamingContainer;
        memo.ID = string.Format("memo_{0}", templateContainer.VisibleIndex);
        memo.ClientInstanceName = string.Format("memo_{0}", templateContainer.VisibleIndex);
    }
    protected void ASPxButton1_Click(object sender, EventArgs e) {
        int startIndex = ASPxGridView1.PageIndex * ASPxGridView1.SettingsPager.PageSize;
        int endIndex = Math.Min(ASPxGridView1.VisibleRowCount, startIndex + ASPxGridView1.SettingsPager.PageSize);

        for (int i = startIndex; i < endIndex; i++) {
            ASPxRadioButtonList rb = (ASPxRadioButtonList)ASPxGridView1.FindRowCellTemplateControl(i, (GridViewDataColumn)ASPxGridView1.Columns[4], string.Format("rb_{0}", i));
            ASPxComboBox cmb = (ASPxComboBox)ASPxGridView1.FindRowCellTemplateControl(i, (GridViewDataColumn)ASPxGridView1.Columns[5], string.Format("cmb_{0}", i));
            ASPxMemo memo = (ASPxMemo)ASPxGridView1.FindRowCellTemplateControl(i, (GridViewDataColumn)ASPxGridView1.Columns[5], string.Format("memo_{0}", i));
            //SAVE DATA
        }
    }
}

Visual Basic
Imports System
Imports DevExpress.Web

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

    Protected Sub ASPxRadioButtonList1_Init(ByVal sender As Object, ByVal e As EventArgs)
        Dim rb As ASPxRadioButtonList = DirectCast(sender, ASPxRadioButtonList)

        Dim templateContainer As GridViewDataItemTemplateContainer = CType(rb.NamingContainer, GridViewDataItemTemplateContainer)
        rb.ID = String.Format("rb_{0}", templateContainer.VisibleIndex)
        rb.ClientInstanceName = String.Format("rb_{0}", templateContainer.VisibleIndex)
        rb.ClientSideEvents.SelectedIndexChanged = String.Format("function(s, e) {{ OnSelectedIndexChangedEventHandler({0}, '{1}'); }}", rb.ClientInstanceName, templateContainer.VisibleIndex)
    End Sub
    Protected Sub ASPxComboBox1_Init(ByVal sender As Object, ByVal e As EventArgs)
        Dim cmb As ASPxComboBox = DirectCast(sender, ASPxComboBox)

        Dim templateContainer As GridViewDataItemTemplateContainer = CType(cmb.NamingContainer, GridViewDataItemTemplateContainer)
        cmb.ID = String.Format("cmb_{0}", templateContainer.VisibleIndex)
        cmb.ClientInstanceName = String.Format("cmb_{0}", templateContainer.VisibleIndex)
    End Sub
    Protected Sub ASPxMemo1_Init(ByVal sender As Object, ByVal e As EventArgs)
        Dim memo As ASPxMemo = DirectCast(sender, ASPxMemo)

        Dim templateContainer As GridViewDataItemTemplateContainer = CType(memo.NamingContainer, GridViewDataItemTemplateContainer)
        memo.ID = String.Format("memo_{0}", templateContainer.VisibleIndex)
        memo.ClientInstanceName = String.Format("memo_{0}", templateContainer.VisibleIndex)
    End Sub
    Protected Sub ASPxButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
        Dim startIndex As Integer = ASPxGridView1.PageIndex * ASPxGridView1.SettingsPager.PageSize
        Dim endIndex As Integer = Math.Min(ASPxGridView1.VisibleRowCount, startIndex + ASPxGridView1.SettingsPager.PageSize)

        For i As Integer = startIndex To endIndex - 1
            Dim rb As ASPxRadioButtonList = CType(ASPxGridView1.FindRowCellTemplateControl(i, CType(ASPxGridView1.Columns(4), GridViewDataColumn), String.Format("rb_{0}", i)), ASPxRadioButtonList)
            Dim cmb As ASPxComboBox = CType(ASPxGridView1.FindRowCellTemplateControl(i, CType(ASPxGridView1.Columns(5), GridViewDataColumn), String.Format("cmb_{0}", i)), ASPxComboBox)
            Dim memo As ASPxMemo = CType(ASPxGridView1.FindRowCellTemplateControl(i, CType(ASPxGridView1.Columns(5), GridViewDataColumn), String.Format("memo_{0}", i)), ASPxMemo)
            'SAVE DATA
        Next i
    End Sub
End Class

Mike (DevExpress)

last modified 7 years ago

Modified: February 19, 2018 8:52 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.