Edit this page

Persist the Resizing of the Last Grid Row When Virtual Scrolling Is Enabled

Environment

Product Progress Kendo UI Grid
Operating System Windows 10 64bit
Browser Google Chrome
Browser Version 61
Made with version 2017.3.913

Description

The last row of the Grid with virtualization gets hidden if the horizontal scrollbar appears after resizing the column.

How can I persist the resizing of the last row in the Kendo UI Grid when virtual scrolling is enabled?

Solution

The reason for this issue is that the scrollbar is not part of the initial Grid height.

To ensure that the row will be visible, programmatically resize the Grid after the column resizing.

<div id="grid" style="height: 380px;width:400px"></div>
    <style>
      .k-virtual-scrollable-wrap td {
        font-size: 14px;        
        white-space:nowrap;
        line-height: 13px;
      }

      #grid .k-virtual-scrollable-wrap tr td{
        height: 15px
      }
    </style>

    <script>
      var total = 101;
      $("#grid").kendoGrid({
        columnResize: function(e) {
          e.sender.resize()
        },
        dataSource: {
          transport: {
            read: function(options) {
              var take = options.data.take,
                  skip = options.data.skip;
              var data = [];
              for (var i = skip; i < Math.min(skip + take, total); i++) {
                data.push({
                  OrderID: i,
                  ContactName: "Contact Contact Contact Contact Contact Contact Contact Contact Contact " + i,
                  ShipAddress: "Ship Address " + i
                });
              }
              options.success(data);
            }
          },
          schema: {
            total: function() {
              return total
            }
          },
          serverPaging: true,
          pageSize: 500
        },
        resizable:true,
        columns:[
          {field:"OrderID"},
          {field:"ContactName", width:"200px"},
          {field:"ShipAddress"}
        ],
        height: 400,
        scrollable: {
          virtual: true
        }
      });
    </script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy