How to make the content in the grid group feature not be limited by the width of the column?

[Chang Nguyen Phuong]

I have tried setting it to 1 width but it is always overridden by the column width, so that the group is not limited by the column width. 

Below is my code. 

<GridGroupSettings Columns="@Initial" ShowGroupedColumn="false">

    <CaptionTemplate>

        @{ var data = (context as CaptionTemplateContext);

        <span width="200px">@data.HeaderText - @data.Key : @data.Count </span> }

    </CaptionTemplate>

</GridGroupSettings>

[Prathap Senthil]

Hi Chang Nguyen Phuong,

Based on your query, we would like to clarify that when using the aggregate with grid group caption text being truncated, this is the default behavior. If you want to override this behavior, we suggest using the following CSS to resolve the reported issue. Please refer to the code snippet and sample for your reference.

<style>

 

    .e-grid .e-groupcaption {

        overflow: visible;

    }

 

</style>

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

Regards,
Prathap Senthil

[Chang Nguyen Phuong]

Thanks, it worked. Have a good day. (^._.^)ﾉ

[Chang Nguyen Phuong]

I used attribute 'IsFrozen="true"' of the column, but when I scroll to the right, the text in the group is still dragged away. Is there a way to make it always there?

[Prathap Senthil]

Based on the reported issue when using the frozen with grouping, we suggest the following CSS customization to achieve your requirement. Kindly refer to the code snippet and sample below for your reference:

 

<style>

    .e-grid .e-groupcaption {

        position: sticky;

        left: 20px;

        background-color: inherit;

        z-index: 10;

        overflow: visible;

        white-space: nowrap;

    }

 

</style>

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

[Chang Nguyen Phuong]

Thanks 

[Vignesh Natarajan]

Hi Chang,

Thanks for the update.

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan

[Chang Nguyen Phuong]

Hi! I got this error when scrolling horizontally, the GroupCaptionTemplate will overlap the freeze of the first 2 elements making it look like this. Is there a way to fix it? I tried css but it didn't work.
Sample:  Sample  https://blazorplayground.syncfusion.com/LjLziVtVXRTjtznC

[Prathap Senthil]

Based on the reported problem, you are facing an issue when using the aggregate caption template. We suggest using the CSS customization below to resolve the problem. Kindly refer to the code snippet and sample provided for your reference.

@using Syncfusion.Blazor.Grids

 

<SfGrid DataSource="@Orders" Width="700" AllowGrouping="true" Height="400">

    <GridGroupSettings Columns="@Initial">

        <CaptionTemplate>

            @{

                var data = (context as Syncfusion.Blazor.Grids.CaptionTemplateContext);

 

 

 

                <span>@data.HeaderText - @data.Key : @data.Count </span>

            }

        </CaptionTemplate>

    </GridGroupSettings>

    <GridAggregates>

        <GridAggregate>

            <GridAggregateColumns>

                <GridAggregateColumn Field=@nameof(Order.Freight) Type="Syncfusion.Blazor.Grids.AggregateType.Count">

                    <FooterTemplate>

                        @{

                            var aggregate = (context as Syncfusion.Blazor.Grids.AggregateTemplateContext);

                            <div>

                                <p >Count: @aggregate.Count</p>

                            </div>

                        }

                    </FooterTemplate>

                    <GroupCaptionTemplate>

                        @{

                            var aggregate = (context as Syncfusion.Blazor.Grids.AggregateTemplateContext);

                            <div>

                                <p style="margin-bottom:2rem;">Count: @aggregate.Count</p>

                            </div>

                        }

                    </GroupCaptionTemplate>

                </GridAggregateColumn>

                <GridAggregateColumn Field=@nameof(Order.EmployeeID) Type="Syncfusion.Blazor.Grids.AggregateType.Count">

                    <FooterTemplate>

                        @{

                            var aggregate = (context as Syncfusion.Blazor.Grids.AggregateTemplateContext);

                            <div>

                                <p>Count: @aggregate.Count</p>

                            </div>

                        }

                    </FooterTemplate>

                    <GroupCaptionTemplate>

                        @{

                            var aggregate = (context as Syncfusion.Blazor.Grids.AggregateTemplateContext);

                            <div>

                                <p style="margin-bottom:2rem;">Count: @aggregate.Count</p>

                            </div>

                        }

                    </GroupCaptionTemplate>

                </GridAggregateColumn>

                <GridAggregateColumn Field=@nameof(Order.ShipName) Type="Syncfusion.Blazor.Grids.AggregateType.Count">

                    <FooterTemplate>

                        @{

                            var aggregate = (context as Syncfusion.Blazor.Grids.AggregateTemplateContext);

                            <div>

                                <p>Count: @aggregate.Count</p>

                            </div>

                        }

                    </FooterTemplate>

                    <GroupCaptionTemplate>

                        @{

                            var aggregate = (context as Syncfusion.Blazor.Grids.AggregateTemplateContext);

                            <div>

                                <p style="margin-bottom:2rem;">Count: @aggregate.Count</p>

                            </div>

                        }

                    </GroupCaptionTemplate>

                </GridAggregateColumn>

            </GridAggregateColumns>

        </GridAggregate>

 

    </GridAggregates>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsFrozen="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.EmployeeID) HeaderText="Employee ID" IsFrozen="true" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.ShipName) HeaderText="Ship Name" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.ShipAddress) HeaderText="Ship Address" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="Syncfusion.Blazor.Grids.ColumnType.Date" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>

    </GridColumns>

</SfGrid>

 

<style>

    .e-grid .e-groupcaption {

        position: sticky;

        left: 30px;

        background-color: #f8f9fa;

        z-index: 10 ;

        overflow: visible;

        white-space: nowrap;

    }

 

</style>

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

[Chang Nguyen Phuong]

Thank you! It work for me.

[Vignesh Natarajan]

Hi Chang Nguyen Phuong,

Thanks for the update. We are happy to hear that you have resolved your query using our solution. 

Please get back to us if you have further queries.

Regards,

Vignesh Natarajan