RowHeight in Blazor DataGrid Not Working

[Simon]

Hi All,

I have the following DataGrid:

<AuthorizeView Roles="admin">

    <Authorized>

        <SfGrid ID="MainGrid"

                TValue="EmuVersion"

                AllowTextWrap="true"

                AllowPaging="true"

                Toolbar="@(new List<string>() { "Search", "Add", "Edit", "Delete" })"

                AllowSelection="true"

                RowHeight="60">

            <SfDataManager Url="api/emuversion" Adaptor="Adaptors.WebApiAdaptor"></SfDataManager>

            <GridPageSettings PageSize="10"></GridPageSettings>

            <GridEvents OnActionFailure="@ActionFailureHandler" OnActionBegin="@ActionBeginHandler" OnActionComplete="@ActionCompleteHandler" TValue="EmuVersion"></GridEvents>

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

            <GridEditSettings AllowAdding="true"

                              AllowDeleting="true"

                              AllowEditing="true"

                              Mode="EditMode.Dialog"

                              Dialog="DialogParams"

                              ShowDeleteConfirmDialog="true"></GridEditSettings>

            <GridColumns>

                <GridColumn Field=@nameof(EmuVersion.Id)

                            HeaderText="ID"

                            Type="ColumnType.Number"

                            Visible="false"

                            IsIdentity="true"

                            IsPrimaryKey="true">

                </GridColumn>

               OTHER GRID COLUMNS HERE

               <GridColumn

                <GridColumn Field="Comments" HeaderText="Comments" Type="ColumnType.String"></GridColumn>

            </GridColumns>

        </SfGrid>

    </Authorized>

However, when I run the app, the Grid shows ALL text in the final "Comments" column (which can be thousands of characters, depending on the row).

The only CSS I have is as follows:

<style>

    .nav-link {

        padding: 0rem 0rem;

        border-radius: 0rem;

    }

    #filemanager_breadcrumbbar .e-addressbar-ul {

        display: none;

    }

    .e-filemanager .e-large-icons .e-list-item {

        height: 112px;

        width: 120px;

    }

    div#MainGrid_dialogEdit_wrapper {

        max-height: none !important;

    }

</style>

Please can you let me know how I can restrict the Row Height, irrespective of the number of characters in the cell? I'm not concerned about text being cut off mid word, or having a scrollbar, I just need all grid rows to be fixed to a certain height.

Thanks in advance

Simon

[Jeevakanth Palaniappan]

Hi Simon, 

Greetings from Syncfusion support. 

We have analyzed the provided code snippet and we could see that you have enabled both AllowTextWrap and RowHeight property. AllowTextWrap property is to render the cell content of the grid to wrap to the next line if it exceeds the boundary of the cell width. Eventually, the height of that particular rows will be increased. So if you want to render all the rows in a specific height and not concerned about the text being cutoff then we suggest you to remove the AllowTextWrap property or set it to false to resolve your issue. 

Please refer the below documentation link for your reference. 

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

https://blazor.syncfusion.com/documentation/datagrid/cell/#clip-mode  

Regards, 

Jeevakanth SP. 

[Simon]

Hi Jeevakanth,

Thanks for the reply.

If I can't wrap text, and then cut it off at a specific length, then there's really no point setting the row height?

Basically, how can I show 2-3 lines of text in some of my columns, even when the actual text could be many hundreds of lines?

For example:

Column 5 contains the full "Lorem ipsum.." text, which is almost 6 times the length shown.

Thanks in advance

Simon

[Vignesh Natarajan]

Hi Simon, 

Thanks for the update.  

Query: ” If I can't wrap text, and then cut it off at a specific length, then there's really no point setting the row height?” 

We have analyzed your query and we suggest you to use ClipMode property of GridColumn to clip the content of the cell exceeds the particular width. EllipsisWithTooltip mode of ClipMode will clip the contents and display the entire text in a tooltip. Refer the below code example and screenshot for your reference 

<SfGrid DataSource="@Orders" Toolbar="@(new List<string>() { "Search", "Add", "Edit", "Delete" })"  

     AllowSelection="true"RowHeight="60" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Height="315"> 

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

    <GridColumns> 

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

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

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

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

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

    </GridColumns> 

</SfGrid> 

 

Note: Kindy ignore the AllowTextWrap property of Grid to use ClipMode feature.  

Refer the below screenshot for your reference 

 

 

For your convenience we have prepared a sample using above solution, which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/160383/ze/DataGrid461726612  

Refer our UG documentation for your reference 

https://blazor.syncfusion.com/documentation/datagrid/cell/#clip-mode  

Please get back to us if you have further queries.  

Regards, 

Vignesh Natarajan  

[Simon]

Hi Vignesh,

Thanks for the reply, but it's still not what I am after.

The text in the final column could be hundreds of lines long and showing it in a tooltip would not be realistic.

As per my previous image, I would like to be able to set the height of the row, and then only show the text that will fit to the selected width AND height of the cell.

In my screenshot, the contents of Columns 3 & 5 would be larger than the WIDTH of the cell, so would need to wrap. The text in Column 5 would also need to be truncated, to only show the text that fits in the HEIGHT of the cell.

Any thoughts on how to accomplish this would be gratefully received.

Regards

Simon

[Vignesh Natarajan]

Hi Simon,  

 

Thanks for the update.  

 

Query: “the contents of Columns 3 & 5 would be larger than the WIDTH of the cell, so would need to wrap.” 

 

From your query we understand that you want to wrap the text to multiline and clip the excess text. We have achieved your requirement using AllowTextWrap property and CustomAttributes of GridColumn. AllowTextWrap property is used to wrap the grid content. Using CustomAttributes we can add specific class to particular column. We have applied to styles to particular column using CSS. Refer the below code example for your reference 

 

<SfGrid DataSource="@Orders" AllowTextWrap="true" Toolbar="@(new List<string>() { "Search", "Add", "Edit", "Delete" })" AllowSelection="true"RowHeight="60" AllowSorting="true" AllowFiltering="true" AllowPaging="true" Height="315"> 

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

    <GridColumns> 

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

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

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

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

        <GridColumn Field=@nameof(Order.Comments) HeaderText="Customer Name" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr" }})" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

<style> 

    td.e-rowcell.e-attr { 

        display: -webkit-box; 

        max-height: 60px; 

        -webkit-line-clamp: 3; 

        -webkit-box-orient: vertical; 

        overflow: hidden; 

    } 

</style> 

 

  

Refer the below screenshot for output of above example.  

 

 

  

For your convenience we have attached the sample prepared using above solution. Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/160383/ze/DataGrid-938069793  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/cell/#custom-attributes  

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

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan  

 

[Simon]

Hi Vignesh,

Thanks for the reply.

All good now.

Regards

Simon

[Vignesh Natarajan]

Hi Simon,  

Thanks for the update. 

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan    

[Andy Terbovich]

How can we apply a class like this for the header row?

Using the header cell wrap feature, I want to only wrap a max of 3 lines. If you resize the window and you don't have autofit on a row, your header row can get huuuuge.

Normal Width:

When window width is slightly reduced:

[Prathap Senthil]

Hi Andy,

Based on your requirements, we suggest using the following CSS customization to achieve your goals. Please refer to the code snippet and sample below for your reference.

<style>

    .e-grid .e-headercelldiv {

        display: -webkit-box;

        max-height: 60px;

        -webkit-line-clamp: 3;

        -webkit-box-orient: vertical;

        overflow: hidden;

    }

 

</style>

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

Regards,
Prathap Senthil