1. Home
  2. Forum
  3. Blazor
  4. ClipMode.Clip doesnt clip the content when it exceeds the given width

ClipMode.Clip doesnt clip the content when it exceeds the given width

Hi, I have an issue with the clip function, it doesn't clip as it should and just displays the whole string it gets from my databse.
Some of the files is Base64 encoded picture, and i dont need to show the whole string, but just a little of it, so i know what im working with. I feel like i have tried everything but i just doesnt clip the content. 

Here is my code:

@page "/test"

@using EmmaClientPortal.WebUI.Models

@inject ISignageService ISignageService

@using Syncfusion.Blazor

<h3>Database</h3>


<Syncfusion.Blazor.Grids.SfGrid DataSource="@Pagedata" TValue="Pagedatum" AllowResizing="false" Width="100%">

    <Syncfusion.Blazor.Grids.GridColumns>

        <Syncfusion.Blazor.Grids.GridColumn Field="@nameof(Pagedatum.DataName)" Width="200px" ClipMode="Syncfusion.Blazor.Grids.ClipMode.Clip"></Syncfusion.Blazor.Grids.GridColumn>

        <Syncfusion.Blazor.Grids.GridColumn Field="@nameof(Pagedatum.PageId)" Width="200px" ClipMode="Syncfusion.Blazor.Grids.ClipMode.Clip"></Syncfusion.Blazor.Grids.GridColumn>

        <Syncfusion.Blazor.Grids.GridColumn Field="@nameof(Pagedatum.PageData)" Width="600px" ClipMode="Syncfusion.Blazor.Grids.ClipMode.Clip"></Syncfusion.Blazor.Grids.GridColumn>

    </Syncfusion.Blazor.Grids.GridColumns>

</Syncfusion.Blazor.Grids.SfGrid>


<style>

    .e-grid .e-rowcell, .e-grid .e-headercell {

        overflow: hidden !important;

        white-space: nowrap !important;

        text-overflow: ellipsis !important;

    }

</style>


@code {

    public IEnumerable<Pagedatum> Pagedata { get; set; }


    protected override void OnInitialized()

    {

        Pagedata = ISignageService.GetPagedata();

    }

}

Skærmbillede 2024-07-30 122849.png


1 Reply
PS Prathap Senthil Syncfusion Team July 31, 2024 12:18 PM UTC

Hi Philip Dion Leo,



Based on the reported issue, we would like to clarify that it is the default behavior of the Grid component to adjust its width according to its parent element. Without a defined width, the grid will automatically adjust to fit the browser element. Additionally, the width of GridColumns will also adjust based on the Grid element's width, overriding any defined grid column widths. This behavior ensures that GridColumns adapt to the available width of the Grid. If you wish to use ClipMode.Clip, you need to set a static value for the Grid's width.

<SfGrid DataSource="@Pagedata" TValue="Pagedatum" AllowResizing="false" Width="300">

 

    <GridColumns>

 

        <GridColumn Field="@nameof(Pagedatum.DataName)" Width="200px" ClipMode="Syncfusion.Blazor.Grids.ClipMode.Clip"></GridColumn>

 

        <GridColumn Field="@nameof(Pagedatum.PageId)" Width="200px" ClipMode="Syncfusion.Blazor.Grids.ClipMode.Clip"></GridColumn>

 

        <GridColumn Field="@nameof(Pagedatum.PageData)" Width="600px" ClipMode="Syncfusion.Blazor.Grids.ClipMode.Clip"></GridColumn>

 

    </GridColumns>

 

</SfGrid>

 



Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#column-width



Additionally, it seems that the problem stems from an improper definition of theme and script references in the App.razor  or _Host.cshtml file. We suggest that you include the following script in your App.razor  or _Host.cshtml file to resolve the issue. We have attached a code snippet and sample for your reference, which should provide clear guidance on how to implement this solution. Please refer to the attached code snippet and sample for further assistance.


<head>

   

 

   @* Need to import Syncfusion.Blazor.Themes while using the below style*@

 

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet"/>

<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

@*Or you can use the below CDN*@

 

@*

    <link rel='nofollow' href=https://cdn.syncfusion.com/blazor/26.1.40/styles/bootstrap5.css rel="stylesheet" />

 

    <script src=https://cdn.syncfusion.com/blazor/26.1.40/syncfusion-blazor.min.js type="text/javascript"></script>*@

 

 

</head>

 



  1. CDN
 
Scripts- https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference
Styles - https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference

 
  1. Static Web Assets

Scripts - https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets

 

Styles - https://www.nuget.org/packages/Syncfusion.Blazor.Themes/


Or If you are using Syncfusion.Blazor single NuGet. If this is the case, we recommend referring to the attached code snippet and our documentation for further assistance.
Note:If you are  Syncfusion.Blazor single NuGet you don’t need to install the Syncfusion.Blazor.Themes  Nuegt.

<html lang="en">

 

<head>

    <!--<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />-->

 

    <!--Refer theme style sheet as below if you are using Syncfusion.Blazor Single NuGet-->

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />

 

 

</head>

 

<body>

------------


    <!--<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>-->

 

    <!--Use below script reference if you are using Syncfusion.Blazor Single NuGet-->

    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

</body>

 

</html>


Documentation: https://blazor.syncfusion.com/documentation/datagrid/getting-started

Regards,
Prathap Senthil


Loader.
Up arrow icon