Change Group Header Position When Columns Are Locked

Environment

Product Progress Kendo UI Grid for jQuery
Operating System Windows 10 64bit
Preferred Language JavaScript

Description

How can I change the header position of the locked columns in a Kendo UI Grid?

Solution

The following example demonstrates how to change the group header position when locked columns are used to show them on the right table.

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

      <script>
        $(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: "https://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
            }
                     ]
          });
        });
      </script>
    </div>

See Also

In this article
Not finding the help you need? Improve this article