Filtering on multiple values

3 posts, 1 answers
  1. newKendoUser
    newKendoUser avatar
    10 posts
    Member since:
    Oct 2017

    Posted 16 Feb Link to this post

    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. Answer
    Neli
    Admin
    Neli avatar
    157 posts

    Posted 20 Feb Link to this post

    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.
  3. newKendoUser
    newKendoUser avatar
    10 posts
    Member since:
    Oct 2017

    Posted 20 Feb in reply to Neli Link to this post

    Hi Neli,

    This works a treat thanks so much!

Back to Top