1. Home
  2. Forum
  3. Blazor
  4. sfgrid WrapMode.Both not wrapping column headers in small devices

sfgrid WrapMode.Both not wrapping column headers in small devices

Image_7331_1735833427398

i don't want column headers to be truncated with ellipses. I want it to Allows words to break to the next line if they are too long.


<SfGrid @ref="Grid" DataSource="@filteredResults" AllowSorting="true" AllowFiltering="true" AllowMultiSorting="true" EnableAdaptiveUI="true" RowRenderingMode="@renderingMode" Height="100%" Width="100%" AllowTextWrap="true" GridLines="GridLine.Default" EnableVirtualization="true" Toolbar=@Toolbaritems>

    <GridTextWrapSettings WrapMode=WrapMode.Both></GridTextWrapSettings>

    <GridFilterSettings Type="@Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>


    <GridColumns>

        <GridColumn Field=@nameof(CarSearchResult.CarName) HeaderText="Name" IsPrimaryKey="true" Width="150"></GridColumn>

        <GridColumn Field=@nameof(CarSearchResult.TierLevel) HeaderText="Tier" Width="60"></GridColumn>

        <GridColumn Field=@nameof(CarSearchResult.BrandStatus) HeaderText="type" Width="90">

            <Template>

                @{

                    var Car = (CarSearchResult)context;

                    var badgeColor = Car.BrandStatus == "branded" ? "#69d788" : "lightcoral"; // lightcoral is a light red color

                    <div style="width: 50%;padding: 5px; background-color:@badgeColor; color:white; border-radius: 12px; text-align: center;">

                        @Car.BrandStatus

                    </div>

                }

            </Template>

        </GridColumn>

        <GridColumn Field=@nameof(CarSearchResult.MedicalConditionName) HeaderText="Therapeutic Category Name" Width="95"></GridColumn>

        <GridColumn Field=@nameof(CarSearchResult.MedicalConditionName2) HeaderText="Therapeutic Class Name" Width="95"></GridColumn>


i also tried to set backgroundcolor to column header using

CustomAttributes="@(new Dictionary<string, object>(){ { "class", "customcss" }})" but this style got effected only in horizontal rendering mode, when its vertical rendering mode even this style has no effect

my requirement is to set word wrapping in column headers in vertical rendering mode


please guide me how to fix this


1 Reply
PS Prathap Senthil Syncfusion Team January 3, 2025 08:35 AM UTC

Hi jose KJ,


Based on your requirements, it seems that you have the virtualization feature with both vertical and horizontal modes in the grid. we currently do not support virtualization with the AllowTextWrap feature due to different row heights for specific records, So we have considered your request as an improvement at our end and already logged a task “Need to provide support for virtual scrolling with text wrap on the grid” At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. And this improvement will be included in any of our upcoming releases. 


You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.


Need to provide support for virtual scrolling with text wrap on the grid in Blazor | Feedback Portal

You can also communicate with us regarding the open feature any time using our above feedback report page. We do not have an immediate plan to implement this feature and it will be included in any of our upcoming releases. Please cast your vote to make it count. So that we will prioritize the improvement for every release based on demands. You can communicate with us regarding the open features at any time using the above Feature Report page.  

Additionally, you have used the custom attribute feature to set the background color of the column header. In vertical mo the CustomAttribute is not supported. We have already provided a list of the supported features in this documentation. Kindly refer to it for more information: https://blazor.syncfusion.com/documentation/datagrid/adaptive-layout#supported-features-by-vertical-row-rendering.

Alternatively, you can use CSS customization to set the header text background color using the CSS customization below. This is a possible way to achieve your requirement.

<style>

  

    .e-bigger.e-grid.e-row-responsive .e-gridcontent td::before {

        background-color:aqua;

    }

 

</style>


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


Regards,
Prathap Senthil


Loader.
Up arrow icon