剑道网格锁定列和分组

Question

我有锁定（冻结）列的网格和这样的分组：

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

但我只有一个冻结列且宽度较小。

当我用长字符串值（例如船地址）按列分组时，组标题中的这些组值显示为多行。

Screen

即使网格的第一部分（带有锁定的列）宽度较小，如何在一行中显示组标题？ 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
                }
            ]
        });
    });

Answer 1

解决方案

telerik 的 Alexander Popov 写道：

$(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
                }
            ]
        });
    });