cascading dropdownlist as bound column on telerik grid - telerik

Question

I am not sure if anyone has ever come across an issue like this.
In my ASP.NET MVC application, I have a Telerik Grid control, which has the first 2 columns as dropdownlists. I have the editor template for each of these columns as telerik dropdownlists. These dropdownlists are in user control (.ascx) files. The code for the ascx files is below:
User Control 1:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%=Html.Telerik().DropDownListFor(m => m)
.BindTo(new SelectList((IEnumerable)ViewData["AccountTypeSelectList"], "lookUpCode", "description"))
%>
User Control 2:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%=Html.Telerik().DropDownListFor(m => m)
.BindTo(new SelectList((IEnumerable)ViewData["CreditAgenciesSelectList"], "description", "description"))
%>
The following is the code for my View where the Grid bound columns are:
#(Html.Telerik().Grid<DealerOfferBaseKPI>()
.Name("T_KPI_CA")
.DataKeys(key => key.Add(o => o.DealerOfferRuleDetailId))
.ToolBar(commands =>
{
commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" });
})
.Columns(columns =>
{
columns.Bound(o => o.AccountType).Title("Account Type").ClientTemplate("<#= AccountType #>").EditorTemplateName("AccountType");
columns.Bound(o => o.CreditAgency).Title("Credit Agency").ClientTemplate("<#= CreditAgency #>").EditorTemplateName("CreditAgency");
columns.Bound(o => o.PercentageAllowed).Title("Percentage Allowed");
columns.Bound(o => o.EffectiveDate).Title("Effective Date").EditorTemplateName("Date").Format("{0:MM/dd/yyyy}");
columns.Bound(o => o.ExpireDate).Title("Expire Date").EditorTemplateName("Date").Format("{0:MM/dd/yyyy}");
columns.Command(commands =>
{
commands.Delete().ButtonType(GridButtonType.BareImage);
}).Title("Actions");
})
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_SelectKPIBatchEditing", "DealerOfferManagement", new { filterType = "KPIcreditAgency" }).Enabled(true)
.Update("_SaveKPIBatchEditing", "DealerOfferManagement").Enabled(true);
})
.ClientEvents(ce => ce.OnSave("GridValidation"))
.Selectable()
.Scrollable()
.Pageable()
.Sortable()
)
I am trying to make these 2 dropdownlists as cascading. The values of the first dropdown are Residential, Commercial and Both. The values in the second dropdown are Equifax, Experian, TransUnion and Intelliscore. When I select residential in the first dropdown I want the second dropdown to show everything but not Intelliscore. For all other values of the first dropdown, I want all values of the second dropdown to show.
I am passing in the values of the 2 dropdowns by using 2 ViewData objects from my controller.
With the code shown, the values in the selectlist are displayed in the dropdowns just fine.
Any help is appreciated.

Answer 1

On the change clientevent of the first dropdown user javascript to add or remove element as explained here