grouping colums with child elements

[Nate Greene]

I would like to create a table that looks something like this:

Store Name		Store 1			Store 2			Store 3
	NetSales	Qty	Avg	NetSales	Qty	Avg	NetSales	Qty	Avg
Monday	1000	1000	1	200	200	1	400	400	4
Tuesday	...	...	...	...	...	...	...	...	...

I see that I can create Stacked Header but that apears to only label certain fields. I need the colums to have an additional layer of grouping.  The gird sorts everything by date on the row level and then sorts the columns by store.  Each grouped Store colums header would then display its 3 data elements for that given date.

Is there anything that can help me accomplish this with a Grid?

Thanks for any help!

[Vinitha Balasubramanian]

Hi Nate Greene,

Greetings from Syncfusion support.

Query : Grouping columns with child elements

We have forwarded this to the corresponding team currently. So, we will update the further details on Sep 1^st, 2022. Until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi Nate Greene,

We are sorry for the inconvenience.

Since we are facing some difficulties “Grouping columns with child elements” we will update the further details on Sep 5^th, 2022. Until then we appreciate your patience.

Regards,

Vinitha Balasubramanian

[Vinitha Balasubramanian]

Hi Nate,

Thanks for your patience.

We have prepared a sample based on your requirements using Pivot table component. The pivot table's first cell always displays empty, but you can customize that by using the headerCellInfo event. Please refer the example code below.

Code Example:

 

function headerCellInfo(args) {

     if (args.cell.column.headerText === '') {

args.node.querySelector('.e-headertext').innerText = 'Store Name';

     }

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVC-EJ2-1213264260

Screenshot:

Please let us know if you have any concerns.

Regards,

Vinitha Balasubramanian