How to implement a Custom Filter

[Meerkat]

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.

[Rosen]

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

[Meerkat]

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

 

 

[Rosen]

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

[Meerkat]

Many thanks Rosen for your helpful answer. It works great!
KendoUI is good enough to buy :-)

[Meerkat]

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.

[Jan]

Is it possible to handle complex filter?
For example,

Field_A = 100
or
(Field_A < 100 AND Field_B = true)

[Meerkat]

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 :-)

[Jan]

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.

[Rosen]

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

[Meerkat]

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; }

}

[Rosen]

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

[Meerkat]

Outstanding!
Many thanks Rosen for your help and explanation of the problem.
Everything works fine now.

[Sree Rachakonda]

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

[Sree Rachakonda]

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

[Meerkat]

@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.

[Esteban]

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

[Meerkat]

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>

[Esteban]

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
 
 

[Meerkat]

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.

[nCubed]

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

[Brady]

@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.

[Deej]

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.