Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Summary/Paging for igHierarchicalGrid


We are using IgniteUI version 16.2.20162.1035.

Configuring the grid as follows:

dataSource: '/api/data/' + key,
odata: false,
responseDataKey: "Data",
virtualization: false,

features: [
name: "Paging",
type: "remote",
recordCountKey: "recordCountKey",
pageSize: 25,
showPageSizeDropDown: false


What's the best way of setting up a summary of average and sum of a column? As we are using remote paging, ideally the summary would be for all records. The code provided at: seems to be a bit off and ASP.NET Controller code does not corroborate with the View.

Alternatively we can provide that via the service endpoint, but I cannot find the correct properties to assign those values to. Code provided at: does not seem to get into too much details on how to hook up to result from the server.



  • 485
    Offline posted

    Hello mr lee,


    Thank you for posting in our forum.


    Declaring a columnSettings array for the Summaries, when initializing the hierarchical grid, would allow you to declare the desired “Sum” and “Avg” summaries for the columns you choose. A columnKey or a columnIndex has to be set so that the grid would know which column you want to declare the Summaries settings for,  as well as the summaryOperands option. This option allows you to pass in an array of objects, which describe the summaries you want for this column in more detail and provide you a finer control – there are several things that may be set inside, like the order of the summaries, if the given summary should be active or not, the format, the label, the type, or even a custom calculator function. More information may be found in the API documentation here:


    Here is an example of a hierarchical grid, using Ignite UI 16.2, which has a configuration as described above – when you expand a given parent row, you would notice the first column of the child grid has only “Avg” and “Sum” summaries:



    <!DOCTYPE html>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <script src=""></script>
        <div style="width: 1200px">
            <table id="hierarchicalGrid"></table>
    		scriptPath: "",
    		cssPath: "",
    		resources: "igGrid.*,igHierarchicalGrid.*",
    		ready: () => {
    				width: "100%",
    				autoGenerateColumns: false,
    				autofitLastColumn: false,
    				dataSource: northwind,
    				responseDataKey: "results",
    				dataSourceType: "json",
    				primaryKey: "EmployeeID",
    				columns: [
    					{ key: "EmployeeID", headerText: "Employee ID", dataType: "number", hidden: true },
    					{ key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
    					{ key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
    					{ key: "Title", headerText: "Title", dataType: "string", width: "20%" },
    					{ key: "Address", headerText: "Address", dataType: "string", width: "20%" },
    					{ key: "City", headerText: "City", dataType: "string", width: "20%" }
    				autoGenerateLayouts: false,
    				columnLayouts: [
    						key: "Orders",
    						responseDataKey: "results",
    						width: "1000px",
    						height: "500px",
    						autoGenerateColumns: false,
    						primaryKey: "OrderID",
    						columns: [
    							{ key: "OrderID", headerText: "Order ID", dataType: "number", width: "200px", hidden: true },
    							{ key: "Freight", headerText: "Freight", dataType: "number", width: "200px"},
    							{ key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "200px"},
    							{ key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "200px" },
    							{ key: "ShipCity", headerText: "Ship City", dataType: "string", width: "200px" },
    							{ key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "200px" }
    						features: [
    								name: "Summaries",
    								columnSettings: [
    										columnKey: "Freight",
    										summaryOperands: [
    											{"rowDisplayLabel": "Avg", "type": "avg"},
    											{"rowDisplayLabel": "Sum", "type": "sum"}


    On a side note: the version you are using is not being actively supported anymore - there are scheduled Service Releases only for versions 17.2 and above. I would suggest that you please consider upgrading your product to the latest version 18.2 if it possible - this way you would have 3 years of support (of which the first year includes product service releases), as well as all the improvements that have been made to Ignite UI in the last 2 years. More information may be found here:

    If you need any additional assistance, feel free to contact me.