css - showcase - telerik ui demos
Cómo configurar columna multilínea en la grilla de kendo ui (2)
¡Sí tu puedes! Puede establecer los atributos de encabezado o atributos para especificar el colspan en las definiciones de sus columnas:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.headerAttributes http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration -columns.attributes http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.width
{
field: "Your Field",
title: "Your Title",
attributes: { "colspan": 2 },
headerAttributes: { "colspan": 2 }
}
Necesito establecer una columna de una grilla de kendo ui en multilínea.
En este momento, la columna específica tiene demasiados datos, por lo que se abrevia por ... ¿Existe la posibilidad de que esa columna sea de líneas múltiples?
Puede establecer una columna de varias líneas en la cuadrícula de kendo ui utilizando el siguiente fragmento de código.
<style>
.breakWord20 {
word-break: break-all !important;
word-wrap: break-word !important;
vertical-align: top;
}
.k-grid-header .k-header {
overflow: visible !important;
white-space: normal !important;
}
</style>
......
......
columns: [
{
field: "ProductNameProductNameProductNameProductNameProductName", headerAttributes: {
"class": "breakWord20"
}
},
.......
.......
Código completo: -
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<style>
.breakWord20 {
word-break: break-all !important;
word-wrap: break-word !important;
vertical-align: top;
}
.k-grid-header .k-header {
overflow: visible !important;
white-space: normal !important;
}
</style>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.ui.core.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<!--<script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.timezones.min.js"></script>-->
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
var products = [{
ProductID: 1,
ProductNameProductNameProductNameProductNameProductName: "Chai",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 2,
ProductNameProductNameProductNameProductNameProductName: "Chang",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "24 - 12 oz bottles",
UnitPrice: 19.0000,
UnitsInStock: 17,
UnitsOnOrder: 40,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 1,
CategoryName: "Beverages",
Description: "Soft drinks, coffees, teas, beers, and ales"
}
}, {
ProductID: 3,
ProductNameProductNameProductNameProductNameProductName: "Aniseed Syrup",
SupplierID: 1,
CategoryID: 2,
QuantityPerUnit: "12 - 550 ml bottles",
UnitPrice: 10.0000,
UnitsInStock: 13,
UnitsOnOrder: 70,
ReorderLevel: 25,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
ProductID: 4,
ProductNameProductNameProductNameProductNameProductName: "Chef Anton''s Cajun Seasoning",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "48 - 6 oz jars",
UnitPrice: 22.0000,
UnitsInStock: 53,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}, {
ProductID: 5,
ProductNameProductNameProductNameProductNameProductName: "Chef Anton''s Gumbo Mix",
SupplierID: 2,
CategoryID: 2,
QuantityPerUnit: "36 boxes",
UnitPrice: 21.3500,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: true,
Category: {
CategoryID: 2,
CategoryName: "Condiments",
Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
}
}];
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: ''number'' },
UnitsInStock: { type: ''number'' },
ProductNameProductNameProductNameProductNameProductName: { type: ''string'' },
QuantityPerUnit: { type: ''string'' },
UnitPrice: { type: ''number'' },
}
}
},
},
resizable: true,
columns: [
{
field: "ProductNameProductNameProductNameProductNameProductName", headerAttributes: {
"class": "breakWord20"
}
},
{ field: "UnitsInStock", title: "UnitsInStock" },
{ field: "QuantityPerUnit", title: "QuantityPerUnit" },
{ field: "UnitPrice", title: "UnitPrice" },
]
});
});
</script>
</body>
</html>
Avíseme si hay alguna preocupación.