SfGrid - Change colspan for group caption

[Lee Stevens]

Hi,

I have an SfGrid which is grouped by a single column. I am using the "Caption Template" to show a custom description for the group. The caption template is displayed but it matches the width of the first column displayed, if this column happens to be small then the full description is not visible.

How do I set the colspan attribute of the <td class="e-groupcaption"> that gets generated for the group caption so that it spans multiple columns?

Thanks in advance, Lee.

[Naveen Palanivel]

Hi Lee Stevens,

Greetings from Syncfusion,

We reviewed your query, and It appears that when grouping a column in the SfGrid and adding a custom description using the caption template, the description is not fully visible, as it is displayed based on the width of the first column. However, we created a sample and tested it on our end using the latest version (28.1.38), but the issue did not occur. Please refer to the sample for more details.

Sample : https://blazorplayground.syncfusion.com/embed/rZByDMZGlHDPSlMz?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

If the reported issue still reproduced, then kindly share the below details to validate further at our end.

1. Share us the full Grid code snippet and model class.
2. Share us the video demonstration of the issue with elaborately, it will be more useful to us.
3. Share us a simple issue replicating sample or try to modify the above-mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Naveen Palanivel.

[Lee Stevens]

Hi Naveen,

Please see attached sample. The issue seems to occur when using aggregate columns, you can see that the group caption only fills the width of the "Id" column. It doesn't span over the "Description" column even though this one doesn't have an aggregate.

Thanks in advance, Lee.

Attachment: SfGridGroupCaption_d0d9f993.zip

[Naveen Palanivel]

Hi Lee Stevens,

Based on your query, it seems that you adding custom description in the group caption using the caption template. However, the description is not fully visible alongside the aggregate. We have addressed your requirement by applying a CSS style. Please refer to the code snippet below for your reference.

<style>

 

 

    .e-grid .e-groupcaption{

        overflow:visible;

    }

</style>

 

Please get back to us if you need further assistance on this.

Regards,

Naveen Palanivel.

[Lee Stevens]

Hi Naveen,

That seems to have worked, many thanks.

[Naveen Palanivel]

Hi Lee,

Welcome.

Kindly get back to us if you have further queries. As always we will be assist you.

Regards,
Naveen