How to get elipsis clip mode for column header and cell with custom template

[Niklas Kjellander]

Hi,

I wonder how to get the clip mode configured for a column to apply when either the column header or cell has a custom template. For a column header or a grid cell with custom template the ellipsis is not shown, the content is just clipped.

I've prepared a repro in the playground that demonstrates what I want to accomplish.

https://blazorplayground.syncfusion.com/hXVJtcKtUhTQDkma

<SfGrid DataSource="@_gridItems"
         Height="500px"
         EnableStickyHeader="true"
         AllowSelection="false"
         EnableVirtualMaskRow="true"
         EnableVirtualization="false"
         AllowSorting="false"
         >
      <GridColumns>
        <GridColumn Field="@(nameof(GridItemModel.Timestamp))" HeaderText="Item created" AllowSorting="false" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip">
            <HeaderTemplate>
                <div style="display: flex; align-items: center;">
                    <span class="e-headertext">@(nameof(GridItemModel.Timestamp))</span>
                    <span class="e-icons e-icon-descending" style="margin-left: 20px;"></span>
                </div>
            </HeaderTemplate>
        </GridColumn>
        <GridColumn Field="@(nameof(GridItemModel.Id))"  HeaderText="Item identity" AllowSorting="false" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip" >
           <Template>
                @{
                    var item = context as GridItemModel;
                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="4" cy="4" r="4" fill="#@((item.Status == "Valid" ? "00FF00" : "FF0000"))" stroke="#CFCFCF"/>
</svg>
                    @item.Id
                }
           </Template>
           </GridColumn>
           <GridColumn Field="@(nameof(GridItemModel.DataValue))"  HeaderText="Item data value" AllowSorting="false" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip" />
      </GridColumns>
</SfGrid>
@code {

    public GridItemModel[] _gridItems = new GridItemModel[]
    {
        new GridItemModel("B5A556AA-E1D5-4685-88F7-9CAA40F973FA", DateTime.Now, "Valid", "Lorem impsum"),
    };
 public record GridItemModel(string Id, DateTime Timestamp, string Status, string DataValue);
}


Kind regards,

Niklas

[Prathap Senthil]

Hi Niklas Kjellander,

Based on the reported issue, we suggest using the CSS modification workaround provided below to achieve your requirement. Please refer to the code snippet and sample below for your reference.

 <GridColumn Field="@(nameof(GridItemModel.Id))"  HeaderText="Item identity" AllowSorting="false" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip" >

           <Template>

                @{

                    var item = context as GridItemModel;

                    <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">

<circle cx="4" cy="4" r="4" fill="#@((item.Status == "Valid" ? "00FF00" : "FF0000"))" stroke="#CFCFCF"/>

</svg>

                     <span class="ellipsis-text">@item.Id</span>

                }

           </Template>

<style>

  .ellipsis-text {

 

        white-space: nowrap;

 

        overflow: hidden;

 

        text-overflow: ellipsis;

 

        display: block;

 

    }

</style>

 

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

Regards,
Prathap S