Kendo-grid locked column and grouping

Question

I have grid with locked (frozen) column and grouping like this:

demos.telerik.com/kendo-ui/grid/frozen-columns

But I have only one frozen column and small width.

And when I group by column with long string values (eg ship address), these group values in group header displayed in multiple lines.

Screen

How show group header in one line even if first part of grid (with locked columns) has small width? Source

 $(document).ready(function() {
        $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            ShipCountry: { type: "string" },
                            ShipName: { type: "string" },
                            ShipCity: { type: "string" },
                            ShipAddress: { type: "string" }
                        }
                    }
                },
                pageSize: 30,
                group: { field: "ShipName" } 
            },
            height: 540,
            sortable: true,
            reorderable: true,
            groupable: true,
            resizable: true,
            filterable: true,
            columnMenu: true,
            pageable: true,
            columns: [ {
                    field: "OrderID",
                    title: "Order ID",
                    locked: true,
                    lockable: false,
                    width: 50
                }, {
                    field: "ShipCountry",
                    title: "Ship Country",
                    width: 300
                }, {
                    field: "ShipCity",
                    title: "Ship City",
                    width: 300
                },{
                    field: "ShipName",
                    title: "Ship Name",
                    width: 300
                },  {
                    field: "ShipAddress",
                    width: 400
                }
            ]
        });
    });

Nikita Nikita · Accepted Answer · 2014-10-27T14:46:10

SOLUTION

Alexander Popov from telerik write this:

$(document).ready(function() {
        $("#grid").kendoGrid({
          dataBound: function(e){
            var grid = this;
            this.lockedTable.find(".k-grouping-row").each(function(index) {
              var arrow = $(this).find("a");
              grid.tbody.find(".k-grouping-row:eq("+index+") td").text($(this).text())
              $(this).find("p").text(" ").append(arrow);
            })
          },
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            ShipCountry: { type: "string" },
                            ShipName: { type: "string" },
                            ShipCity: { type: "string" },
                            ShipAddress: { type: "string" }
                        }
                    }
                },
                pageSize: 30
            },
            height: 540,
            sortable: true,
            reorderable: true,
            groupable: true,
            resizable: true,
            filterable: true,
            columnMenu: true,
            pageable: true,
            columns: [ {
                    field: "OrderID",
                    title: "Order ID",
                    locked: true,
                    lockable: false,
                    width: 50
                }, {
                    field: "ShipCountry",
                    title: "Ship Country",
                    width: 300
                }, {
                    field: "ShipCity",
                    title: "Ship City",
                    width: 300
                },{
                    field: "ShipName",
                    title: "Ship Name",
                    width: 300
                },  {
                    field: "ShipAddress",
                    lockable: false,
                    width: 400
                }
            ]
        });
    });

Kendo-grid locked column and grouping

1 Answers