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

DropDownList serverFiltering and initial value

2 Answers 154 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Sylvain
Top achievements
Rank 1
Sylvain asked on 29 Jul 2015, 09:27 PM

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 Answers, 1 is accepted

Sort by
0
Sylvain
Top achievements
Rank 1
answered on 30 Jul 2015, 03:08 AM

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 

 

0
Alexander Valchev
Telerik team
answered on 03 Aug 2015, 08:36 AM
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!
 
Tags
DropDownList
Asked by
Sylvain
Top achievements
Rank 1
Answers by
Sylvain
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or