Adjust Grid Row and Header Height to Make Them Smaller

Environment

Product	Progress® Kendo UI® Grid for jQuery
Operating System	All
Browser	All
Browser Version	All

Description

How can I set the heights of the Grid rows, including the header, to a minimum or a specific height value?

Solution

To adjust the size of the rows in both the body and the header, use CSS and specify the height and padding properties for the th elements inside the thead and tr, and the td elements inside the tbody of the Grid.

<div id="example">
    <div id="grid"></div>
    <script>
      $(document).ready(function() {
        $("#grid").kendoGrid({
          dataSource: {
            type: "odata-v4",
            transport: {
              read: "https://demos.telerik.com/service/v2/odata/Orders"
            },
            schema: {
              model: {
                fields: {
                  OrderID: {
                    type: "number"
                  },
                  Freight: {
                    type: "number"
                  },
                  ShipName: {
                    type: "string"
                  },
                  OrderDate: {
                    type: "date"
                  },
                  ShipCity: {
                    type: "string"
                  }
                }
              }
            },
            pageSize: 20,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
          },
          filterable: true,
          sortable: true,
          pageable: true,
          columns: [{
            field: "OrderID",
            filterable: false
          },
          "Freight",
          {
            field: "OrderDate",
            title: "Order Date",
            format: "{0:MM/dd/yyyy}"
          }, {
            field: "ShipName",
            title: "Ship Name"
          }, {
            field: "ShipCity",
            title: "Ship City"
          }
         ]
        });
      });
    </script>
    <style>
      .k-grid-header .k-header {
        height: 20px;
        padding: 0;
      }

      .k-grid tbody tr {
        line-height: 14px;
      }

      .k-grid tbody td {
        padding: 0;
      }
    </style>
  </div>

See Also

• Setting the Height of the Kendo UI Grid