How to expand a cell in a Syncfusion Angular Grid?

[Nastaran]

Hi,

I'm using Syncfusion GirdComponent in my project and instead of using command column, I want to have a column with just a toggle button for each row and when I click on the button the cell expands horizontally and other buttons appear - and I want just that cell expands not the whole column- and with the second click the cell goes back to it's first state. I tried adding another css class to the td element (parent of the toggle button) and in that class I give a higher width but it doesn't change. 

is there any way I can do this?

[Pavithra Subramaniyam]

Hi Nastaran, 

 

Greetings from Syncfusion. 

 

Query #1: want to have a column with just a toggle button for each row and when I click on the button the cell expands horizontally and other buttons appear 

 

From the query we suspect that you would like to use the detailTemplate and show the custom buttons or elements. Please refer to the below online demo for your reference, 

 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/detail-template  

 

Query #2: I want just that cell expands not the whole column 

 

By default grid does not expand in the cell level but cells can be expanded according the requirements. Please refer to the below tree grid demo, 

 

Demo: https://ej2.syncfusion.com/angular/demos/#/material/treegrid/columntemplate  

 

If the above provided solution does not meet your requirement, then please get back to us with a detailed requirement and scenario details. 

 

Regards, 

Pavithra S. 

[Nastaran]

Hi,

Thank you for answering my question. I checked the links but they weren't what I was looking for. I used another solution for my question.

thanks again.

[Pavithra Subramaniyam]

Hi Nastaran,  

Thanks for your update. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  

Pavithra S.