Displaying Ellipsis for Long Text in Angular Grid Cells
Environment
| Product | Progress® Kendo UI® Data Grid for Angular |
Description
I want to show an ellipsis (...) in the Grid cell when the text exceeds a certain character limit. How can I achieve this in Kendo UI for Angular Grid?
This knowledge base article also answers the following questions:
- How to truncate text in Kendo UI for Angular Grid cell?
- How to use Angular pipes for text truncation in Grid cells?
- How to use custom templates for showing ellipsis in Grid cells?
Solution
In the scenario where the content within a cell of the Kendo UI for Angular Grid exceeds a specific character limit, and there's a need to display an ellipsis (...) to indicate overflow, two primary approaches can be used:
Using Custom Truncation Function
To implement text truncation with an ellipsis, you can use the CellTemplateDirective of the Grid. This directive allows customizing the cell content and facilitates the integration of a custom truncation function.
The following code snippets demonstrate how to use CellTemplateDirective to truncate the text in the Grid cells and display an ellipsis for the clipped content:
<ng-template kendoGridCellTemplate let-dataItem>
<span>{{ truncate(dataItem.ProductName, 70) }}</span>
</ng-template>public truncate(source, size): string {
return source.length > size ? source.slice(0, size - 1) + '…' : source;
}This approach involves creating a custom truncate function that checks the length of the provided string. If the string exceeds the specified limit (in this case, 70 characters), the function slices the string to the limit minus one and appends an ellipsis. Otherwise, the function returns the original string.
Using Angular Slice Pipe
Another performance-friendly option is to use Angular's slice pipe for text truncation within the cell template of the Grid. Pipes offer a declarative approach to transform data directly within the template.
This method is straightforward and leverages Angular's built-in functionality to slice the string directly in the template.
<ng-template kendoGridCellTemplate let-dataItem>
<span>{{ dataItem.ProductName | slice:0:70 }} ...</span>
</ng-template>