Summary/Paging for igHierarchicalGrid

mr lee posted over 5 years ago

Hi,

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: https://www.igniteui.com/grid/summaries-remote 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: https://www.igniteui.com/help/iggrid-configuring-column-summaries#custom-summaries does not seem to get into too much details on how to hook up to result from the server.

Cheers,

Milen.

Parents

No Data

Reply

485

Offline Vasil Pavlov posted over 5 years ago

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:

https://www.igniteui.com/help/api/2018.1/ui.iggridsummaries#options:columnSettings.summaryOperands

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>
<html>
<head>
    <title>HierarchicalGrid</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script src="https://igniteui.github.io/help-samples/data-files/northwind.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/infragistics.loader.js"></script>
</head>
<body>
    <div style="width: 1200px">
        <table id="hierarchicalGrid"></table>
    </div>
    <script>
	$.ig.loader({
		scriptPath: "http://cdn-na.infragistics.com/igniteui/2016.2/latest/js/",
		cssPath: "http://cdn-na.infragistics.com/igniteui/2016.2/latest/css/",
		resources: "igGrid.*,igHierarchicalGrid.*",
		ready: () => {
			$("#hierarchicalGrid").igHierarchicalGrid({
				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"}
										]
									}
								]
							}
						]
					}
				]
			});
		}
	});
</script>
</body>
</html>

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:

https://www.infragistics.com/support/product-lifecycle

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

Children

No Data