Articles in this section
Category / Section

How to display summary row at both top and bottom of the Grid?

4 mins read

To display the summary row in both top and bottom of the grid


For displaying the summary row in both top and bottom we have cloned the summaryRow and have inserted the cloned element before the grid content in the dataBound event of the grid. 


function dataBound(args) {
        var summaryRow = $("#"+this._id+" .e-gridfooter").clone();//get the clone element of grid footer
        summaryRow.css("border", "1px solid #c4c4c4");
        summaryRow.insertBefore("#"+this._id+" .e-gridcontent");//insert the cloned element before the grid content




$(function () {
                /// the datasource "window.gridData" is referred from jsondata.min.js
                dataSource: window.gridData,
                allowPaging: true,
                showSummary: true,
                summaryRows: [
                    { title: "Total =", summaryColumns: [{ summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight", format: "{0:C2}" }] },
                columns: [
                    { field: "OrderID", headerText: "Order ID", isPrimaryKey: true },
                    { field: "CustomerID", headerText: "Customer ID" },
                    { field: "EmployeeID", headerText: "Employee ID"},
                    { field: "Freight", headerText: "Freight",format: "{0:C}" }



          .SummaryRow(sum =>
              sum.SummaryColumns(co => co.Prefix("Total = ").SummaryType(SummaryType.Sum).DataMember("Freight").DisplayColumn("Freight").Format("{0:C}").Add()).Add();
        .Columns(col =>
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Add();
            col.Field("EmployeeID").HeaderText("Employee ID").Add();
            col.Field("Freight").HeaderText("Freight"). Format("{0:C}").Add();



  <ej:Grid ID="Grid1"  AllowGrouping="True" AllowPaging="True" runat="server" >
                <ej:SummaryRow Title="Total=">
                        <ej:SummaryColumn SummaryType="Sum" Format="{0:C}" DisplayColumn="Freight" DataMember="Freight" />
           <ClientSideEvents DataBound="dataBound" />
         <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true"/>
         <ej:Column Field="CustomerID" HeaderText="Customer ID"/>
         <ej:Column Field="EmployeeID" HeaderText="Employee ID"   />
         <ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}"/>



Added both top and bottom summary.

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