How to add and remove filter dynamically from kendo UI Grid

<script>
    $(document).ready(function () {

        var products = [{
            ProductID: 1,
            ProductName: "Chai",
            SupplierID: 1,
            CategoryID: 1,
            QuantityPerUnit: "10 boxes x 20 bags",
            UnitPrice: 18.0000,
            UnitsInStock: 39,
            UnitsOnOrder: 0,
            ReorderLevel: 10,
            Discontinued: false,
            Category: {
                CategoryID: 1,
                CategoryName: "Beverages",
                Description: "Soft drinks, coffees, teas, beers, and ales"
            }
        }, {
            ProductID: 2,
            ProductName: "Chang",
            SupplierID: 1,
            CategoryID: 1,
            QuantityPerUnit: "24 - 12 oz bottles",
            UnitPrice: 19.0000,
            UnitsInStock: 17,
            UnitsOnOrder: 40,
            ReorderLevel: 25,
            Discontinued: false,
            Category: {
                CategoryID: 1,
                CategoryName: "Beverages",
                Description: "Soft drinks, coffees, teas, beers, and ales"
            }
        }, {
            ProductID: 3,
            ProductName: "Aniseed Syrup",
            SupplierID: 1,
            CategoryID: 2,
            QuantityPerUnit: "12 - 550 ml bottles",
            UnitPrice: 10.0000,
            UnitsInStock: 13,
            UnitsOnOrder: 70,
            ReorderLevel: 25,
            Discontinued: false,
            Category: {
                CategoryID: 2,
                CategoryName: "Condiments",
                Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
            }
        }, {
            ProductID: 4,
            ProductName: "Chef Anton's Cajun Seasoning",
            SupplierID: 2,
            CategoryID: 2,
            QuantityPerUnit: "48 - 6 oz jars",
            UnitPrice: 22.0000,
            UnitsInStock: 53,
            UnitsOnOrder: 0,
            ReorderLevel: 0,
            Discontinued: false,
            Category: {
                CategoryID: 2,
                CategoryName: "Condiments",
                Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
            }
        }, {
            ProductID: 5,
            ProductName: "Chef Anton's Gumbo Mix",
            SupplierID: 2,
            CategoryID: 2,
            QuantityPerUnit: "36 boxes",
            UnitPrice: 21.3500,
            UnitsInStock: 0,
            UnitsOnOrder: 0,
            ReorderLevel: 0,
            Discontinued: true,
            Category: {
                CategoryID: 2,
                CategoryName: "Condiments",
                Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
            }
        }];

        $("#grid").kendoGrid({
            dataSource: {
                data: products,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { type: 'number' },
                            UnitsInStock: { type: 'number' },
                            ProductName: { type: 'string' },
                            QuantityPerUnit: { type: 'string' },
                            UnitPrice: { type: 'number' },
                        }
                    }
                },
            },
            filterable: {
                mode: "row"
            },
            resizable: true,
            columns: [
                { field: "ProductName" },
                { field: "UnitsInStock", title: "UnitsInStock" },
                { field: "QuantityPerUnit", title: "QuantityPerUnit" },
                { field: "UnitPrice", title: "UnitPrice" },
            ]
        });



    });

    function AddFilterinGrid() {
        var grid = $("#grid").data("kendoGrid");
        addOrRemoveFilter(grid, "ProductName", "eq", "Chai");
    }

    function RemoveFilterinGrid() {
        var grid = $("#grid").data("kendoGrid");
        addOrRemoveFilter(grid, "ProductName", "eq", "");
    }

    function addOrRemoveFilter(grid, field, operator, value) {

        var newFilter = { field: field, operator: operator, value: value };
        var dataSource = grid.dataSource;
        var filters = null;
        if (dataSource.filter() != null) {
            filters = dataSource.filter().filters;
        }

        if (value && value.length > 0) {
            //Add filter
            if (filters == null) {
                filters = [newFilter];
            }
            else {
                var isNew = true;
                var index = 0;
                for (index = 0; index < filters.length; index++) {
                    if (filters[index].field == field) {
                        isNew = false;
                        break;
                    }
                }
                if (isNew) {
                    filters.push(newFilter);
                }
                else {
                    filters[index] = newFilter;
                }
            }
        }
        else {
            //Remove filter 
            var removeIndex = -1;
            for (var x = 0; x < filters.length; x++) {
                var temp = filters[x];
                if (temp.field == field) {
                    removeIndex = x;
                    break;
                }
            }
            if (removeIndex != -1)
                filters.splice(removeIndex, 1);
        }
        dataSource.filter(filters);
    }
</script>