<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>