Providing custom filter function using TagHelpers

2 posts, 0 answers
  1. Tomasz
    Tomasz avatar
    14 posts
    Member since:
    May 2017

    Posted 13 Aug 2018 Link to this post

    Hi,

    I am using TagHelpers to create multiselects in my form. I need to provide custom filtering function to filter my data by two fileds e.g FirstName and LastName (contains FirstName OR contains LastName). How can I do that?

     

  2. Nencho
    Admin
    Nencho avatar
    1849 posts

    Posted 15 Aug 2018 Link to this post

    Hello Tomasz,

    If you are using server filtering (along with read method of the datasource), you should apply the needed logic at server-side. In the action, you can control the dataset, that needs to be returned.

    On the other hand, if you use the client filtering - you can subscribe for the filtering event of the widget and modify the result set at each filtering. For example, please consider the below implementation:

        <kendo-multiselect name="orders" style="width:100%"
                           placeholder="Select addresses..."
                           datatextfield="ShipName"
                           datavaluefield="OrderID"
                           on-filtering="onFiltering"
    .....
    </kendo-multiselect>
    <script>
       function onFiltering(e) {
            var inputValue = e.sender.input.val();
             
            e.preventDefault(); //prevents the default execution of the event
            if (inputValue) {
                e.sender.dataSource.filter({
                    logic: "or",
                    filters: [
                        { field: "ShipName", operator: "contains", value: inputValue }, // add the filter against the 1st field
                        { field: "OrderID", operator: "eq", value: inputValue },// add the filter against the 2nd field
                    ]
                });
            }
            else {
                this.dataSource.filter([]); // clear filtering if all charachters are deleted
            }
        }
    </script>


    Regards,
    Nencho
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top