How to set specific filter options with the Kendo UI Grid in Javascript!

I spent about an hour trying to decipher the cryptic documentation that Telerik provides. It’s really difficult to use, especially with hundreds of method on one page and not even organized. Clicking each property should give access to its member properties and be navigable heirarchicaly. Well, its not.

Anyway, rant over. I was trying to limit the options for a filter on one of my columns. Seems easy enough, right? Well, I kept pasting the stupid example code in and nothing happened.

It turns out, that you can indeed set column specific filter options. Which made me happy, but you need to configure the filter options based on the data type of the column. Yeah, stupid to me. If I am including the names, which are generic across most of the types, this should have been easier.

Take note of the member property you set. See, one instance is called strings. One is called number. I love the inconsistency with the pluralization too, so fun.

So, here is an example of a string column.

 {
                            field: "EngagementName", title: "Engagement", width: "175px",
                            filterable: {
                                        extra: false,
                                        operators: {
                                            strings: {
                                                    startswith: "Starts with",
                                                    eq: "Is equal to",
                                                    neq: "Is not equal to"
                                            }
                                        }
                                    }
                        },

Here is an example of a number(int) column.

{
                            field: "SystemType", title: "Type", width: "80px",
                            template: function(dataItem) {
                                return systemTypeToString(dataItem.SystemType);
                            },
                            filterable:
                                {
                                    ui: systemTypeFilter,
                                    operators: {
                                        number: {
                                            eq: "Is equal to",
                                            neq: "Is not equal to"
                                        }
                                    }
                                }
                        },

Look through the docs and you will see there is a date, enums, etc. Just make sure to match that property name to the type of the column.

In case that confused you, here is a full column definition with filters.

 
  columns: [
                        {
                            field: "EngagementName", title: "Engagement", width: "175px",
                            filterable: {
                                        extra: false,
                                        operators: {
                                            strings: {
                                                    startswith: "Starts with",
                                                    eq: "Is equal to",
                                                    neq: "Is not equal to"
                                            }
                                        }
                                    }
                        },
                        { field: "EntityName", title: "Entity",  filterable: false},
                        {
                            field: "SystemType", title: "Type", width: "80px",
                            template: function(dataItem) {
                                return systemTypeToString(dataItem.SystemType);
                            },
                            filterable:
                                {
                                    ui: systemTypeFilter,
                                    operators: {
                                        number: {
                                            eq: "Is equal to",
                                            neq: "Is not equal to"
                                        }
                                    }
                                }
                        },
                        {
                            field: "DateAssigned", title: "Assigned", width: "125px", filterable: false,
                            template: function(dataItem) {
                                //var taskDate = new Date(dataItem.DateAssigned.match(/d+/)[0] * 1);
                                var taskDate = new Date(dataItem.DateAssigned);
                                var offset = new Date().getTimezoneOffset();
                                    taskDate.setMinutes(taskDate.getMinutes() - offset);
                                      return  humaneDate(taskDate);
                                }
                        }
                    ]

Happy coding!

2 Replies to “How to set specific filter options with the Kendo UI Grid in Javascript!”

Leave a Reply

Your email address will not be published. Required fields are marked *