Filter dirty rows in kendo grid - kendo-ui

Question

I have a kendo grid connected to a rather large table via odata. I use batch editing. I need to be able to filter all rows that have changes on them so the user can review those changes before they commit the changes to the db. Any idea how could I do that? Thanks

Answer 1

Do you need to show also deleted records (not sync'ed)? Otherwise you can set a filter with the condition:
{
field: "dirty",
operator: "equals",
value: true
}
Something like:
grid.dataSource.filter({
field: "dirty",
operator: "equals",
value: true
});
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 550,
toolbar: [
"create",
"save",
"cancel"
],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
{ field: "UnitsInStock", title: "Units In Stock" },
{ field: "Discontinued" },
{ command: "destroy", title: " " }],
editable: true
}).data("kendoGrid");
$("#dirty").on("click", function(e) {
console.log("dirty", grid.dataSource.data());
grid.dataSource.filter({
field: "dirty",
operator: "equals",
value: true
});
e.preventDefault();
});
$("#all").on("click", function(e) {
grid.dataSource.filter({});
e.preventDefault();
});
});
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<button id="dirty" class="k-button">Dirty</button>
<button id="all" class="k-button">All</button>
<div id="grid"></div>