DropDownList serverFiltering and initial value

3 posts, 0 answers
  1. Sylvain
    Sylvain avatar
    24 posts
    Member since:
    Feb 2011

    Posted 29 Jul 2015 Link to this post

    I have DropDownList with a remote data source and serverFiltering. 

    <input ref="combo3"
      data-role="dropdownlist"
      data-value-primitive="true"
      data-text-field="name"
      data-value-field="id"
      data-filter= "contains"
      data-bind="value: combo3Value, source: combo3Source"/>
     

    My data source is like this (ES6 code)

     

    combo3Source = new kendo.data.DataSource({
            serverFiltering: true,
            transport : {
     
              read : (e)=>{
     
                let url = "";
                if ( e.data.filter && e.data.filter.filters.length === 1){
                  url = `/CI/search?text=${e.data.filter.filters[0].value}`;
                  this.httpClient.get(url).then((response)=>{
                    e.success(response.content);
                  });
                }
                else {
                  e.success([]);
                }
              }
            }
          });

     

    As you can see in the code, my idea ​is to only fetch data if a filter is provided and return and empty result if no filter is ​provided. This approach works well but there is one edge case​: If I load my form and the bound MVVM property already has a value then the DropDownList doesn't not know what text to display for the selected value. I expected that it would call the datasouce with a filter ​like "where id = 1829" but does not.

    How am I supposed to provide the initial value?

     Thanks

    Sylvain

     

     

     

  2. Sylvain
    Sylvain avatar
    24 posts
    Member since:
    Feb 2011

    Posted 29 Jul 2015 in reply to Sylvain Link to this post

    I have updated my code to fetch the data for the selected value

    01.read : (e)=>{
    02. 
    03.  let url = "";
    04.  if ( e.data.filter && e.data.filter.filters.length === 1){
    05.    url = `/CI/search?text=${e.data.filter.filters[0].value}`;
    06.    this.httpClient.get(url).then((response)=>{
    07.      e.success(response.content);
    08.    });
    09.  }
    10.  else {
    11.    if (!this.selectedValue){
    12.      e.success([]);
    13.    }
    14. 
    15.    url = `/CI/info/${this.selectedValue}`;
    16.    this.httpClient.get(url).then((response)=>{
    17.      e.success([response.content]);
    18.    });
    19.  }
    20.}
     

    As you can see near line 15, I now make sure to fetch the record that matches the current value. However the DropDownList displayed text remains blank. If I open the drop down, I see the single item.

    Please help

    Thanks 

     

  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 03 Aug 2015 Link to this post

    Hello Sylvain,

    First of all let me apologize for the late reply.

    I created a short example with server filtering and pre-set value:
    • http://dojo.telerik.com/UXUJi

    On my side the selected data item text is displayed as soon as the data is retrieved from the server.
    The list contains only one item because only this item matches the filter criteria.

    I am not sure why in your case the selected text is not displayed. Please check the above example and determine the differences in the configuration.

    If this does not help I would like to ask you to provide a small but runnable example with mock data that isolates the issue so I can check what exactly goes wrong.


    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top