This is a migrated thread and some comments may be shown as answers.

Cascading DropDownList's in RadGridView EditForm

5 Answers 265 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Ariel asked on 11 Sep 2012, 08:08 PM

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?

5 Answers, 1 is accepted

Accepted

answered on 14 Sep 2012, 11:24 AM

RadGridWithComboBox.zip

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 17 Sep 2012, 02:59 PM

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!

answered on 17 Sep 2012, 03:38 PM

RadGridWithComboBox.zip

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