Cascading DropDownList with JSON

[Terence]

I've tried to write a Cascading DropDownList with JSON data source but it failed. Here is the code:

 

<script>
    $(document).ready(function() {

        $("#p_year").kendoDropDownList({
            optionLabel: "Select Tax Year...",
            dataTextField: "YEARNAME",
            dataValueField: "YEARID",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: "pykirxb_payr_ln.p_json_read_year"
                }
            }
        });


        var data = [
            { text: "IR56E", REPORTID: "IR56E" },
            { text: "IR56F", REPORTID: "IR56F" },
            { text: "IR56G", REPORTID: "IR56G" }
        ];

        // create DropDownList from input HTML element
        $("#p_report_type").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "REPORTID",
            dataSource: data,
            index: 0
        });


        $("#p_sel_population").kendoDropDownList({
            cascadeFrom: "p_report_type",
            optionLabel: "Select Population...",
            dataTextField: "POPNAME",
            dataValueField: "POPID",
            dataSource: {
                serverFiltering: true,
                transport: {
                    read: "pykirxb_payr_ln.p_json_read_pop"
                }
            }
        });

    });
</script>




</div>
​

 

There are 3 DropDownList. DropDownList p_year and p_sel_population is using JSON. DropDownList p_report_type is using static value. 

Attached please find the p_year.json result file (i.e. pykirxb_payr_ln.p_json_read_year ) and p_sel_population.json result file (i.e. pykirxb_payr_ln.p_json_read_pop). I have validated the JSON content and they are correct.

 

Now. DropDownList P_YEAR and P_REPORT_TYPE work properly. However, the Cascading DropDownList P_SEL_POPULATION does not work. I guess it cannot retrieve the corresponding JSON content.

 

Any idea to solve it?

 

Thanks!

 

 

[Georgi Krustev]

Hello Terence,

I tried to replicate the reported issue using the given code snippets, but to no avail. Could you review the test demo and if possible modify it in order to demonstrate the issue?

• http://dojo.telerik.com/AfoPU

Regards,
Georgi Krustev
Telerik

 

 

[Terence]

I have changed the var population  to

    var population = [{"POPID":"IR56G_2015_0701","POPNAME":"{22-JUL-15} IR56G_2015_0701 (3)","REPORTID":"IR56G"},{"POPID":"IR56F_2015_0701","POPNAME":"{22-JUL-15} IR56F_2015_0701 (3)","REPORTID":"IR56F"}];​

Please see the example in 

http://dojo.telerik.com/AfoPU/2

 

I added REPORTID in the json value as I think it serves as a Key to link p_report_type and p_sel_population DropDownList.

The preferred result is

When a user clicks IR56F (in p_report_type), the DropDownList (p_sel_population) will change to show "{22-JUL-15} IR56F_2015_0701 (3)". 

When a user clicks IR56G, the DropDownList (p_sel_population) will change to show "{22-JUL-15} IR56G_2015_0701 (3)"

 

Please advise.

 

[Georgi Krustev]

Hello Terence,

The widget will not filter the source, because it is explicitly configured to leave that task to the server. The serverFiltering option should be set to false in order to enable client filtration. Check the updated demo:

• http://dojo.telerik.com/AfoPU/3

Please note that in this case, you will need to all available data for the child dropdownlist, because when serverFiltering is set to false, the widget will perform only one request to the server.

Regards,
Georgi Krustev
Telerik