Cascading DropDownList with JSON

4 posts, 0 answers
  1. Terence
    Terence avatar
    10 posts
    Member since:
    Feb 2015

    Posted 23 Jul 2015 Link to this post

    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!

     

     

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 27 Jul 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Terence
    Terence avatar
    10 posts
    Member since:
    Feb 2015

    Posted 27 Jul 2015 in reply to Georgi Krustev Link to this post

    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.

     

  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 29 Jul 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready