How to implement a Custom Filter

Thread is closed for posting
23 posts, 1 answers
  1. Meerkat
    Meerkat avatar
    64 posts
    Member since:
    Feb 2007

    Posted 28 Aug 2012 Link to this post

    Hello I have been evaluating Kendo UI for ASP.NET MVC  version 2012.2.710 for a while now and it looks as if I will be recommending we buy a license.
    .
    I have searched your documentation for a long time trying to find how to implement a custom grid filter rather than use the built in filters.
    I am thinking along the lines of having some text and combo boxes above the grid, together with a "Filter" Button.
    Eg. First Name: TEXTBOX  Last Name: TEXTBOX  Country: COMBOBOX             FILTERBUTTON
    When the user clicks the FILTERBUTTON, the grid will display records according to the contents of the the above.

    I am sure the answer must be somewhere in the documentation as I imagine this is a common requirement,  however I just can't find it.

    It would be great if you could give me an example or, failing that, point me in the in the right direction.

    Many thanks.
  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 28 Aug 2012 Link to this post

    Hi Meerkat,

    In order to set filter to the DataSource you should use its filter method. Please refer to this online demo, which demonstrates how to filter grid using an external widget.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Meerkat
    Meerkat avatar
    64 posts
    Member since:
    Feb 2007

    Posted 28 Aug 2012 Link to this post

    Thanks Rosen, after a lot of searching through the almost impenetrable maze of your documentation, I finally managed to work out how to get your suggestion to work. To possibly save others the same hassle, I did something along these lines:
    <script>
      $("#btnSearch").click(function () {
        $filter = new Array();
     
        $firstName = $("#txtFirstName").val();
        $lastName = $("#txtLastName").val();
     
        if ($firstName) {
          $filter.push({ field: "FirstName", operator: "contains", value: $firstName });
        }
     
        if ($lastName) {
          $filter.push({ field: "LastName", operator: "contains", value: $lastName });
        }
     
        var grid = $("#Grid").data("kendoGrid");
        grid.dataSource.filter($filter);
     
      });




    This works if everthing is to be ANDed but what do I need to do if I want to OR things together? I imagine it must be something to do with setting the LogicalOperator but what ?

    Many Thanks

     

     

  4. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 29 Aug 2012 Link to this post

    Hi,

    As described in the documentation article I have pointed in my previous message, in order to set OR operator, you should use the logic option of the filter descriptor. For example:

    dataSource.filter({
        logic: "or",
        filters: [
          { field: "orderId", operator: "eq", value: 10248 },
          { field: "customerName", operator: "startswith", value: "Paul" }
        ]
    });

    Or in your case, you make the following change:

    //change this
    grid.dataSource.filter($filter);
    //to this
    grid.dataSource.filter({
        logic: "or",
        filters: $filter
    });

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Meerkat
    Meerkat avatar
    64 posts
    Member since:
    Feb 2007

    Posted 29 Aug 2012 Link to this post

    Many thanks Rosen for your helpful answer. It works great!
    KendoUI is good enough to buy :-)
  6. Meerkat
    Meerkat avatar
    64 posts
    Member since:
    Feb 2007

    Posted 29 Aug 2012 Link to this post

    Hello again Rosen,
    Needless to say, I have come across another problem.
    How do I filter on a Date field using a Datepicker as one of my filter boxes ?
    After several hours trying to work it out, I am beginning to suspect this is more complicated than it would first seem.

    I look forward to hearing from you again.


  7. Jan
    Jan avatar
    11 posts
    Member since:
    Nov 2011

    Posted 29 Aug 2012 Link to this post

    Is it possible to handle complex filter?
    For example,

    Field_A = 100
    or
    (Field_A < 100 AND Field_B = true)
  8. Meerkat
    Meerkat avatar
    64 posts
    Member since:
    Feb 2007

    Posted 29 Aug 2012 Link to this post

    Hello Jan, I am not certain if you are joking but if not, then may I take the liberty saving Rosen the trouble of telling you to read this thread.

    Hello Rosen,
    Hoping you notice my question about how to filter on the output from a Datepicker :-)
  9. Jan
    Jan avatar
    11 posts
    Member since:
    Nov 2011

    Posted 29 Aug 2012 Link to this post

    I am not joking. I am sory for being rude and interupting your conversation.
    So, I will create another thread to ask the filter question.

    Thank you for your thread. It answers me how to use "and" , "or" for filtering.
    However, I still wonder about the complex filter setting.
  10. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 30 Aug 2012 Link to this post

    Meerkat, what is the exact issue you are facing with the DataPicker widget filtering?  Here is a simple test page which demonstrates such functionality.

    Jan, you can have multiple nested filter descriptors, for example:

    dataSource.filter({
        logic: "or",
        filters: [
          { field: "fieldA", operator: "eq", value: 100 },
          {
             logic: "and",
             filters: [
                 { field: "fieldA", operator: "lt", value: 100 },
                 { field: "fieldB", operator: "eq", value: true }
             ]
         }
        ]
    });

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Meerkat
    Meerkat avatar
    64 posts
    Member since:
    Feb 2007

    Posted 30 Aug 2012 Link to this post

    Hello again Rosen, I thank you for your example but I am afraid it did not help.
    The problem seems to lie in the days and the months being reversed.
    I have tried using an en-GB culture but what I did did not seem to work.
    It would have been simple to explain if I could have attached my test project but you only allow 2MB.
    I wonder if I could ask you to create a project using the code shown below.
    I am trying to search on, and display all dates in British format ( 20/06/1997 = 20th June 1997 )
    I expect I am missing a setting or something and I am hoping you are going to be able to let me know what I am doing wrong.
    Many thanks for your time and patience.

    VIEW
    <script src="@Url.Content("~/Scripts/cultures/kendo.culture.en-GB.js")"></script>
     
    @{
      ViewBag.Title = "Search";
    }
     
    @model IEnumerable<TestGridFilter.Models.StudentsGrid>
    <input type="button" value="Search" id="btnSearch" />
    DOB
    @(Html.Kendo().DatePicker()
                  .Name("dob")
                  .Value("20/06/1997")
                  .HtmlAttributes(new { style = "width:150px" })
    )
     
    LastName
    <input id="txtLastName"  />
     
    @(
    Html.Kendo().Grid(Model).Name("Grid")
      .DataSource(ds => ds.Ajax()
        .Read(r => r.Action("Read", "Search")))
     
      .Columns(columns =>
      {
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.DOB).Format("{0:dd/MM/yyyy}");
      })
      .Filterable()
    )
     
    <script>
     
      $(function () {
        //set culture of the Kendo UI
        kendo.culture("en_GB");
     
     
        $("#btnSearch").click(function () {
          $filter = new Array();
     
          $lastName = $("#txtLastName").val();
          $dob = $("#dob").val();
     
          if ($dob) {
            $dob = $dob;
            $filter.push({ field: "DOB", operator: "eq", value: $dob });
          }
       
          if ($lastName) {
            $filter.push({ field: "LastName", operator: "contains", value: $lastName });
          }
     
          var grid = $("#Grid").data("kendoGrid");
          grid.dataSource.filter($filter);
     
        });
      });
    </script>

    CONTROLLER
    public ActionResult Read([DataSourceRequest] DataSourceRequest request)
      {
        var people = new List<StudentsGrid>{
          new StudentsGrid{LastName= "Adams",   DOB=DateTime.Parse("20/06/1997")},
          new StudentsGrid{LastName= "Smith",   DOB=DateTime.Parse("12/01/1993")},
          new StudentsGrid{LastName= "Adina",   DOB=DateTime.Parse("18/02/1992")},
          new StudentsGrid{LastName= "Ferrier", DOB=DateTime.Parse("18/03/1996")},
          new StudentsGrid{LastName= "Allen",   DOB=DateTime.Parse("08/01/1992")}
        };
        return Json(people.ToDataSourceResult(request));
      }

    CLASS
    public class StudentsGrid
    {
      public string LastName { get; set; }
      public DateTime DOB { get; set; }
    }

  12. Answer
    Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 30 Aug 2012 Link to this post

    Hello Meerkat,

    If you look at the example I have provided, you may notice that the value for the date filter is retrieved via the DatePicker's value method. This as you may know will return a JavaScript Date object instead of the plain string as with the code you have pasted. This Date object then will be serialized in the correct format in which it will be possible to deserialize it on the server as a DateTime.
    Thus, in order this to work, you should modify the code to use the DatePicker API:

    //change this:
    $dob = $("#dob").val();
    //to this:
    $("#dob").data("kendoDatePicker").value()

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Meerkat
    Meerkat avatar
    64 posts
    Member since:
    Feb 2007

    Posted 30 Aug 2012 Link to this post

    Outstanding!
    Many thanks Rosen for your help and explanation of the problem.
    Everything works fine now.
  14. Sree Rachakonda
    Sree Rachakonda avatar
    9 posts
    Member since:
    Mar 2010

    Posted 03 Sep 2012 Link to this post

    Thanks for the wonderful filter example Meerkat. Ur example helped me a lot. I got stuck at one place. 
    var grid = $("#gridName").data("kendoGrid")<br>grid.dataSource.filter($filter);

    I am getting the following error: dataSource is null actually the grid object itself is undefined....
    My grid is inside a TabStrip. can you help me on this please. 
    Also i have a checkbox column in the grid and its by default disabled. How can i enable it.



    Thanks in advance
  15. Sree Rachakonda
    Sree Rachakonda avatar
    9 posts
    Member since:
    Mar 2010

    Posted 10 Sep 2012 Link to this post

    hi everyone,

    I am still stuck with my problem.
    Its really amazing that even the kendo people havent bothered to post a reply of probe for more details regarding my problem.... its bee one week... i am trying each and every one example i came across
    The below statements don't work:
    var grid = $("#grdName").data("kendoGrid");
    grid.dataSource.filter($filter);

    the grid is returned as undefined. I urgently need help....
    Kendo team can u please step in and help me.....

    My grid is inside a tabstrip. I tried using the datasource also.  But the data in the dataSource doesnt contain any data that i am retrieving.

    Thanks
  16. Meerkat
    Meerkat avatar
    64 posts
    Member since:
    Feb 2007

    Posted 10 Sep 2012 Link to this post

    @Sree
    Hello, as is probably obvious, I am relatively new to programming and to Kendo UI and am just starting to try to my head around the so called documentation.

    From a personal point of view, I feel you have not given anything like enough information for anyone to be able to help.
    I suggest you at least include some code that can be reviewed, in order to help someone help you.

    As I say, this is only a suggestion, and I may very well be talking a load of rubbish.
    If this is indeed the case then please ignore my feeble attempt at trying to help.
  17. Esteban
    Esteban avatar
    4 posts
    Member since:
    Sep 2012

    Posted 18 Sep 2012 Link to this post

    Hi Meerkat, 

    I implemented your soluciotion and worked fine, but with a input text outside from the grid.

    Could you modify the column header to Eg. First Name: TEXTBOX  Last Name: TEXTBOX  Country: COMBOBOX             FILTERBUTTON as you mention in your first post? and how?

    Thanks

    Esteban
  18. Meerkat
    Meerkat avatar
    64 posts
    Member since:
    Feb 2007

    Posted 19 Sep 2012 Link to this post


    Hello Esteban,
    Hope this helps.

    <script>
      $("#btnSearch").click(function () {
        $filter = new Array();
     
        $firstName = $("#txtFirstName").val();
        $lastName = $("#txtLastName").val();
        $country = $("#cboCountry").data("kendoComboBox").value();
     
        if ($firstName) {
          $filter.push({ field: "FirstName", operator: "contains", value: $firstName });
        }
     
        if ($lastName) {
          $filter.push({ field: "LastName", operator: "contains", value: $lastName });
        }
     
        if ($country) {
          $filter.push({ field: "Country", operator: "eq", value: $country });
        }
     
        var grid = $("#Grid").data("kendoGrid");
        grid.dataSource.filter($filter);
      });
    </script>
  19. Esteban
    Esteban avatar
    4 posts
    Member since:
    Sep 2012

    Posted 19 Sep 2012 Link to this post

    Hi Meerkat, thank you for your response.

    Yes, it works, but I need to put the elements txtFirstName, txtLastName,cboCountry inside of the column header, Could you do that? or these elements are outside of the grid? 

    Thanks
    Esteban
     
     
  20. Meerkat
    Meerkat avatar
    64 posts
    Member since:
    Feb 2007

    Posted 19 Sep 2012 Link to this post

    Hello Esteban,
    If I understand your question correctly, you want the textboxes etc to be part of the Column header.
    If that is the case then I am afraid I do not know how to do this, although I suspect it is possible.
    All I can do is suggest you start a new thread and ask someone far more experience than I am.
    Most of the time the people at KENDO UI are very helpful but if you are unlucky, please come back I will try to look into this further for you.
  21. nCubed
    nCubed avatar
    6 posts
    Member since:
    Nov 2011

    Posted 04 Nov 2012 Link to this post

    Hey Meerkat - thanks for posting the solution for the client side JS to interact with the MVC server side Razor grid settings for the external filter. Banged my head on the documentation for hours before I found your solution. Much thanks!

    re: http://www.kendoui.com/forums/mvc/grid/how-to-implement-a-custom-filter.aspx#2296030
  22. Brady
    Brady avatar
    34 posts
    Member since:
    Mar 2009

    Posted 07 Jun 2013 Link to this post

    @Meerkat, +10 for "so called documentation". Kendo, like DevExpress and anyone else you care to mention, rely on overly simplistic examples, probably written by interns, and then wait until someone asks a support question to document how to achieve something. It's much, much cheaper than documenting everything at the start.
  23. Deej
    Deej avatar
    14 posts
    Member since:
    Oct 2013

    Posted 23 Oct 2013 Link to this post

    It would be nice if they could at least integrate their answers to support questions into the main documentation so it's all in one place.
Back to Top