Cascading dropdown list with local JSON data: how to filter dataSource?

2 posts, 0 answers
  1. Dirk
    Dirk avatar
    5 posts
    Member since:
    May 2015

    Posted 18 Nov 2015 Link to this post

    I am using JSON as local data for 3 cascading dropdownlists – the JSON is hierarchical by group->category->subcategory. The JSON looks like this (neat and hierarchical):

    01.{
    02.  "Groups": [
    03.    {
    04.      "Group": "Grp 1",
    05.      "Categories": [
    06.        {
    07.          "Category": "Cat 1",
    08.          "Subcategories": [
    09.            { "Subcategory": "Subcat 1" },
    10.            { "Subcategory": "Subcat 2" }
    11.          ]
    12.        },
    13.        {
    14.          "Category": "Cat 2",
    15.          "Subcategories": [
    16.            { "Subcategory": "Subcat 3" },
    17.            { "Subcategory": "Subcat 4" }
    18.          ]
    19.        }
    20.      ]
    21.    },
    22.    {
    23.      "Group": "Grp 2",
    24.      "Categories": [
    25.        {
    26.          "Category": "Cat 3",
    27.          "Subcategories": [
    28.            { "Subcategory": "Subcat 5" },
    29.            { "Subcategory": "Subcat 6" }
    30.          ]
    31.        },
    32.        {
    33.          "Category": "Cat 4",
    34.          "Subcategories": [
    35.            { "Subcategory": "Subcat 7" },
    36.            { "Subcategory": "Subcat 8" }
    37.          ]
    38.        }
    39.      ]
    40.    }
    41.  ]
    42.}

    I’m struggling with filtering the dataSource so that the cascading dropdowns filter the data appropriately.

    I create the dataSource (data is the JSON:

    1.var dataSource = new kendo.data.DataSource({
    2.    data: data.Groups
    3.  });
    4.dataSource.read();

    Then I attempt to cascade the dropdowns. I populate the group dropdown correctly, but just don’t see how to filter the category and subcategory dropdowns based on the dropDown that’s being cascaded from. I'm such a newb.

    01.var groups = $("#groups").kendoDropDownList({
    02.    optionLabel: "Select group...",
    03.    dataTextField: "Group",
    04.    dataValueField: "Group",
    05.    dataSource: dataSource
    06.}).data("kendoDropDownList");
    07. 
    08.var categories = $("#categories").kendoDropDownList({
    09.    cascadeFrom: "groups",
    10.    optionLabel: "Select category...",
    11.    dataTextField: "Category",
    12.    dataValueField: "Category",
    13.    dataSource: dataSource  // HOW DO I FILTER THE DATASOURCE FOR CATEGORY OF GROUP?
    14.}).data("kendoDropDownList");
    15. 
    16.var subcategories = $("#subcategories").kendoDropDownList({
    17.    cascadeFrom: "categories",
    18.    optionLabel: "Select subcategory...",
    19.    dataTextField: "Subcategory",
    20.    dataValueField: "Subcategory",
    21.    dataSource: dataSource  // HOW DO I FILTER THE DATASOURCEFOR SUBCATEGORY OF CATEGORY?
    22.}).data("kendoDropDownList");

    Here’s hoping you can help a jquery/kendoui newb!  TIA

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 23 Nov 2015 Link to this post

    Hello Dirk,

    The built-in cascading functionality of the widget is designed to filter its source based on the parent value. This means that the datasources of the child and parent widgets are separate. Also the data in the source is expected to be flat, because it represents only the particular level that the widget refers to.

    Since, you already have the hierarchy represented in the JSON, then you can just bind the first widget to the Groups datasource. On change, you can get the related Categories and bind the second level widget. The third level will be bound from the second level datasource. Please note that in this case, you will implement the cascading functionality manually and will not use the built-in feature at all.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top