Adjust Row Height with Virtual Scrolling

Environment

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

Description

How can I adjust row height when virtual scrolling is enabled in the Kendo UI Grid widget for jQuery?

Solution

The following example demonstrates how to adjust the row height of the Grid when the virtual scrolling functionality is enabled.

    <div id="grid" style="height: 380px"></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 = 1000000;
      $("#grid").kendoGrid({
        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
        },
        columns:[
          {field:"OrderID"},
          {field:"ContactName", width:"200px"},
          {field:"ShipAddress"}
        ],
        height: 400,
        scrollable: {
          virtual: true
        }
      });
    </script>

See Also

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