How to set multiline column in kendo ui grid

I need to set a column of a kendo ui grid to multiline.

Right now the specific column has to much data in it, so its shortened by ... Is there a possibility to make that column multiline?

回答1:

You can set multi-line column in kendo ui grid by using following code snippet.

<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"
                        }
                    },
.......
.......

Full Code:-

<!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>

Let me know if any concern.

回答2:

Yes you can! You can set the headerAttributes or attributes to specify the colspan in your columns definitions:

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 }
}