kendo dataSource initial filter
HTML
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="grid"></div>
JavaScript
var dataSource;
$.ajax({
url: "/echo/json/",
dataType: "json",
type: "POST",
data: {
// /echo/json/ echoes the JSON which you pass as an argument
json: JSON.stringify([
{ field: "foo", operator: "eq", value: 1},
{ field: "bar", operator: "eq", value: "a"},
{field: "fo1", operator: "eq", value: "b"}
])
},
success: function(data) {
//create filters
var filters = data;
//init dataSource + grid
gridInit(filters);
}
});
function gridInit(filters) {
kendo.culture("en-US");
dataSource = new kendo.data.DataSource({
schema: {
model: {
id: "foo",
fields: {
foo: {type: "number"},
bar: {type: "string"},
fo1: {type: "number"},
isEditable: {type: "boolean"}
}
}
},
transport: {
read: {
//using jsfiddle echo service to simulate JSON endpoint
url: "/echo/json/",
dataType: "json",
type: "POST",
data: {
// /echo/json/ echoes the JSON which you pass as an argument
json: JSON.stringify([
{ foo: 1, bar: "a", fo1: "$300" },
{ foo: 2, bar: "b", fo1: "$400"},
{ foo: 3, bar: "c", fo1: "$500"}
])
}
},
update: {
url: "test"
}
},
serverFiltering: true,
filter: filters
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
"foo",
"bar",
"fo1"
],
filterable: true
});
}