Custom Filtering

37 posts, 0 answers
  1. Andrés
    Andrés avatar
    37 posts
    Member since:
    Jun 2011

    Posted 28 Mar 2012 Link to this post

    Hi guys, congrats on the Q1 release, it's really awesome!
    Anyway, I was working on something and it occurred to me that It would be cool if there was a new option for implementing custom filtering (only available for local fitlering). Something such as:

    var dataSource=...;
    var filterValues=[1,5,7];
    dataSource.filter({
      operator: "custom",
      value: function(item) {
        return (filterValues.indexOf(item.property) == -1);
      }
    });


    or maybe just pass the function to the filter such as dataSource.filter(function(item) {...})
    I hope you consider this for a future release.

    Thanks,
    Andrés
  2. Stephen
    Stephen avatar
    24 posts
    Member since:
    May 2011

    Posted 01 May 2012 Link to this post

    I too would really appreciate custom filtering, though I require it for remote binding. For me, it would be great to just be able to specify something like:

    dataSource.filters = [{
    text: "Adheres to this custom filter",
    operator: "custom"
    }, {
    text: "Adheres to another custom filter",
    operator: "custom2"
    }]

    where "text" specifies the option that is displayed in, for instance, a grid column filter. Then I could just override a parameterMap or read function to handle the server-side filtering. It would be even better if I could specify filters on a column-by-column basis for a grid.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 03 May 2012 Link to this post

    Hello guys,

    The dataSource has a filter method that allows you to perform custom data filtering. The method works both with client and server filtering.

    @Stephen
    It is possible to specify filters on a column basis through the column configuration options. Here is the syntax:
    columns: [{
        field: "BirthDate",
        filterable: {
            extra: true,
            operators: {
            //specify filters according to the field type - string, date, number
                date: {
                    eq: "Equal to",
                    neq: "Not equal to",
                    gte: "Is after or equal to",
                    gt: "Is after",
                    lte: "Is before or equal to",
                    lt: "Is before"
                }
            }                   
        }
    }]

    I hope this functionality will fit in your case.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Andrés
    Andrés avatar
    37 posts
    Member since:
    Jun 2011

    Posted 03 May 2012 Link to this post

    Hi Alexander
    As far as the documentation shows, there's no way to do "customized" filtering. Only the standard filters are available, such as eq, gt, lt, etc....
    What I'm talking about is allowing that same filter function to take a custom function containing calculations that determine if the row is filtered in or out.

    Cheers,
    Andrés
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 08 May 2012 Link to this post

    Hello Andres,

    Indeed the filter operation could be a function:
    dataSource.filter({
        field: "FieldName",
        operator: function(item, value){
            //implement your logic
        },
        value: 12
    })

    As a general information, if you want to retrieve the currently applied filters, I suggest using the following syntax:
    dataSource.filter().filters //returns the array of current filters


    All the best,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Josh Eastburn
    Josh Eastburn avatar
    32 posts
    Member since:
    Aug 2012

    Posted 18 Jun 2012 Link to this post

    Alexander,

    Can you give more specifics on how the custom operator function would work?

    Does function(item, value) need to return true/false?

    I'm trying a very simple implementation of the operator function to start with nothing within the function, but I get an Unexpected Token exception:

    1. Uncaught SyntaxError: Unexpected token ) kendo.web.min.js:8
      1. o.extend.querykendo.web.min.js:8
      2. o.extend._querykendo.web.min.js:8
      3. o.extend.filterkendo.web.min.js:8
  7. Josh Eastburn
    Josh Eastburn avatar
    32 posts
    Member since:
    Aug 2012

    Posted 18 Jun 2012 Link to this post

    You can disregard my previous post.  I'm not sure what the issue was originally, but I have the operator function working correctly now by returning a true or false based on my custom criteria.
  8. John
    John avatar
    21 posts
    Member since:
    Dec 2013

    Posted 10 Jan 2014 Link to this post

    how to get some particular data from json 
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 10 Jan 2014 Link to this post

    Hi John,

    I am afraid that your question is a bit unclear. Please open a new thread with more detailed explanation so we can review your case and assist you further.
    Thank you in advance.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. John
    John avatar
    21 posts
    Member since:
    Dec 2013

    Posted 10 Jan 2014 Link to this post

    product.html page display the chart,

    when i click any one it's send that particular data to display.html page,

    that page(display.html) show the details day order in chart

    example:

    if i press p1 jan report,it's send data next page,

    display.html page will display day order sales report for(1,2,3,..)in chart
  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 13 Jan 2014 Link to this post

    Hi John,

    This thread is more than an year old and your question is not directly related to the initial subject discussed in it. In order to get assistance please open a new thread.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Vince
    Vince avatar
    7 posts
    Member since:
    Jul 2013

    Posted 19 Feb 2014 in reply to Alexander Valchev Link to this post

    I tried this recently and the operator as a function failed to pass in the value.  If it is a string, it passes the string literal as a variable.  If it is an array, it inflates the array members into the function parameters and I got them undefined errors.  Any thoughts?  Here is the generated anonymous code from Kendo UI 

    function anonymous(d, __f, __o) {
    return ((d.MyFieldName1 || '').toLowerCase().indexOf('') >= 0 && __o[0](d.MyFieldName2, StringLiterature1, StringLiterature1))
    }
  13. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 20 Feb 2014 Link to this post

    Hello Calvin,

    Could you please provide a small but runnable jsBin sample which demonstrates your current implementation so I can take a look at it and examine what is going wrong?
    Thank you in advance.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Vince
    Vince avatar
    7 posts
    Member since:
    Jul 2013

    Posted 19 Mar 2014 in reply to Alexander Valchev Link to this post

    Hi Alex,

    Do you still want me to provide the runnable code snippet?  I was busy with other stuff so I totally forgot about this.  Please let me know.

    Giavinh
  15. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 20 Mar 2014 Link to this post

    Hello Calvin,

    Since this is not a known issue we will need a sample to reproduce it. If the problem still persists and you would like help for it please provide a sample which demonstrates the case and we will check it right away. Thank you in advance.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  16. Vince
    Vince avatar
    7 posts
    Member since:
    Jul 2013

    Posted 21 Mar 2014 in reply to Alexander Valchev Link to this post

    Good news. I could not reproduce with the recent version.
  17. IT-Consol
    IT-Consol avatar
    6 posts
    Member since:
    Feb 2013

    Posted 16 May 2014 Link to this post

    Hi there,

    I'm just trying to add a custom filter to my grid, where I can iterate through a list of items and search for a matching element.
    So "MessageContents" is a List in my object which is bound to my grid. It has a title and a body and I want to search for it. This is my code:
    gridFilters.push({
         field: "MessageContents",
         operator: function (item, value) {
              //iterate through my list "MessageContents" and ask if item.title or item.body contains term
         },
         value: term
     });
  18. IT-Consol
    IT-Consol avatar
    6 posts
    Member since:
    Feb 2013

    Posted 16 May 2014 Link to this post

    addition:

    When I do so (as you can see in my last post) I always run into this exception:
    Kendo.Mvc.Infrastructure.Implementation.FilterParserException "Expected token".

    What am I doing wrong? Or is it not possible to search through a list in my filter?

    Thank you!
  19. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 16 May 2014 Link to this post

    Hello Daniel,

    Since you are working with the MVC wrappers I believe that you are using server side filtering. Using custom filter operator makes sense only for client side filtering.
    In your case the filtering happens on the server so you should use custom binding and implement the filtering logic in the controller. Please check the following help article as it explains how to configure custom binding:
    In the offline MVC examples project you can also find a custom binding demo which demonstrates the approach in action.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  20. IT-Consol
    IT-Consol avatar
    6 posts
    Member since:
    Feb 2013

    Posted 21 May 2014 in reply to Alexander Valchev Link to this post

    Hello Alexander,

    thanks for your reply - I managed to do a server side custom filtering. My next problem is grouping. I can't find a proper solution on the site you provided.
    What I need is to be able to group my elements in the grid AND also do lazy loading (IQueryable, ToDataSourceResult,...). I already tried a couple of things, but I didn't come up with a solution.
    If I have one property to group by, I do so on serverside like ".GroupBy(x=> x.MessageCategory)" but then I run into this error:
    "Invalid property or field - "MessageCategory" for type: IGrouping`2"

    If I do "request.Groups.Clear()" afterwards, I do get a sqlexception, because I cannot select x columns but only group by one.

    So is there any possibility to do a grouping serverside, with lazy loading?

    Thank You!
  21. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 21 May 2014 Link to this post

    Hi Daniel,

    I would like to remind you that as a general practice it is accepted to ask different questions in separate support threads. In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.
    Since the second question you asked is not directly related to the initial subject of this thread I kindly ask you to submit a new support ticket for it. We will appreciate if you provide the needed details in it (sample/code) so we can understand/reproduce the issue and assist you.
    Thank you in advance for the understanding.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  22. Nathan
    Nathan avatar
    3 posts
    Member since:
    Dec 2012

    Posted 03 Nov 2014 Link to this post

    I know this is an old thread so I'm wondering if its still possible to pass a function as the operator as mentioned in a previous post.

    When I use 'eq' as the operator my application works fine, however when trying to use a function like below it fails:

    dataSource.filter({
        field: "FieldName",
        operator: function(item, value){
            //implement your logic
        },

    I've also traced the Kendo logic (Kendo.web.js) and noticed a function called "normalizeOperator" which fails when the operator is not a string. 

    Any suggestions?




  23. Nathan
    Nathan avatar
    3 posts
    Member since:
    Dec 2012

    Posted 04 Nov 2014 in reply to Alexander Valchev Link to this post

    Is it still possible to pass a function to the "operator"? I'm using the latest version of Kendo UI. Thanks
  24. Nathan
    Nathan avatar
    3 posts
    Member since:
    Dec 2012

    Posted 04 Nov 2014 in reply to Alexander Valchev Link to this post

    Is it still possible to pass a function to the "Operator"? I'm using the latest version of Kendo UI and haven't been able to get a simple test working. As I traced through the kendo js, I found a "normalizeOperator" function that seemed to require a string. Thanks.
  25. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 06 Nov 2014 Link to this post

    Hi Nathan,

    You should be able to use the custom compare operator. Could you please provide a small but runnable page that demonstrates the issue so I can examine your current implementation?

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  26. cluengas
    cluengas avatar
    2 posts
    Member since:
    Jan 2012

    Posted 04 Feb 2015 in reply to Nathan Link to this post

    Hi Nathan,
    Probably you already solved this, but I ran into this problem yesterday and came up with a "solution"/workaround:

    The code looks like this:

    01.dataSource.filter(
    02.  {
    03.    //logic operator to apply the filters: "and" or "or"
    04.    logic:"and",
    05.    filters:[
    06.      {
    07.        field:"theFieldToBeFiltered",
    08.         
    09.        operator:function(){
    10.          //first parameter comes form the field to be filtered,
    11.          //the rest comes from the "exploded" array
    12.          var theArrayOfValues,fieldValue;
    13.          theArrayOfValues=[].slice.call(arguments);
    14.          //the array of values, once shifted contains the original values ...
    15.          //and :) is an Array
    16.          fieldValue= theArrayOfValues.shift();
    17.          return a.indexOf((v*1))>=0;
    18.        },
    19.        //this array will be converted to a string and each element
    20.        //will become a parameter on the custom "operator" function
    21.        //any object will become [object Object]
    22.        value:[0,1,2,3,4,5,6,7,8]
    23.      },
    24.      {
    25.        field:"theFieldToBeFiltered2",
    26.        operator:function(){
    27.          //same thing as above, just short handed
    28.          var a=[].slice.call(arguments),v= a.shift();
    29.          return a.indexOf((v*1))>=0;
    30.        },
    31.        value:[3,4,5,9]
    32.      }
    33.    ]
    34.  }
    35.);
    36.//let's see what we got
    37.console.log(dataSource.view());
  27. Scott
    Scott avatar
    14 posts
    Member since:
    Mar 2013

    Posted 02 Mar 2015 in reply to cluengas Link to this post

    I realize this is an old post, but I'm having trouble with passing an operator function as well and couldn't find much else on the subject. Using the simplest example I can think of, I get a similar error to what I'm getting in my own application.

    What I'm trying to do is get the equivalent of an 'in' operator working on an array value. There are a number of examples of similar implementations on the forums but they all rely on being able to pass a function to the operator parameter, which I've been unable to make happen. Was this feature disabled at some point?
  28. Andrés
    Andrés avatar
    37 posts
    Member since:
    Jun 2011

    Posted 02 Mar 2015 in reply to Scott Link to this post

    I think the problem is that you should pass "filters" instead of "filter".
    Check out the modified example.
    Also, it can be an array of objects like that one instead of just one, ie filters: [{field:"name", ...}, {field:"anotherfield", ...}]

    Hope it helps!
  29. Scott
    Scott avatar
    14 posts
    Member since:
    Mar 2013

    Posted 03 Mar 2015 Link to this post

    I've actually made some progress on this, still having issues with the way Kendo is compiling the filters and keeping track of my variable scope. However, the immediate solution to getting Kendo to recognize an operator function was to also make the value a function. See my updated sample here.

  30. Andrés
    Andrés avatar
    37 posts
    Member since:
    Jun 2011

    Posted 03 Mar 2015 in reply to Scott Link to this post

    Sorry about my previous reply... note to self: don't reply late at night! It really was "filter", so disregard that part please.

    Anyway, couple of points:
    If you're specifying an operator function, you don't really need to pass "value", you could totally just access whatever variable you had your values in from the function itself.
    Also, in case you need to filter on more than just a single column, you can skip the "field" setting and you'll get the full object.

    So, taking those 2 into account, your whole filter could be something like:

    filter: {
        operator: function(item) {
          return (item.name.indexOf(val)>=0);
        }
      }


    Of course, if you do want to specify the value right there, the function technique definitely works.

    Cheers

Back to Top