Cascading DropDownList's in RadGridView EditForm

[Ariel]

So I've been Googling this and have found various articles pertaining to it, but none of the solutions seem to work. The screen I'm working on has a grid view for vehicle listings. When a listing is edited, the user can edit the Vehicle Type, Manufacturer & Model.

When a user selects Vehicle Type, the Manufacturer DropDownList will rebind, when a user selects a Manufacturer, the Model DropDownList will rebind. Unfortunately, I keep getting this error: 'DropDownList2' has a SelectedValue which is invalid because it does not exist in the list of items.

Maybe I have the binding order mixed up. Here is my code:

<telerik:RadGrid ID="radVehicleListingGrid" runat="server" AllowAutomaticDeletes="True" AllowAutomaticUpdates="True" CssClass="AdminGridView" DataSourceID="sdsVehicleListings" GridLines="None" Skin="">
    <AlternatingItemStyle CssClass="AltRow" />
    <MasterTableView AutoGenerateColumns="False" DataSourceID="sdsVehicleListings" EditMode="PopUp" DataKeyNames="ListingID">
        <EditFormSettings CaptionDataField="ListingID" CaptionFormatString="Edit Note" EditColumn-CancelImageUrl="/Images/System-Icons/SysIco-Close.png" EditColumn-UpdateText="Save Changes" EditFormType="Template" FormCaptionStyle-CssClass="AdminEditFormCaption" FormMainTableStyle-CssClass="AdminEditFormMainTable" FormStyle-CssClass="AdminEditForm" PopUpSettings-Modal="true" PopUpSettings-Width="650px">
            <EditColumn UpdateText="Save Changes" CancelImageUrl="/Images/System-Icons/SysIco-Close.png">
            </EditColumn>
            <FormStyle CssClass="AdminEditForm"></FormStyle>
            <FormMainTableStyle CssClass="AdminEditFormMainTable"></FormMainTableStyle>
            <FormCaptionStyle CssClass="AdminEditFormCaption"></FormCaptionStyle>
            <FormTemplate>
                <asp:Panel ID="pnlAdminEditForm" runat="server" DefaultButton="btnSaveListingChanges">
                    <table border="0" cellpadding="0" cellspacing="0" class="AdminEditFormMainTable" rules="rows" style="table-layout: auto; empty-cells: show;">
                        <tbody>
                            <tr class="Row">
                                <td width="125px">
                                    Vehicle Type:
                                </td>
                                <td>
                                    <asp:DropDownList ID="DropDownList3" runat="server" AppendDataBoundItems="True" SelectedValue='<%# Bind("VehicleTypeID") %>' DataSourceID="sdsEditVehicleTypes" DataTextField="VehicleType" DataValueField="VehicleTypeiD" OnSelectedIndexChanged="EditVehicleType_SelectedIndexChange" AutoPostBack="True">
                                        <asp:ListItem Value="0">Select a vehicle type...</asp:ListItem>
                                    </asp:DropDownList>
                                     <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="DropDownList3" ErrorMessage="Please select a vehicle type."></asp:RequiredFieldValidator>
                                    <asp:ValidatorCalloutExtender ID="RequiredFieldValidator4_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RequiredFieldValidator4">
                                    </asp:ValidatorCalloutExtender>
                                </td>
                            </tr>
                            <tr class="AltRow">
                                <td>
                                    Year:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtEditVehicleYear" runat="server" Text='<%# Bind("VehicleYear") %>' ValidationGroup="EditListing"></asp:TextBox>
                                </td>
                            </tr>
                            <tr class="Row">
                                <td width="125px">
                                    Manufacturer:
                                </td>
                                <td>
                                    <asp:DropDownList ID="DropDownList2" runat="server" AppendDataBoundItems="True" SelectedValue='<%# Bind("ManufacturerID") %>' DataSourceID="sdsEditManufacturers" DataTextField="Manufacturer" DataValueField="ManufacturerID" OnDataBinding="EditManufacturer_Databinding" OnDataBound="EditManufacturer_DataBound" OnSelectedIndexChanged="EditManufacturer_SelectedIndexChange" AutoPostBack="True" Visible="False">
                                        <asp:ListItem Value="0">Select a manufacturer...</asp:ListItem>
                                    </asp:DropDownList>
                                     <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="DropDownList2" ErrorMessage="Please select a manufacturer."></asp:RequiredFieldValidator>
                                    <asp:ValidatorCalloutExtender ID="RequiredFieldValidator3_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RequiredFieldValidator3">
                                    </asp:ValidatorCalloutExtender>
                                </td>
                            </tr>
                            <tr class="AltRow">
                                <td>
                                    Model:
                                </td>
                                <td>
                                    <asp:DropDownList ID="DropDownList1" runat="server" AppendDataBoundItems="True" SelectedValue='<%# Bind("ModelID") %>' DataSourceID="sdsEditModels" DataTextField="Model" DataValueField="ModelID" OnDataBinding="EditModel_DataBinding" OnDataBound="EditModel_DataBound">
                                        <asp:ListItem Value="0">Select a model...</asp:ListItem>
                                    </asp:DropDownList>
                                </td>
                            </tr>
                            <tr class="Row">
                                <td>
                                    Public Price:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtEditPublicPrice" runat="server" Text='<%# Bind("PublicPrice", "{0:f2}") %>' ValidationGroup="EditListing"></asp:TextBox>
                                     <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEditPublicPrice" Display="None" ErrorMessage="Please enter a valid decimal amount with no extra symbols." ValidationGroup="EditListing" ValidationExpression="[0-9]+(\.[0-9][0-9]?)?"></asp:RegularExpressionValidator>
                                    <asp:ValidatorCalloutExtender ID="RegularExpressionValidator1_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RegularExpressionValidator1">
                                    </asp:ValidatorCalloutExtender>
                                </td>
                            </tr>
                            <tr class="AltRow">
                                <td width="125px">
                                    Dealer Price:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtEditDealerPrice" runat="server" Text='<%# Bind("DealerPrice", "{0:f2}") %>' ValidationGroup="EditListing"></asp:TextBox>
                                     <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtEditDealerPrice" Display="None" ErrorMessage="Please enter a valid decimal amount with no extra symbols." ValidationGroup="EditListing" ValidationExpression="[0-9]+(\.[0-9][0-9]?)?"></asp:RegularExpressionValidator>
                                    <asp:ValidatorCalloutExtender ID="RegularExpressionValidator2_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RegularExpressionValidator2">
                                    </asp:ValidatorCalloutExtender>
                                </td>
                            </tr>
                            <tr class="Row">
                                <td>
                                    Show Listing:
                                </td>
                                <td>
                                    <asp:CheckBox ID="chkEditPublicListing" runat="server" Checked='<%# Bind("PublicListing") %>' ValidationGroup="EditListing" />
                                </td>
                            </tr>
                            <tr class="AltRow">
                                <td width="125px">
                                    Description:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtEditDescription" runat="server" Text='<%# Bind("Description") %>' Rows="5" TextMode="MultiLine" Width="400px" ValidationGroup="EditListing"></asp:TextBox>
                                </td>
                            </tr>
                            <tr class="Row">
                                <td colspan="2">
                                    <asp:LinkButton ID="btnSaveListingChanges" runat="server" CommandArgument='<%# Bind("ListingID") %>' CommandName="Update" CssClass="SaveLinkButton" ValidationGroup="EditNoteDate">Save Changes</asp:LinkButton> <asp:LinkButton ID="btnCancelEditClinicDate" runat="server" CausesValidation="false" CommandName="Cancel" CssClass="CancelLinkButton">Cancel</asp:LinkButton>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </asp:Panel>
            </FormTemplate>
            <PopUpSettings Modal="True" Width="650px"></PopUpSettings>
        </EditFormSettings>
        <Columns>
            <telerik:GridBoundColumn DataField="VehicleType" HeaderText="Vehicle Type" SortExpression="VehicleType" UniqueName="VehicleType">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="VehicleYear" HeaderText="Year" SortExpression="Year" UniqueName="VehicleYear">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Manufacturer" HeaderText="Manufacturer" SortExpression="Manufacturer" UniqueName="Manufacturer">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Model" HeaderText="Model" SortExpression="Model" UniqueName="Model">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="PublicPrice" DataType="System.Decimal" HeaderText="Public Price" SortExpression="PublicPrice" UniqueName="PublicPrice" DataFormatString="{0:c}">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="DealerPrice" DataType="System.Decimal" HeaderText="Dealer Price" SortExpression="DealerPrice" UniqueName="DealerPrice" DataFormatString="{0:c}">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="PublicListing" HeaderText="Listed?" UniqueName="PublicListing" DataFormatString="<img src='/images/system-icons/tf/{0}.png' />" ItemStyle-HorizontalAlign="Center">
                <ItemStyle HorizontalAlign="Center"></ItemStyle>
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="TemplateColumn">
                <ItemTemplate>
                    <asp:LinkButton ID="btnEditListing" runat="server" CausesValidation="false" CommandName="Edit" CssClass="EditLinkButton" Text="Edit"></asp:LinkButton>
                    <asp:HyperLink ID="lnkEditPhotos" CssClass="ImageLinkButton" NavigateUrl='<%# Eval("ListingID", "photos?lid={0}") %>' runat="server">Photos</asp:HyperLink>
                    <asp:HyperLink ID="lnkEditSpecs" CssClass="SpecLinkButton" NavigateUrl='<%# Eval("ListingID", "specs?lid={0}") %>' runat="server">Specs</asp:HyperLink>
                    <asp:LinkButton ID="btnRemoveListing" runat="server" CausesValidation="false" CommandArgument='<%# Eval("ListingID") %>' CommandName="Delete" CssClass="DeleteLinkButton" OnClientClick="javascript:return confirm('Are you sure you want to remove this this listing?');" Text="Remove"></asp:LinkButton>
                </ItemTemplate>
                <ItemStyle HorizontalAlign="Right" />
            </telerik:GridTemplateColumn>
        </Columns>
        <NoRecordsTemplate>
            You currently have no listings in the system.</NoRecordsTemplate>
    </MasterTableView><HeaderStyle CssClass="Header" />
    <ItemStyle CssClass="Row" />
</telerik:RadGrid>

<asp:SqlDataSource ID="sdsEditVehicleTypes" runat="server" ConnectionString="<%$ ConnectionStrings:SqlConnection %>" SelectCommand="SELECT * FROM [Vehicle Types] ORDER BY [VehicleType]"></asp:SqlDataSource>

<asp:SqlDataSource ID="sdsEditManufacturers" runat="server" ConnectionString="<%$ ConnectionStrings:SqlConnection %>" SelectCommand="SELECT * FROM [Manufacturers] WHERE ([VehicleTypeID] = @VehicleTypeID) ORDER BY [Manufacturer]">
    <SelectParameters>
        <asp:Parameter Name="VehicleTypeID" Type="Int32" />
    </SelectParameters>
</asp:SqlDataSource>

<asp:SqlDataSource ID="sdsEditModels" runat="server" ConnectionString="<%$ ConnectionStrings:SqlConnection %>" SelectCommand="SELECT * FROM [Models] WHERE ([Model] = @Model) ORDER BY [Model]">
    <SelectParameters>
        <asp:Parameter Name="Model" Type="String" />
    </SelectParameters>
</asp:SqlDataSource>

<asp:SqlDataSource ID="sdsVehicleListings" runat="server" ConnectionString="<%$ ConnectionStrings:SqlConnection %>" SelectCommand="SELECT * FROM [Detailed Vehicle Listings] WHERE ([DealerID] = @DealerID) AND ([Active] = 1) ORDER BY [DateTimeAdded]" DeleteCommand="UPDATE Listings SET Active = 0 WHERE (ListingID = @ListingID)" UpdateCommand="UPDATE Listings SET PublicListing = @PublicListing, VehicleTypeID = @VehicleTypeID, VehicleYear = @VehicleYear, ManufacturerID = @ManufacturerID, ModelID = @ModelID, Description = @Description, PublicPrice = @PublicPrice, DealerPrice = @DealerPrice WHERE ListingID = @ListingID">
    <DeleteParameters>
        <asp:Parameter Name="ListingID" Type="Int32" />
    </DeleteParameters>
    <SelectParameters>
        <asp:SessionParameter Name="DealerID" SessionField="DealerID" Type="Int32" />
    </SelectParameters>
    <UpdateParameters>
        <asp:Parameter Name="ListingID" Type="Int32" />
        <asp:Parameter Name="VehicleTypeID" Type="Int32" />
        <asp:Parameter Name="VehicleYear" Type="String" />
        <asp:Parameter Name="ManufacturerID" Type="Int32" />
        <asp:Parameter Name="ModelID" Type="Int32" />
        <asp:Parameter Name="Description" Type="String" />
        <asp:Parameter Name="PublicPrice" Type="Decimal" />
        <asp:Parameter Name="DealerPrice" Type="Decimal" />
        <asp:Parameter Name="PublicListing" Type="Boolean" />
    </UpdateParameters>
</asp:SqlDataSource>

Protected Sub radVehicleListingGrid_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles radVehicleListingGrid.ItemDataBound

        If (TypeOf e.Item Is GridEditableItem AndAlso e.Item.IsInEditMode) Then

            Dim item As GridEditableItem = e.Item

            'access/modify the edit item template settings here

            Dim ddlEditVehicleTypes As DropDownList = item.FindControl("DropDownList3")

            Dim ddlEditManufacturers As DropDownList = item.FindControl("DropDownList2")

            Dim ddlEditModels As DropDownList = item.FindControl("DropDownList1")

 

            sdsEditManufacturers.SelectParameters("VehicleTypeID").DefaultValue = ddlEditVehicleTypes.SelectedValue

            sdsEditModels.SelectParameters("ManufacturerID").DefaultValue = ddlEditManufacturers.SelectedValue

 

            sdsEditManufacturers.DataBind()

            sdsEditModels.DataBind()

 

          

        ElseIf (TypeOf e.Item Is GridDataItem AndAlso Not e.Item.IsInEditMode AndAlso Page.IsPostBack) Then

           

        End If

    End Sub

Any suggestions at all?

[Ariel]

Bumping this up.

Am I missing something completely obvious or is it really that no one knows of a solution for this?

[Kostadin]

