Articles in this section
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.


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.


1. Render the Grid Control.

 <div id="Grid"></div>
    <script type="text/javascript">
        $(function () {
                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}" }






     .GroupSettings(group => { group.GroupedColumns(col => { col.Add("CustomerID"); }); })
     .SummaryRow(row =>
         .SummaryColumns(col =>
       .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();



<ej:Grid ID="FlatGrid" runat="server" AllowPaging="True" ShowSummary="True" AllowGrouping="True">
          <GroupSettings GroupedColumns="CustomerID"></GroupSettings>
                        <ej:SummaryColumn SummaryType="Sum" DisplayColumn="Freight" DataMember="Freight"
                            Template="{{:~formatting(#data['summaryValue'])}}" Format="{0:C}" />
                <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}" />



<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-row show-total-summary="false">
                <e-summary-column summary-type="Sum" template="{{:~formatting(#data['summaryValue'])}}" format="{0:C2}" display-column="Freight" datamember="Freight" />
        <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>



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-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>
    <ng-template e-summary-template let-data>
        <div *ngif="getSummaryValue(data.summaryValue) < 80" style="color: red">
        <div *ngif="getSummaryValue(data.summaryValue) > 80 && getSummaryValue(data.summaryValue) < 100" style="color: orange">
        <div *ngif="getSummaryValue(data.summaryValue) > 100" style="color: green">


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


Formatted Summary Grid

Figure: Grid with formatted summary rows.

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment