Edit this page

Adjust Grid Row and Header Height to Make Them Smaller

Environment

Product Grid for ProgressĀ® Kendo UIĀ®
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",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy