|
$(function () {
$("#Grid").ejGrid({
dataSource: data,
allowPaging: true,
showSummary: true,
actionComplete:"actionComplete",
dataBound:"dataBound",
pageSettings: { pageSize: 11 },
summaryRows: [{ title: "Min", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Custom, customSummaryValue: Min, displayColumn: "col4" }]},
],
columns: [
{ field: "Col1", headerText: "Col1", textAlign: ej.TextAlign.Right, width: 70 },
{ field: "col2", headerText: "col2", textAlign: ej.TextAlign.Left, width: 70 },
{ field: "col3", headerText: "col3", textAlign: ej.TextAlign.Right, width: 70 },
{ field: "col4", headerText: "col4", textAlign: ej.TextAlign.Left, width: 70 },
{ field: "col5", headerText: "col5", textAlign: ej.TextAlign.Right, width: 70 }
],
});
});
<databound event>
function dataBound(args) {
colorChange();
}
<action complete event>
function actionComplete(args) {
if (args.requestType == "save" || args.requestType == "batchsave") {
colorChange(); //Even color summary value color is changed while save the record
}
}
function colorChange() {
var len = this.model.summaryRows.length, customsummaryvalue1 = parseInt($(this.getFooterTable()).find('tr').eq(0).find('td').eq(3).text());
for (var i = 0; i < len; i++) {
if (this.model.summaryRows[i].summaryColumns[0].summaryType == "custom" && customsummaryvalue1 > 1) {
$(this.getFooterTable()).find('tr').eq(0).find('td').eq(3).css("color", "red");//change the summary value color
}
else
$(this.getFooterTable()).find('tr').eq(0).find('td').eq(3).css("color", "green");
}
}
| 
