How to define a custom filter operator

7 posts, 1 answers
  1. Answer
    ICT
    ICT avatar
    17 posts
    Member since:
    May 2013

    Posted 15 May 2013 Link to this post

    I started to write my first app with Kendo UI. Most of the work will be done on the Kendo Grid by filtering, sorting and manipulating values.

    The grid itself seems to be pretty powerful and suits my needs quite well. However, it looks like I am not able to fulfill all my filtering needs using the regular built-in filtering functions.

    For instance: I need to be able to filter all the items from a column having some special characters in them. Special characters are input by the user via k-textbox.

    I already wrote a JS function that returns true/false depending on whether the given string contains any of the special character present in the k-textbox. 

    How could I bind this function as a filter operator for column filtering? I would like to have it on the client side so that I don’t need to send data back and forth all the time. I tried searching for solutions from the forum and the web in general, but I am still a bit lost.

    It would be neat if I could use it as a string filter operator like the built-in filters, something like this:

    filterable: {
        operators: {
            string: {
                contains: "Contains",
                eq: "Is equal to",
                special:"Contains special characters",
            }
        }
    },

    Any ideas and help are welcome. Thank you!
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 16 May 2013 Link to this post

    Hi Janne,


    Adding a custom filter to the Grid's filter menu is currently not supported. If you consider that it would be a useful addition to Kendo UI you could post it as a suggestion in our Kendo User Voice portal. If it gets popular among the community we will consider to implement it in future releases of Kendo UI.

    Regarding the current scenario, since a custom client side filtering is required, I would suggest you to implement it outside of the Grid and manually filter the dataSource data with the filter method. You should pass your boolean function as an operator.

    I hope this information was helpful for you. Wish you a great day!

     

    Regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. ICT
    ICT avatar
    17 posts
    Member since:
    May 2013

    Posted 16 May 2013 Link to this post

    Thank you Dimiter! The solution you proposed is pretty much exactly what I need. Turns out, having the filter outside Grid's filter menu might be even better  in this particular case.

    In case someone else stumbles upon this thread, I will attach a simplified version of my solution. A word of warning, though: I'm new to Javascript, jQuery and Kendo UI, so this might not be the best of most beautiful of all possible solutions :) It works anyway.

    Here's a simple test filter that gives you all the items having lenght of 4 characters. In practice both the data set and filter are of course more complicated, but the idea is shown here pretty nicely and should be easy to understand.

    <!doctype html>
    <html>
        <head>
            <title>Kendo UI Web</title>
            <link href="styles/kendo.common.min.css" rel="stylesheet" />
            <link href="styles/kendo.default.min.css" rel="stylesheet" />
            <script src="js/jquery.min.js"></script>
            <script src="js/kendo.web.min.js"></script>
        </head>
        <body>
     
            <button id="filter" class="k-button">test filter</button>
     
            <div id="grid"></div>
     
            <script>
            $(function() {
                dataSource = new kendo.data.DataSource({
                    data: [{name:"Bill"},
                            {name:"Bob"},
                            {name:"Johnny"}]
                });
     
                $("#grid").kendoGrid({
                    dataSource: dataSource
                });
     
                $("#filter").click(function() {
                    dataSource.filter({
                        field: "name",
                        operator: function(item){
                            return item.length==4
                        },
                    })
                });
            });
            </script>
        </body>
    </html>
  5. Chad
    Chad avatar
    3 posts
    Member since:
    Sep 2014

    Posted 27 Mar 2015 in reply to ICT Link to this post

    If you specify the filter operator as in this example, the filter selection is lost when you go into the filter the second time.

    The operator drop down for Is equal to, is not equal to, etc always goes to the first item in the drop down list because it's bound to filters[0].operator.  

    Is there any way around this?  
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 31 Mar 2015 Link to this post

    Hello Chad,

    I am not sure which example are you referring to. Please send us small dojo example that demonstrates the issue that you are experiencing.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Chad
    Chad avatar
    3 posts
    Member since:
    Sep 2014

    Posted 31 Mar 2015 in reply to Dimiter Madjarov Link to this post

    Here is a dojo example:

    http://dojo.telerik.com/@chad.gregory@twtelecom.com/OluJe/4

    if you use a custom filter on a datasource, you lose the default filter drop down functionality under "Show items with value that:"
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 01 Apr 2015 Link to this post

    Hello Chad,

    This behavior is expected. As stated in the first post, adding a custom operator in the Grid filter menu is not supported. As a solution you could remove the filterable configuration.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready