How can I save a filtered list after I select an item and reopen combobox?

[Vladimir]

For a description of the problem, I'll give an example https://demos.telerik.com/kendo-ui/combobox/serverfiltering
I type in the text string 'que', I get a drop-down list of 2 elements. I choose one of them. After that, I click on the opening icon. I expect to see a list of two elements (as it worked in previous versions), but instead I get the full list. What do I need to do so that when I open the ComboBox I can see the already filtered list? I do not need the filtering mechanism to start again?

[Veselin Tsvetanov]

Hello Vladimir,

We have introduced the discussed clear of the ComboBox filter on item selected as the filtered result does not correspond to the value in the widget input. The design decision in this case was to display all the available items instead of displaying only one (the selected) item.

In order to achieve the same behaviour as in previous Kendo versions, you could implement a handler for the DataSource read function. Here is how that should be implemented for the scenario in question:

data: function(e) {
  if (e.filter.filters.length === 0 || !e.filter.filters[0].value) {
    e.filter.filters.push({
     value: text,
      field: "ProductName",
      operator: "contains",
      ignoreCase: true
    });
  } else {
    text = e.filter.filters[0].value;
  }
}

Here you will find a small sample implementing the above suggestion.

Regards,
Veselin Tsvetanov
Progress Telerik

[Vladimir]

Thanks. It works.


But you should agree that it is very inconvenient to insert this cumbersome code every time combobox is initialized, and to use the external variable 'text', which must be unique for each object.


I hope that in the next versions you will provide one configuration field that will determine the use of filtering.

[Vladimir]

One more question.

What if there is an external initialization of dataSource?

var resource = "/source/pg.php?typeRequest=getBuyerContract" + strParams;
dataSource = new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read:{
            dataType: "jsonp",
            url: resource,
        }
    }
});
cmbBuyerContract.setDataSource(dataSource);

 

I can't use

var resource = "/source/pg.php?typeRequest=getBuyerContract" + strParams;
dataSource = new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read:{
            dataType: "jsonp",
            url: resource,
            data: function(e) {
                if (e.filter.filters.length === 0 || !e.filter.filters[0].value) {
                    e.filter.filters.push({
                        value: Text,
                        field: "Name",
                        operator: "startswith",
                    });
                } else {
                    Text = e.filter.filters[0].value;
                }
            }
        }
    }
});
cmbBuyerContract.setDataSource(dataSource);

 

because I get an error "TypeError: e.filter is undefined"

What to do?

 

[Vladimir]

Found the answer myself the improvement of the proposed crutch

var resource = "/source/pg.php?typeRequest=getBuyerContract" + strParams;
dataSource = new kendo.data.DataSource({
    serverFiltering: true,
    transport: {
        read:{
            dataType: "jsonp",
            url: resource,
            data: function(e) {
if (e.filter != undefined) {
                if (e.filter.filters.length === 0 || !e.filter.filters[0].value) {
                    e.filter.filters.push({
                        value: Text,
                        field: "Name",
                        operator: "startswith",
                    });
                } else {
                    Text = e.filter.filters[0].value;
                }
}
            }
        }
    }
});
cmbBuyerContract.setDataSource(dataSource);

[Veselin Tsvetanov]

Hi Vladimir,

Thank you for the improved implementation using the additional check.

Concerning the filter clearing, you are right that having a property which configures that behaviour would be a proper improvement of the widget. That is why we have created the following enhancement item in our public Kendo UI repo. Feel free to share there the approach that you find useful for that scenario.

Regards,
Veselin Tsvetanov
Progress Telerik