Friday, November 4, 2011

Telerik MVC Grid: Client Side filtering

One of the nice features of the Telerik MVC Grid is filtering. What makes this even cooler is that you can easily add your own filters using the client side API.
An example:
$(function () {
    var button = $("#filterButton");

    var filtered = false;

    button.click(function (e) {
        e.preventDefault();
        var grid = $("#ordersGrid").data('tGrid');

        if (filtered === false) {
            button.html('Remove filter');
            filtered = true;
   //Add filter
            grid.filter("OrderID~eq~10255");
        }
        else {
            button.html('Add filter');
            filtered = false;
   //Remove filter
            grid.filter('');
        }

        alert("clicked");
    });
});


Remark: Unfortunately this only seems to work when operationmode of the grid is not changed to GridOperationMode.Client.