Merge Cell with Icon and text align center

Question

Hi,I am trying to do merge cell dynamically which has 2 items, an icon and text which will be aligned in the centre of the cell. Do the grid support this. I have attached a basic table of how I will be doing dynamically.https://stackblitz.com/edit/angular-xf5a2j?file=app.component.html

Ajith Govarthan · Answer

Hi Tapas, 

Greetings from Syncfusion support. 

We have validated the provided sample and already have option to merge the Grid cell based on its data. Please find the demo and documentation for your reference. 

Doc : https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-spanning   
Demo : https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/column/column-spanning  

Please get back to us, if you have any queries. 

Regards, 
Ajith G

Tapas Das · Answer

Hi Ajith,The examples has all left aligned content and not centre aligned with Icon. Can you help me on that like how it will happen be when Icon and Text will be there with centre align to the cell.Thanks.Tapas D.

Pavithra Subramaniyam · Answer

Hi Tapas, 

You can align the merged cells inside the ‘queryCellInfo’ event based on your condition. Please refer to the below code example for more information. 





 public queryCellInfoEvent: EmitType < QueryCellInfoEventArgs > = ( 
   args: QueryCellInfoEventArgs 
 ) => { 
    .   .   . 
  // Based on your condition 
  (args.cell as HTMLElement).style.textAlign = 'Center'; 
} 


Please get back to us if you need further assistance on this. 

Regards, Pavithra S.