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

Filtering on multiple values

2 Answers 684 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
newKendoUser
Top achievements
Rank 1
newKendoUser asked on 16 Feb 2018, 03:17 PM

Hi,

 

Following the example from: https://docs.telerik.com/kendo-ui/knowledge-base/dropdownlist-filter-multiple-properties, I have implemented custom filtering on my kendo drop down list as follows:

 

$("#options").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
noDataTemplate: $("#noDataTemplate").html(),
filter: "contains",
dataSource: {
type: "odata-v4",
transport: {
read: function (options) {
$.ajax({
url: optionsURL,
dataType: "json",
success: function (result) {
options.success(result);
 },
error: function (result) {
console.log(result);
}
});
}
},
},
filtering: function (ev) {
var filterValue = ev.filter.value;
ev.preventDefault();
this.dataSource.filter({
logic: "or",
filters: [
{
field: "name",
operator: "contains",
value: filterValue
},
{
field: "address",
operator: "contains",
value: filterValue
},
{
field: "id",
operator: "contains",
value: filterValue
}
]
});
} });

 

I also have code implemented which allows the user to add a new item to the dropdown if it doesn't exist, using the no data Template. Here I perform a remote call to add the item server side and then I execute the following lines of code to refresh the drop down:

var dropdown = $("#options").data("kendoDropDownList");
dropdown.dataSource.read();

 

If the user has added a new item I want to set the selected value of the dropdown to the newly added item. To achieve this I have set a global flag 'addNew' = tru once the remote call which adds the new item has been successful. I also store, in a global variable, the id of the item just added. I have then plugged into the 'success' method of the datasource on the drop down and added the following lines:

 

if (addNew) {
var dropdown = $("#options").data("kendoDropDownList");
dropdown.value(newId);
}

 

However, when  executing my code crashed out at this line on the 'filtering' option: "var filterValue = ev.filter.value" because inb fact ev.filter is 'undefined'.

 

If I remove my custom filtering the dynamic select works perfectly and vice versa. Can the two exist together?

 

Many thanks

2 Answers, 1 is accepted

Sort by
0
Accepted
Neli
Telerik team
answered on 20 Feb 2018, 08:53 AM
Hi Martina,

A suggestion is to use conditional statement for the filterValue. For example, you could assign a value to 'filterValue' only if ev.filter is not undefined. Otherwise, you could set it to an empty string. 
var filterValue = ev.filter != undefined ? ev.filter.value : ''

Regards,
Neli
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
newKendoUser
Top achievements
Rank 1
answered on 20 Feb 2018, 09:06 AM

Hi Neli,

This works a treat thanks so much!

Tags
DropDownList
Asked by
newKendoUser
Top achievements
Rank 1
Answers by
Neli
Telerik team
newKendoUser
Top achievements
Rank 1
Share this question
or