Hi Ariel,

In your code you have to specify the DataSource and after that you have to rebind. I attached a small sample where I used two RadComboBoxes which interact with each other based on OnSelectedIndexChanged event.
I hope this helps.

Kind regards,
Kostadin
the Telerik team

[Ariel]

Hey Kostadin,

Thanks so much for the sample code! That really helped me fix the issue with the cascading drop down lists. However; now, when I click the Update button on the form, it doesn't seem to be updating. I'm assuming it's because the controls aren't actually being databound within the edit form. I've tried changing the values of the update parameters at the end of the RadGriveView's ItemDataBound event, but it makes no difference.

Any more insight? You've been very helpful so far!

[Ariel]

I've figured it out!!

So I'm still not sure why it is that making the drop downs turn into cascading drop downs makes a difference, but I had to turn on AutoPostBack on all of the DDL's. Then, I have the following code on each DDL_SelectedIndexChanged:

Protected Sub EditModel_SelectedIndexChange(sender As Object, e As System.EventArgs)
    Dim ddlEditModel As DropDownList = CType(sender, DropDownList)
    ViewState("EditModel") = ddlEditModel.SelectedValue
End Sub

Finally, I added this logic to the SqlDataSource_Updating:

Protected Sub sdsVehicleListings_Updating(sender As Object, e As System.Web.UI.WebControls.SqlDataSourceCommandEventArgs) Handles sdsVehicleListings.Updating
    e.Command.Parameters("@VehicleTypeID").Value = ViewState("EditVehicleType")
    e.Command.Parameters("@ManufacturerID").Value = ViewState("EditManufacturer")
    e.Command.Parameters("@ModelID").Value = ViewState("EditModel")
End Sub

With that, the RadGridView is properly updating!

Thanks again for your help, Kostadin!

[Kostadin]

Hello Ariel,

This is expected behavior because in the example we do not use Bind so the grid cannot pass a value to the Update method of the datasource by itself. That is why you should find the selected value of the RadComboBoxes and pass it to the datasource. For this purpose you could also handle UpadeCommand event.

Please check the modified project attached to this forum post to see how to do this.

Greetings,
Kostadin
the Telerik team