We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

expand/collapse column with click on cell


I'm looking for a solution to cover the following requirements:

The initial SfDataGrid looks like

After click (or double click) on "Summary A" the four columns "Type A 1-1", "Type A 1-2", "Type A 2-1" and "Type A 2-2" will be expanded

As you can see, there are 3 StackedHeaderRows with "Item", "Group" and "Type/Comment"

After click on "Summary B" the same will happen with "Type B 1-1", ...

Than each "Type"-column can be expanded with click. 

See the grid after click on "Type A 1-2"

Or after clicks on "Type A 2-2", "Type B 1-1", "Type B 1-2" and "Type B 2-2"

Or after clicks on all "Type"-columns

Further clicks on the same cell should lead to collapsed columns.

I've already tried a lot of experiments, so it would be great, if you could help with a sample. 
Please implement also the fore- and background colors.


3 Replies

HB Harald Betzler December 8, 2016 07:08 PM UTC

I think the embedded images won't appear correctly.

Please find attached screenshots

Attachment: screenshots_ba251df7.zip

HB Harald Betzler December 8, 2016 08:37 PM UTC

An additional requirement is the fact, that the number of Items ("Item A", "Item B", and so on) is dynamic.
So the columns need to be generated by AutoGenerateColumns="True".

JG Jai Ganesh S Syncfusion Team December 9, 2016 09:05 AM UTC

Hi Harald, 
We have analyzed your query and we cannot achieve your requirement using SfDataGrid. However, you can achieve this by using PivotGrid. 
Jai Ganesh S 

Live Chat Icon For mobile
Up arrow icon