Here is the sample of kendo grid in mvc I would like to text-wrap the column in the grid. Could anyone please help? I have already tried using the css but still its not working. The line is moving out of the box...

columns.Bound(o => o.SectionClass).Width(100).Title("Class");
                        columns.Bound(o => o.Title).Width(100).HtmlAttributes(new { @class = "txtovflw" });
                        columns.Bound(o => o.Description).Width(100).HtmlAttributes(new { @class = "txtovflw" });
                        columns.Bound(o => o.DueDate).Width(80).Title("Due Date");
                        columns.Template(e => { }).ClientTemplate(
                         "<a onclick=\"ViewHW( '#=data.SectionHomeWorkId#')\" id=\"viewHW\" class=\"view-grid-img grid-view-btn\" title=\"View\" data-id=\"<#= data.SectionHomeWorkId
#>\">View</a>")
                         .Title("View")
                         .Width(50);
                    })

.txtovflw
{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Here is the sample of kendo grid in mvc I would like to text-wrap the column in the grid. Could anyone please help? I have already tried using the css but still its not working. The line is moving out of the box...

columns.Bound(o => o.SectionClass).Width(100).Title("Class");
                        columns.Bound(o => o.Title).Width(100).HtmlAttributes(new { @class = "txtovflw" });
                        columns.Bound(o => o.Description).Width(100).HtmlAttributes(new { @class = "txtovflw" });
                        columns.Bound(o => o.DueDate).Width(80).Title("Due Date");
                        columns.Template(e => { }).ClientTemplate(
                         "<a onclick=\"ViewHW( '#=data.SectionHomeWorkId#')\" id=\"viewHW\" class=\"view-grid-img grid-view-btn\" title=\"View\" data-id=\"<#= data.SectionHomeWorkId
#>\">View</a>")
                         .Title("View")
                         .Width(50);
                    })

.txtovflw
{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

• javascript
• asp-mvc
• razor
• kendo-ui
• kendo-grid

5 Answers 5

Try this, it will work:

word-wrap: break-word;

or

word-break: break-all;

You are on the correct track with your .txtovflw class, however make sure that you set your table layout to fixed to prevent your table from overflowing it's container.

.k-grid table {
    table-layout: fixed;
}

You'll particularly run into this problem if one of your columns is, for example, email adresses and you have a long unbroken single string.

Source: http://www.telerik./forums/how-can-i-get-ellipsis-instead-of-wrapping

If you want to keep the column content in the column you need to use white-space: normal

.txtovflw
{
   white-space: normal;
}

But by default kendo normally does that.

To word wrap a single column in the grid, create a CSS class.

.wordWrapGridColumn {
    overflow: visible !important;
    white-space: normal !important;
}

Then add the class to the column using HtmlAttributes.

columns.Bound(a => a.Description).Width(100)
     .HtmlAttributes(new { @class = "wordWrapGridColumn" });

Add the following css to you code, it will be applied to all grid columns and you won't need to add style attribute to individual grid column.

<style>
    .k-grid td {
        word-break: break-all !important;
        word-wrap: break-word !important;
    }
</style>