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

[Dirk]

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

[Georgi Krustev]

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