CODEWITHSUNDEEP
csskendo-uitelerikkendo-gridtelerik-grid
Minh Toan
Minh Toan

Reputation: 57

how to wrap text in kendo grid

I have kendo grid and my problem is when the text too long I cannot make that text break line , I tried to make css but it does not work well. Here is my css:

    #projectslistgrid .k-grid-content  td{
    word-wrap:break-word;
}

This is image:

enter image description here

Please help me, thanks.

Upvotes: 0

Views: 10682

Answers (1)

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

Please try with the below code snippet.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css" />

    <script src="https://kendo.cdn.telerik.com/2016.1.412/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
    <style>
        .breakWord120 {
            /*max-width: 120px !important;*/
            word-break: break-all !important;
            word-wrap: break-word !important;
            /*vertical-align: top;
            line-height: 15px;*/
        }
    </style>
</head>
<body>


    <div id="example">
        <div id="grid"></div>

        <script>

            var products = [{
                ProductID: 1,
                ProductName: "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,
                ProductName: "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,
                ProductName: "AniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrupAniseedSyrup",
                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"
                }
            }];

            $(document).ready(function () {
                $("#grid").kendoGrid({
                    dataSource: {
                        data: products,
                        schema: {
                            model: {
                                fields: {
                                    ProductName: { type: "string" },
                                    UnitPrice: { type: "number" },
                                    UnitsInStock: { type: "number" },
                                    Discontinued: { type: "boolean" }
                                }
                            }
                        },
                        pageSize: 20
                    },
                    height: 550,
                    scrollable: true,
                    sortable: true,
                    filterable: true,
                    pageable: {
                        input: true,
                        numeric: false
                    },
                    columns: [
                        {
                            field: "ProductName", title: "ProductName", attributes: {
                                "class": "breakWord120",

                            }
                        },
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
                        { field: "UnitsInStock", title: "Units In Stock" },
                        { field: "Discontinued" }
                    ]
                });
            });
        </script>
    </div>


</body>
</html>

Let me know if any concern.

Upvotes: 6

Related Questions