Category / Section
How to do conditional formatting in Grid summary rows?
3 mins read
This knowledge base explains the way that how to format the summary rows.
Solution:
We can format the summary rows using the template of the summaryColumns and along with the helper functions of the jsRender.
The following code example demonstrates how to format the summary rows using the template of the summaryColumns.
JS:
1. Render the Grid Control.
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
showSummary: true,
allowGrouping: true,
groupSettings: { groupedColumns: ["CustomerID"] },
summaryRows: [
{
title: "Sum",
summaryColumns: [
{
summaryType: ej.Grid.SummaryType.Sum,
template: "{{:~formatting(#data['summaryValue'])}}",
displayColumn: "Freight", dataMember: "Freight",
format: "{0:C2}"
}
]
}
],
columns: [
{ field: "OrderID", headerText: "Order ID" },
{ field: "EmployeeID", headerText: "Employee ID" },
{ field: "CustomerID", headerText: "Customer ID" },
{ field: "ShipName", headerText: "Ship Name" },
{ field: "Freight", headerText: "Freight", format: "{0:C2}" }
]
});
});
</script>
MVC:
@(Html.EJ().Grid<object>("MultiSort")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.ShowSummary()
.AllowPaging()
.AllowGrouping()
.GroupSettings(group => { group.GroupedColumns(col => { col.Add("CustomerID"); }); })
.SummaryRow(row =>
{
row
.SummaryColumns(col =>
{
col.SummaryType(SummaryType.Sum)
.DisplayColumn("Freight")
.DataMember("Freight")
.Template("{{:~formatting(#data['summaryValue'])}}")
.Format("{0:C}")
.Add();
}).Add();
})
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Add();
col.Field("CustomerID").HeaderText("Customer ID").Add();
col.Field("ShipName").HeaderText("Ship Name").Width(90).Add();
col.Field("Freight").HeaderText("Freight").Format("{0:C}").Add();
})
)
ASP.NET:
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="True" ShowSummary="True" AllowGrouping="True">
<GroupSettings GroupedColumns="CustomerID"></GroupSettings>
<SummaryRows>
<ej:SummaryRow>
<SummaryColumn>
<ej:SummaryColumn SummaryType="Sum" DisplayColumn="Freight" DataMember="Freight"
Template="{{:~formatting(#data['summaryValue'])}}" Format="{0:C}" />
</SummaryColumn>
</ej:SummaryRow>
</SummaryRows>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" />
<ej:Column Field="ShipName" HeaderText="Ship Name" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" />
</Columns>
</ej:Grid>
ASP.NET CORE:
<ej-grid id="FlatGrid" allow-paging="true" show-summary="true" allow-grouping="true" datasource="ViewBag.DataSource">
<e-group-settings grouped-columns=new list<string>() {"CustomerID"}></e-group-settings>
<e-summary-rows>
<e-summary-row show-total-summary="false">
<e-summary-columns>
<e-summary-column summary-type="Sum" template="{{:~formatting(#data['summaryValue'])}}" format="{0:C2}" display-column="Freight" datamember="Freight" />
</e-summary-columns>
</e-summary-row>
</e-summary-rows>
<e-columns>
<e-column field="OrderID" header-text="Order ID"></e-column>
<e-column field="EmployeeID" header-text="Employee ID"></e-column>
<e-column field="CustomerID" header-text="Customer ID"></e-column>
<e-column field="ShipName" header-text="Ship Name"></e-column>
<e-column field="Freight" header-text="Freight" format="{0:C2}"></e-column>
</e-columns>
</ej-grid>
Angular:
2. For angular 2 we have format the summary rows using ng-template with e-summary-template attribute in grid. In ng-template we have applied the styles to summary values based on the value.
<ej-grid [dataSource]="gridData" [showSummary]="true" [summaryRows]="summaryrows" [allowGrouping]="true" [groupSettings]="groupSettings" [allowPaging]="true">
<e-columns>
<e-column field="OrderID" headertext="Order ID"></e-column>
<e-column field="EmployeeID" headertext="Employee ID"></e-column>
<e-column field="CustomerID" headertext="Customer ID"></e-column>
<e-column field="ShipName" headertext="Ship Name"></e-column>
<e-column field="Freight" headertext="Freight" format="{0:C}"></e-column>
</e-columns>
<ng-template e-summary-template let-data>
<div *ngif="getSummaryValue(data.summaryValue) < 80" style="color: red">
{{data.summaryValue}}
</div>
<div *ngif="getSummaryValue(data.summaryValue) > 80 && getSummaryValue(data.summaryValue) < 100" style="color: orange">
{{data.summaryValue}}
</div>
<div *ngif="getSummaryValue(data.summaryValue) > 100" style="color: green">
{{data.summaryValue}}
</div>
</ng-template>
</ej-grid>
TS File:
@ViewChild('grid') GridModel: EJComponents<any, any>;
export class GridDetailTempComponent {
public gridData;
public summaryrows;
public groupSettings;
constructor() {
this.gridData = (window as any).gridData;
this.groupSettings = { groupedColumns: ["CustomerID"] };
this.summaryrows = [{
title: "Average",
summaryColumns: [{
summaryType: ej.Grid.SummaryType.Average,
displayColumn: "Freight",
dataMember: "Freight",
template: "#templateData",
format: "{0:C2}"
}]
}]
}
getSummaryValue(value){
if(value!= undefined)
return Number(value.replace(/[^0-9\.-]+/g,""));
}
}
3. Define the helper function and in this function we have applied the styles to summary values based on the value.
<script type="text/javascript">
function format(value, proxy) {
var val = ej.parseFloat(value);
if (val < 80)
return '<span style="color: red">' + value + '</span>';
if (val >= 80 && val <= 100)
return '<span style="color: orange">' + value + '</span>';
if (val > 100)
return '<span style="color: green">' + value + '</span>';
}
var helpers = { formatting: format };//helpers
$.views.helpers(helpers);
</script>
Figure: Grid with formatted summary rows.
