Adjusting the Cell Text Wrapping in the TreeList Component

Environment

Product

Progress® Kendo UI® for Angular TreeList

Description

When expanding the TreeList row, if the text in the cell is too long, it will wrap at the beginning of the cell. How can I adjust the text wrapping so that it wraps under the initial text of the cell?

Solution

To adjust cell text wrapping in the Kendo UI for Angular TreeList component, add a custom CSS class to the TreeList Column component using the class property:

html

<kendo-treelist-column class="column-text-wrapping" ...>

Then, apply the following CSS to the custom class to adjust the text wrapping:

css

.k-treelist .k-grid-content tr td.column-text-wrapping {
    display: flex;
}

.k-treelist .k-table-td > .k-icon-wrapper-host {
    display: inline-block;
}

The following example demonstrates how to adjust the cell text wrapping in the TreeList component:

Change Theme

Theme

Loading ...

Suggested Links

• TreeList Component Overview
• Styling the Cells in the TreeList
• Styling the Rows in the TreeList
• Styling the Columns in the TreeList
• API Reference of the TreeList