Kendo Grid - Column Headers/Titles Remove Ellipsis

[Joshua]

Hello,

I have an issue with the Kendo Grid in Chrome, however it loads just find in IE and Firefox. You can see by the attached photos, but in Chrome, the column title fields have ellipses added to them, while the other browsers simply display the full text. The data being populated in the grid below the titles is exactly the same. I have not found any explicit way to disable the use of the ellipsis, and I cannot explicitly declare the width as the fields extend beyond the parent element on the page (and in this instance, we are okay with that). 

Does anyone have any suggestions? 

Thanks.

[Joshua]

I would also like to note that in the attached images, these are just the first few columns in the grid, as the rest of the columns are business sensitive and these first few generic explain the issue well enough that I didn't require to list all of them. Assume that all the columns have the filterable ability on them (thus adding the filter icon on them).

[Dimo]

Hello Joshua,

The Grid uses ellipsis by default for all its cells, when the cell content cannot fit. It seems that in your case the column widths are very close to the "edge case", which triggers the dots only in some browsers. Such minor discrepancies are considered normal.

If changing (increasing) the column widths is not possible, you can disable ellipsis for the header cells with custom CSS code:

.k-grid .k-grid-header th.k-header > .k-link
{
   text-verflow: initial;
}

Regards,
Dimo
Telerik

 

 

[Jon]

I think you should disable ellipses by default. Who wants all their text truncated with ... on it by default? I just tried bringing a grid up on my cell phone and it is completely unusable. Nothing but ellipses all over the place. Same app, but, implemented using the ASP.NET AJAX controls and it is fine. The grid expands beyond the width of the screen with a scroll bar added. I think this is what the default behavior should be for the Blazor controls. 

[Dimo]

@Jon

The Kendo UI Grid is

• scrollable by default
• which renders two tables for the header and data area
• which requires fixed table layout to sync the column widths between the two tables
• which enables ellipsis in case there is clipped overflowing content

Here is how to implement the opposite behavior: Use auto table layout with the Kendo UI Grid

[Joshua]

@Dimo, thanks, that solved my problem!