TelerikDeveloper.com

TelerikDeveloper.com

BenD 8/7/2012 2:04:37 PM

Telerik - ASPX - RadGrid Cascading Dropdown boxes in EditForms mode

We're developing a new application here that requires a RadGrid in EditForms mode; and when in insert mode we need some of the dropdowns to cascade. There are fields for Project and Category, when we select Project we need Category to populate with all the catetories for that project.

This article will document the process needed to achieve that. The basic technique is to use template columns instead of the native GridDropDownColumn, and to handle the ItemDataBound event and the SelectedIndexChanged events. We've set this grid up in AJAX mode so it doesn't 'flash' as things happen.

Also, we've set up the 'Empy Message' property on two of the dropdowns

The end result will look like this in 'insert' mode:



ASPX

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" 
        EditMode="InPlace" CommandItemDisplay="Top"
        CssClass="grid" Skin="Default"
        AllowPaging="True" PageSize="20"  Width="100%"
        >
        <MasterTableView DataKeyNames="TaskID" CommandItemDisplay="Top" EditMode="EditForms">
        <Columns>
            <telerik:GridButtonColumn ConfirmText="Delete this user?" ConfirmDialogType="RadWindow"
                ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" ConfirmDialogHeight="100px"
                ConfirmDialogWidth="220px"  />
            <telerik:GridEditCommandColumn   ButtonType="ImageButton"></telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn DataField="TaskID" HeaderText="ID" Visible="false"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Task" HeaderText="Task">
            </telerik:GridBoundColumn>
 
            <telerik:GridDropDownColumn UniqueName="AssignedTo" ListTextField="UserName" 
                ListValueField="UserID" HeaderText="Assigned To"
                DataField="AssignedTo" DropDownControlType="RadComboBox" AllowSorting="true">
            </telerik:GridDropDownColumn>
 
            <telerik:GridTemplateColumn DataField="ProjectID" HeaderText="Project" UniqueName="ProjectID">
                <ItemTemplate>
                    <%# Eval("ProjectID")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox ID="ProjectIDCombo" runat="server" AutoPostBack="true" EmptyMessage="Select a Project" 
                        OnSelectedIndexChanged="ProjectIDCombo_SelectedIndexChanged">
                    </telerik:RadComboBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
 
            <telerik:GridTemplateColumn DataField="CategoryID" HeaderText="Category" UniqueName="CategoryID">
                <ItemTemplate>
                    <%# Eval("CategoryID")%>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox ID="CategoryIDCombo" runat="server" AutoPostBack="true">
                    </telerik:RadComboBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
 
            
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

 

Code Behind

    Private Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgsHandles RadGrid1.ItemDataBound
        If (TypeOf e.Item Is GridEditableItem AndAlso (e.Item.IsInEditMode)) Then
            Dim editedItem As GridEditableItem = CType(e.Item, GridEditableItem)
            Dim editMan As GridEditManager = editedItem.EditManager
            Dim editor As GridDropDownListColumnEditor
 
            editor = CType(editMan.GetColumnEditor("AssignedTo"), GridDropDownListColumnEditor)
            'in case you have RadComboBox editor for the GridDropDownColumn (this is the default editor),            
            'you will need to use ComboBoxControl below instead of DropDownListControl 
            'Then you can modify the list control as per your custom conventions
            editor.DataSource = SPs.DD_aspnet_UsersExt_SEL_byAccount(oApp.AccountID).getTable
            editor.DataBind()
            editor.ComboBoxControl.EmptyMessage = "Select a User"
            editor.ComboBoxControl.AllowCustomText = True
 
            'And so on
 
            Dim oDT As DataTable = SPs.DD_Project_SEL_byAccount(oApp.AccountID).getTable
            Dim ProjectID As RadComboBox = e.Item.FindControl("ProjectIDCombo")
            ProjectID.DataSource = oDT
            ProjectID.DataTextField = "ProjectName"
            ProjectID.DataValueField = "ProjectID"
            ProjectID.DataBind()
        End If
 
 
    End Sub
 
    Sub ProjectIDCombo_SelectedIndexChanged(o As Object, e As RadComboBoxSelectedIndexChangedEventArgs)
        Dim ProjectID As RadComboBox = CType(o, RadComboBox)
        Dim selected As String = ProjectID.SelectedValue
 
        Dim CategoryID As RadComboBox = ProjectID.NamingContainer.FindControl("CategoryIDCombo")
        CategoryID.DataSource = SPs.DD_ProjectCategory_SEL_byAccountProject(oApp.AccountID, selected).getTable
        CategoryID.DataTextField = "CategoryName"
        CategoryID.DataValueField = "CategoryID"
        CategoryID.DataBind()
        CategoryID.EmptyMessage = "Select a Category"
 
 
 
    End Sub
 
    Private Sub RadGrid1_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgsHandles RadGrid1.NeedDataSource
        Me.RadGrid1.DataSource = SPs.DD_TaskList_SEL().getTable
 
    End Sub