New to Kendo UI for jQuery? Download free 30-day trial

Adjust Row Height with Virtual Scrolling


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


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


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>
      .k-virtual-scrollable-wrap td {
        font-size: 14px;        
        line-height: 13px;

      #grid .k-virtual-scrollable-wrap tr td{
        height: 15px

      var total = 1000000;
        dataSource: {
          transport: {
            read: function(options) {
              var take =,
                  skip =;
              var data = [];
              for (var i = skip; i < Math.min(skip + take, total); i++) {
                  OrderID: i,
                  ContactName: "Contact Contact Contact Contact Contact Contact Contact Contact Contact " + i,
                  ShipAddress: "Ship Address " + i
          schema: {
            total: function() {
              return total
          serverPaging: true,
          pageSize: 500
          {field:"ContactName", width:"200px"},
        height: 400,
        scrollable: {
          virtual: true

See Also

In this article