Prevent Text Wrapping in the Grid
Environment
Product | Progress® Telerik® UI Grid for ASP.NET MVC |
Product Version | 2017.3.1026 |
Description
How can I prevent the text wrapping of a Grid item in a single-line stop?
Solution
Use the following CSS implementation to prevent wrapping in all grid cells.
.k-grid td{
white-space: nowrap;
}
Use the following implementation to prevent wrapping in specific grid cells.
- Use the
attributes
configuration of the grid to add a class to specific columns. - Prevent wrapping only for the elements with the specified class.
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
reorderable: true,
filterable: true,
sortable: true,
pageable: true,
columns: [{
title: "OrderID",
field:"OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
attributes: {class: "nowrap"}, // Add the nowrap class to the attributes of the column.
width: 100,
}, {
field: "ShipCity",
title: "Ship City",
width: 110
}
]
});
});
</script>
<style>
.k-grid .nowrap {
white-space: nowrap;
}
</style>