Multiline SfGrid table headers

[Kerry Kerschbaumer]

Hi,

I've struggled with this for some time now to flexibly have multiline (word-wrapped) table headers whenever required and still show the other headers centered nicely and without expanding header column beyond requirements.

I couldn't find a suitable solution here and also tried alot with <HeaderTemplate> with <div> or <span> and <br> or <TextBox> inside the specific column that would require mutiline headers (which still is not very flexible as it won't be responsive).

The actual solution was just a CSS override in the site.css for the column header divs coming from SyncFusion:

.e-headercelldiv {

    vertical-align: middle !important;

    display: table-cell !important;

    line-height: 100% !important;

    white-space: normal !important;

}

That's working now for all table headers, whether they need multiline or not.

Unfortunately it doesn't help to do anything on the <HeaderTemplate> because this will only affect the header div, but the limiting factor is the surrounding parent div, which cannot be addressed by the razor page, only by overriding the css.

Hope that helps someone else to find this quicker.

[Jeevakanth Palaniappan]

Hi Klaus, 

  

Greetings from Syncfusion support. 

  

We would like to inform you that, we have inbuilt support to wrap contents of grid cell. We suggest you to enable the AllowTextWrap property of Grid to apply text wrap for Grid. We suggest you to refer the below documentation for more details regarding this. 

References : 

https://blazor.syncfusion.com/documentation/datagrid/cell#auto-wrap 

https://blazor.syncfusion.com/demos/datagrid/auto-wrap?theme=highcontrast 

  

Please get back to us if you need further assistance. 

  

Regards, 

Jeevakanth SP. 

[Fabian]

Maybe a late response, but this could help someone else.

Problem with  AllowTextWrap is that it applies the auto wrap for all the text without any control, it will wrap any text without sense of data presentation.

Now my alternative that I use is to use a combination of css and Header Template. 

See code below.

An example from one of my pages

@page "/mygridpage"

@using Syncfusion.Blazor.Grids

<style>

    .e-grid .e-headercelldiv {

        height: auto !important;

        line-height: normal !important;

    }

</style>

<SfGrid ID="ActivityGrid" DataSource="@mydatasource" AllowPaging="true" AllowFiltering="true"

        AllowResizing="true" AllowGrouping="false" AllowExcelExport="true" AllowSelection="true"

        AllowSorting="true" Height="100%" Width="100%">

    <GridColumns>

        <GridColumn Field=@nameof(MyModel.MyProperty) HeaderText="MyProperty">

            <HeaderTemplate>

                This is my property first Header

                <br/>

                This is my property Second Header

            </HeaderTemplate>

        </GridColumn>

    </GridColumns>

</SfGrid>

@code {

......

}