Change Grid Height When Using Frozen Columns

Change Grid Height When Using Frozen Columns

When you use frozen columns, the height of the Grid has to be fixed.

This approach ensures that the Grid is able to calculate and construct its layout properly. The following example demonstrates how to resize the Grid even if you use frozen columns. The idea is to change the height style of the <div> wrapper element and then call the resize method of the widget.

<div id="example">
  <p>Group by the ShipCountry column and collapse some groups.</p>
  <div id="grid"></div>

    $(function() {

      function attachGroupResizeHandler(grid) {
        grid.wrapper.find(".k-grouping-row .k-icon").on("click", function(){

      function detachGroupResize(e) {
        e.sender.wrapper.find(".k-grouping-row .k-icon").off("click")

      function onDataBound(e) {

      function resizeGrid(grid) {
        setTimeout(function() {
          var lockedContent = grid.wrapper.children(".k-grid-content-locked")
          var content = grid.wrapper.children(".k-grid-content");




        dataSource: {
          type: "odata",
          transport: {
            read: "//"
          schema: {
            model: {
              fields: {
                OrderID: { type: "number" },
                ShipCountry: { type: "string" },
                ShipName: { type: "string" },
                ShipCity: { type: "string" },
                ShipAddress: { type: "string" }
          pageSize: 15
        height: 540,
        dataBinding: detachGroupResize,
        dataBound: onDataBound,
        groupable: true,
        resizable: true,
        pageable: true,
        columns: [ {
          field: "OrderID",
          title: "Order ID",
          locked: true,
          lockable: false,
          width: 150
        }, {
          field: "ShipCountry",
          title: "Ship Country",
          width: 300
        }, {
          field: "ShipCity",
          title: "Ship City",
          width: 300
          field: "ShipName",
          title: "Ship Name",
          locked: true,
          width: 300
        },  {
          field: "ShipAddress",
          lockable: false,
          width: 400


See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

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