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

Dropdownlist 2 updates list based on Dropdownlist 1 selection

7 Answers 1035 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 28 Oct 2013, 08:08 PM
Hi

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

Thanks,

7 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 1
answered on 29 Oct 2013, 03:07 PM
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....




0
Matt
Top achievements
Rank 1
answered on 29 Oct 2013, 03:17 PM
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);
    });
}

0
Daniel
Telerik team
answered on 30 Oct 2013, 01:24 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 30 Oct 2013, 01:42 PM
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?
0
Matt
Top achievements
Rank 1
answered on 30 Oct 2013, 06:41 PM
I got this using columns.ForeignKey

Thanks
0
Abhimanyu
Top achievements
Rank 1
answered on 01 Jun 2016, 07:33 AM

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

plz,I have same problem...

0
Konstantin Dikov
Telerik team
answered on 03 Jun 2016, 07:25 AM
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:
Hope this helps.


Regards,
Konstantin Dikov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Matt
Top achievements
Rank 1
Daniel
Telerik team
Abhimanyu
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or