I am trying to get a button flash behavior when any single column value is changed in the Kendo grid. With the below code, this event is firing when I select column not when I change value. Is there any way change event trigger only After value changes?
function createSummaryGrid(pId) {
var gridID = "#gridCostCenterSummarybyYear";
var gridName = "gridCostCenterSummarybyYear";
$(gridID).empty();
summarywOptions.defaultFilter = [{ field: "ProjectID", operator: "eq", value: pId }];
$(gridID).kendoGrid({
dataSource: T2.DataSource.dataSource(summarywOptions),
reorderable: false,
editable: true,
scrollable: true,
resizable: true,
selectable: true,
navigatable: true,
batch: false,
sortable: false,
groupable: false,
height: 150,
columns: [
{
field: "ProjectYear", title: "Year", width: 100
},
{
field: "AuthorizedPrime", title: "Authorized (Prime)", width: 200, format: "{0:c0}",
attributes: {"style": "border-left:1px solid \\#FFB400;border-bottom:1px solid \\#FFB400;text-align:right;"
}, headerAttributes: { style: "text-align:right;" }
},
{
field: "AuthorizedGross", title: "Authorized (Total Gross)", width: 200, format: "{0:c0}",
attributes: {"style": "border-left:1px solid \\#FFB400;border-bottom:1px solid \\#FFB400;text-align:right;"
}, headerAttributes: { style: "text-align:right;" }
},
{
field: "ForecastPrime", title: "Forecast (Prime)", width: 200, format: "{0:c0}",
attributes: { style: "text-align:right;" }, headerAttributes: { style: "text-align:right;" }
},
{
field: "ForecastTotalGross", title: "Forecast (Total Gross)", width: 200, format: "{0:c0}",
attributes: { style: "text-align:right;" }, headerAttributes: { style: "text-align:right;" }
},
{
field: "ActualPrime", title: "Actual (Prime)", width: 200, format: "{0:c0}",
attributes: { style: "text-align:right;" }, headerAttributes: { style: "text-align:right;" }
},
{
field: "ActualTotalGross", title: "Actual (Total Gross)", width: 200, format: "{0:c0}",
attributes: { style: "text-align:right;" }, headerAttributes: { style: "text-align:right;" }
}
],
change: function () {
flag = true;
$("#btnSave").addClass("btnsaveflash");
$("#btnSave").css("background-color", "red");
}
});
}