Dropdownlist 2 updates list based on Dropdownlist 1 selection

[Matt]

Hi

Is there a way to change the items in a dropdownlist (Category) based on a selection from another dropdownlist (Category Value)?

Thanks,

[Matt]

I'm making progress on this but...Both Dropdown list initially populate.  The first dropdown calls the following code:

function catDropChange(e) {
    var dataItem = this.dataItem(e.item.index());
    alert(dataItem.CategoryID);

    $.getJSON("Category/CategoryValues?id=" + dataItem.CategoryID, function (data) {
        $("#catValueDropDown").data("tDropDownList").data(data);
    });

}

I get the alert and my controller Category and Action CategoryValues is called with the correct id.  I return the json.  I see the data that is returned in fiddler.
However the second dropdown catValueDropDown is NOT being populated.

Here's the grid code:

<script id="templateCat" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<HtramProjectCategoryResults>()
            .Name("grid_#=SubDivisionID#")
            .Columns(columns =>
            {
                columns.Bound(pcr => pcr.MilePostFrom);
                columns.Bound(pcr => pcr.MilePostTo);
                columns.ForeignKey(pcr => pcr.CategoryID, (System.Collections.IEnumerable)ViewData["categories"],
                    "CategoryID", "Name").EditorTemplateName("CategoriesDropDownList").Width(250);
                columns.ForeignKey(pcr => pcr.CategoryValueID, (System.Collections.IEnumerable)ViewData["categoryValues"],
                    "CategoryValueID", "Name").EditorTemplateName("CategoryValueDropDownList").Width(250);
                columns.Bound(pcr => pcr.CategoryWeight).Title("Weight");
                columns.Bound(pcr => pcr.VulnerabilityValue);
                columns.Bound(pcr => pcr.Comment);
                columns.Bound(pcr => pcr.Reference);
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
            })
            .ToolBar(toolBar => toolBar.Create())
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .DataSource(
                dataSource => dataSource.Ajax()
                .PageSize(20)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(pcr => pcr.ProjectsCategoryResultsID);
                    model.Field(pcr => pcr.ProjectsCategoryResultsID).Editable(false);
                    model.Field(pcr => pcr.CategoryWeight).Editable(false);
                    model.Field(pcr => pcr.VulnerabilityValue).Editable(false);
                })
                .Read(read => read.Action("CategoryResultsRead", "Category", new { projectID = Model.ProjectID, subDivisionID = "#=SubDivisionID#" }))
                .Create(create => create.Action("CategoryResultsCreate", "Category"))
                .Update(update => update.Action("CategoryResultsUpdate", "Category"))
                .Destroy(destroy => destroy.Action("CategoryResultsDestroy", "Category"))
            )
            .Sortable()
            .Scrollable()
            .ToClientTemplate()
    )
</script>

Here's the dropdownlistfor code:

@model int?

@(
Html.Kendo().DropDownListFor(m => m)
    .Name("catValueDropDown")
    .DataValueField("CategoryValueID") // The value of the dropdown is taken from the EmployeeID property
    .DataTextField("Name") // The text of the items is taken from the EmployeeName property
    .BindTo((System.Collections.IEnumerable)ViewData["categoryValues"]) // A list of all employees which is populated in the controller
)

I'm not sure why the json is not binding.  Help please....

[Matt]

I noticed that my script had .data(data) instead of .databind(data).  I made the change but the dropdown is still not updating.
Updated code...

function catDropChange(e) {
    var dataItem = this.dataItem(e.item.index());
    alert(dataItem.CategoryID);

    $.getJSON("Category/CategoryValues?id=" + dataItem.CategoryID, function (data) {
        $("#catValueDropDown").data("tDropDownList").dataBind(data);
    });
}

[Daniel]

Hello,

You should set the data to the dropdownlist dataSource with the dataSource.data method. The prefix to the data key should also be changed to "kendo":

$.getJSON("Category/CategoryValues?id=" + dataItem.CategoryID, function (data) {
    $("#catValueDropDown").data("kendoDropDownList").dataSource.data(data);
});

For this scenario, you could also use the built-in cascading as demonstrated in this code library. Regards,
Daniel
Telerik

[Matt]

Thanks for this example.  I didn't see this one. 

I noticed that this example displays the ID number after the row is updated or committed.  How do you show the text?

[Matt]

I got this using columns.ForeignKey

Thanks

[Abhimanyu]

Hey matt,plz give me solution.how you can do this using  Foreign  key?

plz,I have same problem...

[Konstantin Dikov]

Hello Abhimanyu,

You could refer to the code from the mentioned Code Library and use the ForeignKey column from the answer in the following forum thread:

• http://www.telerik.com/forums/asp-net-mvc---kendo-grid-with-cascading-dropdown-list---need-dropdown-text#s6r6TxzznUCvEzMlvDiqNw

Hope this helps.


Regards,
Konstantin Dikov
Telerik