Dropdownlist 2 updates list based on Dropdownlist 1 selection

8 posts, 0 answers
  1. Matt
    Matt avatar
    14 posts
    Member since:
    Oct 2013

    Posted 28 Oct 2013 Link to this post

    Hi

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

    Thanks,
  2. Matt
    Matt avatar
    14 posts
    Member since:
    Oct 2013

    Posted 29 Oct 2013 Link to this post

    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....




  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Matt
    Matt avatar
    14 posts
    Member since:
    Oct 2013

    Posted 29 Oct 2013 Link to this post

    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);
        });
    }

  5. Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 30 Oct 2013 Link to this post

    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!
  6. Matt
    Matt avatar
    14 posts
    Member since:
    Oct 2013

    Posted 30 Oct 2013 Link to this post

    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?
  7. Matt
    Matt avatar
    14 posts
    Member since:
    Oct 2013

    Posted 30 Oct 2013 Link to this post

    I got this using columns.ForeignKey

    Thanks
  8. Abhimanyu
    Abhimanyu avatar
    1 posts
    Member since:
    May 2016

    Posted 01 Jun Link to this post

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

    plz,I have same problem...

  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 03 Jun Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready