Change Filter Dynamically

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<a href="#" class="k-button" id="filter">Set Filter to 60</a>

<div id="grid"></div>

JavaScript

var viewModel = kendo.observable({
    UserInfo: {
        Age: undefined
    }
});

function getPersonAge() {
    try {
        var age = viewModel.get("UserInfo").Age;
        return age ? age : 50;
    } catch (ex) {
        return 0;
    }
}

var datasource = new kendo.data.DataSource({
    data    : createRandomData(50),
    pageSize: 10,
    schema  : {
        model: {
            fields: {
                id       : { type: 'number' },
                FirstName: { type: 'string' },
                LastName : { type: 'string' },
                Age      : { type: 'number' }
            }
        }
    },
    filter  : {
        "field"   : "Age",
        "operator": "ge",
        "value"   : getPersonAge()
    }
});

var grid = $("#grid").kendoGrid({
    dataSource: datasource,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" },
        { width: 50, field: "Age" }
    ]
}).data("kendoGrid");

$("#filter").on("click", function () {
    viewModel.set("UserInfo.Age", 60);
    grid.dataSource.filter({
        "field"   : "Age",
        "operator": "ge",
        "value"   : getPersonAge()
    })
})