Grid: Do not wrap text in cells if column is not big enough

[Gerald]

I would like to prevent the grid cells from wrapping and increasing the row height.

Instead I just want the text to be cut off and ending with ellipsis. I tried styling with column classes "white-space: nowrap", but that does not work.

Is that possible?

 

Thank you!

[Zornitsa]

Hi Gerald,

You are on the right track regarding the usage of the 'white-space: nowrap' CSS declaration to achieve the desired behavior. The mentioned styling should be applied to the Grid cells by using the following class selector:

.k-grid .k-table-td {
    white-space: nowrap;
}

 Here is also a StackBlitz example to better illustrate the approach:

• https://stackblitz.com/edit/angular-vs1dkk 

Feel free to also check the following article on how to apply custom styles to our components:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/custom-styles/

Hope this helps. Feel free to reply in case any further questions arise.

Regards,
Zornitsa
Progress Telerik

[Gerald]

Hello Zornitsa!

 

I would like to achieve this result only for specific columns. Is that also possible?

 

BR,

Gerald

[Zornitsa]

Hi Gerald,

The developer can apply the 'white-space: nowrap' CSS styling only for a specific column by using the style property of the corresponding ColumnComponent: 

 <kendo-grid-column [style]="{ 'white-space': 'nowrap' }"  field="ProductName" title="Name"></kendo-grid-column>

Below I am sharing a StackBlitz example that demonstrates this suggestion:

• https://stackblitz.com/edit/angular-vs1dkk-jut9g1  

Alternatively, the approach from my previous reply can also be extended to achieve this behavior with the addition of setting a custom class to the particular column:

<kendo-grid-column [class]="'customClass'" field="ProductName" title="Name"> </kendo-grid-column>

.k-grid .k-table-td.customClass {
     white-space: nowrap;
}

Here is also the example updated with the above code:

• https://stackblitz.com/edit/angular-vs1dkk 

I hope the provided information is helpful. Let me know if you have more questions on the matter. 

Regards,
Zornitsa
Progress Telerik