3 layers stacked header

Question

Hello,is it a way to achieve a 3 layers stacked header exactly like this via this sample model?"Responses": [		{			"StationName": "98.5 FM",			"StationNames": ["98.5 FM"],			"StationCode": 1200,			"StationCodes": [1200],			"Weekdays": "MTWTF..",			"DaypartLabel": "Breakfast (Mo-Fr 6a-10a)",			"Dayparts": "BreakFast",			"AudienceInformation": [				{					"label": "A2+",					"SubsetOfPrimary": false,					"OverlapsPrimary": false,					"SubsetOfPrevious": false,					"OverlapsPrevious": false,					"MetricsPerMarket": [						{							"Universe": 3372.003589270665,							"Sample": 833						},						{							"Universe": 8415.012665192438,							"Sample": 2607						}					]					"Stats":[										]					"AMA_Consolidated": 2,					"SecAMA_Consolidated": 3,					"Rating_Consolidated": 4,					"AMA_OTA": 2,					"SecAMA_OTA": 3,					"Rating_OTA": 4,					"AMA_Streaming": 2,					"SecAMA_Streaming": 3,					"Rating_Streaming": 4,				},				{					"label": "A2-5",					"SubsetOfPrimary": true,					"OverlapsPrimary": true,					"SubsetOfPrevious": true,					"OverlapsPrevious": true,					"MetricsPerMarket": [						{							"Universe": 136.08680021212653,							"Sample": 31						},						{							"Universe": 348.8730693271527,							"Sample": 90						}					]					"AMA_Consolidated": 2,					"SecAMA_Consolidated": 3,					"Rating_Consolidated": 4,					"AMA_OTA": 2,					"SecAMA_OTA": 3,					"Rating_OTA": 4,					"AMA_Streaming": 2,					"SecAMA_Streaming": 3,					"Rating_Streaming": 4,				}			]					]

Ajith Govarthan · Accepted Answer

Hi Alireza, 
  
Thanks for contacting Syncfusion support. 
  
Query: is it a way to achieve a 3 layers stacked header exactly like this via this sample model? 
  
Based on your query you want to use 3 level of stacked header in your Grid application. So, we have prepared sample and in that sample we have used the three level of stacked header as per your attached screenshot.  
 
For your convenience we have attached the sample, please refer them for your reference. 
  
Code Example: 




App.component.ts 
  
  
  public ngOnInit(): void { 
    this.data = orderDetails; 
  
    this.orderColumns = [ 
      { 
        headerText: 'Order Date', 
        format: 'yMd', 
        width: 130, 
        columns: [ 
          { 
            field: 'OrderDate', 
            headerText: 'Order Date', 
            format: 'yMd', 
            width: 130, 
            textAlign: 'Right', 
            minWidth: 10 
          }, 
          { 
            field: 'Freight', 
            headerText: 'Freight ($)', 
            width: 120, 
            format: 'C1', 
            textAlign: 'Right', 
            minWidth: 10 
          } 
        ], 
        textAlign: 'Center', 
        minWidth: 10 
      }, 
      { 
        headerText: 'Ship Details', 
        width: 120, 
        format: 'C1', 
        textAlign: 'Right', 
        columns: [ 
          { 
            field: 'ShippedDate', 
            headerText: 'Shipped Date', 
            format: 'yMd', 
            textAlign: 'Right', 
            width: 150, 
            minWidth: 10 
          }, 
          { 
            field: 'ShipCountry', 
            headerText: 'Ship Country', 
            width: 150, 
            minWidth: 10 
          } 
        ] 
      } 
    ]; 
  
    this.shipColumns = [ 
      { 
        headerText: 'Ship Date', 
        format: 'yMd', 
        width: 130, 
        columns: [ 
          { 
            field: 'ShippedDate', 
            headerText: 'Ship Date', 
            format: 'yMd', 
            width: 130, 
            textAlign: 'Right', 
            minWidth: 10 
          }, 
          { 
            field: 'ShipAddress', 
            headerText: 'Address', 
            width: 120, 
            format: 'C1', 
            textAlign: 'Right', 
            minWidth: 10 
          } 
        ], 
        textAlign: 'Center', 
        minWidth: 10 
      }, 
      { 
        headerText: 'Ship Details', 
        width: 120, 
        format: 'C1', 
        textAlign: 'Right', 
        columns: [ 
          { 
            field: 'ShipCity', 
            headerText: 'Shipped City', 
  
            textAlign: 'Right', 
            width: 150, 
            minWidth: 10 
          }, 
          { 
            field: 'ShipRegion', 
            headerText: 'Region', 
            width: 150, 
            minWidth: 10 
          } 
        ] 
      } 
    ]; 
  } 
  
  
  
Sample link: https://stackblitz.com/edit/angular-ssy1bt?file=app.component.ts 
  
UG-Link: https://ej2.syncfusion.com/angular/documentation/grid/columns/#resize-stacked-column 
  
Please get back to us if you need further assistance. 
  
Regards, 
Ajith G.

Alireza Torkamani · Answer

Awesome! thank you!

Ajith Govarthan · Answer

Hi Alireza, 
  
Thanks for the update. 
  
We are happy to hear that your issue has been resolved. 
  
Please get back to us if you need further assistance. 
  
Regards, 
Ajith G.