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