Set default filter for Kendo UI Grid

Question

I have a Kendo UI grid that is rendered with javaScript. I want the string columns to have a single option (\"Contains\") and without the second filter. So far so good, I wr

Answer 1

When you only have a single option or you are not happy with the layout you can completely customize the filter control using the "ui : func( element ) { }" overload which is present in the later versions of Kendo (e.g. v2013.1.319)

columns : [
    { field: "MyCity", width: 80, title : "City", filterable: customTextFilter },
    { field: "CreatedAt", width: 72, title: "Created", filterable: $scope.customDateFilter }
]

Here is the function that then customizes the look:

var customTextFilter =
    {
        extra : false,
        operators : { string : { contains : "Contains"}},
        ui : function( element )
        {
            var parent = element.parent();
            while( parent.children().length > 1 )
                $(parent.children()[0]).remove( );

            parent.prepend( "" );
        }
    }

Here is an example of having two date boxes with GTE/LTE format:

var customDateFilter =
    {
        extra : true,
        operators : { },
        ui : function( element )
        {
            var parent = element.parent();
            while( parent.children().length > 1 )
                $(parent.children()[0]).remove( );

            parent.prepend(
                "On or after:
" +
                "" +
                "" +
                "" +
                "select" +

                "
On or before:
" +
                "" +
                "" +
                "" +
                "select"
            );
        }
    };

Obviously you can template out however you like and create different custom filters for Date, Boolean, etc -- note that for the Date version above if you want to set the operators correctly to say "gte" and "lte" for filter[0].operator and filter[1].operator you can just set that on the dataSource.filter attribute like so:

    dataSource: {
        transport :
        {
            read : function( context )
            {
                //note that here context.filter.filters has the array
                //of applied filters -- you can write a custom RESTful call
                //such as angular $http.get( ) or use Kendo native format to
                //send filter options to server.
            }
        },
        //filter settings here initialize filter[0], filter[1], etc.
        filter : [ 
           { field : "CreatedAt", operator : "gte" },
           { field : "CreatedAt", operator : "lte" }]
   }