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!
1 Answer, 1 is accepted
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
Rank 1
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>
Rank 1
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?
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
Rank 1
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:"
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
Rank 1
This doesn't quite help enough...what is the exact function signature to use when passing a function as an operator? You mention it's a boolean function....so it returns a boolean? What about parameters? What does kendo pass to this function when it's evaluating the filter operator? I've seen examples on the net w/various signatures, but when I try using Kendo MVC 2016.2.714.545, the function is called without any params...and "this" is the function object itself. I see no way to know what the function needs to evaluate.
function customOperation(???) {
return true/false;
}
Some examples I've seen on the net...not sure what version of Kendo was used in either. Neither works for me.
// function is called, but has no params passed to it
operator: function() {
console.log(this);
}
// item is never passed
operator: function(item) {
return item.length==4
}
// value and search are not passed
operator: function(value, search) {
return replace(value).indexOf(search) !== -1;
}
Rank 1
Arg! Typo in field value. If you filter on a field name your object actually has, it's passed to the function. If you filter on a non-existent field name, the function is called w/no params...and nothing is logged by Kendo to let you know.
So...specify a valid 'field' property, and the function is called with one param set to the value of that field for the currently evaluated row. If you also specify a 'value' property, it's passed in as the second function param:
...
dataSource.filter({
field: 'FirstName',
operation: function (item) { return item == 'Joe' }
}
...
dataSource.filter({
field: 'FirstName',
value: 'Joe',
operation: function (item, value) { return item == value }
}
Is there a debug version or setting to cause Kendo to spew console warnings when you ask it to do something it can't? *smirk*
I'm glad to hear that the issue is resolved.
In general, the jQuery version of the widgets will not show warnings many based on the actual nature of the JavaScript. We tried to add some more informative error messages for the most common scenarios, but for now, we could not cover all of them.
The MVC wrappers version of the widgets will provide more error messages and warnings and an intellisense for most of the properties.
Thank you for the feedback, we will try to optimize as much of the code as possible, but please have in mind that some scenarios will still remain uncovered, but we will be happy to assist in these cases by inspecting the code.
Regards,
Stefan
Progress Telerik