Kendo Autocomplete cascading dropdown issue (kendoui.complete.2012.2.913_commercial version)

3 posts, 0 answers
  1. Sanat
    Sanat avatar
    5 posts
    Member since:
    Nov 2012

    Posted 12 Nov 2012 Link to this post

    Cascading dropdowns are not autopopulated on selecting an Autocomplete value. We have to click on the cascading dropdown arrow(then only it hits controller{Spring mvc controller}).

    On value change of autocomplete, cascading dropdown values are not getting changed, as the required controller is not getting hit
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 Nov 2012 Link to this post

    Hi Sanat,

    I am afraid that your scenario is a bit unclear. Could you please explain what is the connection between the AutoComplete widget and the cascading DropDownLists?

    I would like to remind you that the public forums are resource community and although we monitor them the reply is not guaranteed. If you have account with commercial licence ownership and need a technical assistance please open separate support tickets for the issues you experienced. We will appreciate if you also attach sample project/code snippets that demonstrates your current implementation. In this way the staff will be able to understand your specific case and provide you with answers faster.

    Thank you for the understanding. Please see Support Options for more details.

    Regards,
    Alexander Valchev
    the Telerik team
    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. Sanat
    Sanat avatar
    5 posts
    Member since:
    Nov 2012

    Posted 14 Nov 2012 Link to this post

    Hi

     

    We need the values in the Dropdown(more than 1) to be populated based on the value of the Autocomplete.

    Code:

    <c:url var="acNum" value="/Controller/acNum" />

    //AutoComplete

    $("#accNoMF").kendoAutoComplete({

                      dataSource : new kendo.data.DataSource({

                            transport : {

                                  read : "${acNum}",

                                  dataType : 'json'

                            },

                            serverFiltering : true,

                            serverPaging : false

                      }),

                      dataTextField : "Text",

                      dataValueField : "Value",

                      filter : "startswith",

                      placeholder : "Account Number..."

    });

    //Dropdowns to be populated on selecting a Autocomplete component

    $("#bankNameMF").kendoDropDownList({

                      dataSource : new kendo.data.DataSource({

                            transport : {

                                  read : "${bankName}",

                                  dataType : 'json',

                                  parameterMap : function(options, operation) {

                                        return {

                                              CategoryID : $("#accNoMF").val()

                                        };

                                  }

                            },

                            serverFiltering : true,

                            serverPaging : false

                      }),

                      optionLabel : "Select",

                      dataTextField : "Text",

                      dataValueField : "Value",

                      cascadeFrom : "accNoMF",

                      autoBind : false

    });

    //Controller

    //Code for AccountNumber

    @RequestMapping(method = { RequestMethod.GET }, value = "/acNum")

          public @ResponseBody

    List<Map<String, String>> getJSONForUser() {

                List<Map<String, String>> rdArray = new ArrayList<Map<String, String>>();

                List<String> listOfData = “”;//Data Fetched from DataBAse

                Map<String, String> function = null;

                for (String type : listOfData) {

                      function = new HashMap<String, String>();

                      function.put("Text", type);//Text and value is same in this case but will vary

                      function.put("Value", type);

                      rdArray.add(function);

                }

                return rdArray;

    }

    //Code for Bank Name

    @RequestMapping(method = { RequestMethod.GET }, value = "/bankName")

          public @ResponseBody

          List<Map<String, String>> bankName(@RequestParam Map<String, String> Id) {

                Map<Integer, String> bankName = new HashMap<Integer, String>();

                Map<String, String> function = null;

                List<Map<String, String>> bankMap = new ArrayList<Map<String, String>>();

                for (Map.Entry<String, String> entry : Id.entrySet()) {

                      try {                              

    bankName = “”;//Data From DB                   

                            for (Map.Entry<Integer, String> map : bankName.entrySet()) {

                                  function = new HashMap<String, String>();

                                  function.put("Text", map.getValue());

                                  function.put("Value", map.getKey().toString());

                                  bankMap.add(function);

                            }

                      } catch (Exception e) {

                      }

                }

                return bankMap;

    }

    ISSUES

    1>     After selecting a value from Autocomplete, the dropdowns are not populated.

    The Controller is called only after clicking on the dropdown.

    2>     If we change the value of the Autocomplete, The controller is not called again(we have to fetch corr data From DB based on value)

     

    Note: The code is implemented in a PopUp

    Please see the attached ScreenShots.

Back to Top