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

Cascading DropDownList with JSON

3 Answers 207 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Terence
Top achievements
Rank 1
Terence asked on 23 Jul 2015, 07:29 AM

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!

 

 

3 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 27 Jul 2015, 07:14 AM
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?
Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Terence
Top achievements
Rank 1
answered on 27 Jul 2015, 08:03 AM

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.

 

0
Georgi Krustev
Telerik team
answered on 29 Jul 2015, 07:13 AM
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: 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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
DropDownList
Asked by
Terence
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Terence
Top achievements
Rank 1
Share this question
or