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

Change Header and Pager Appearance


Product Progress® Kendo UI® Grid for jQuery


  1. If the changes will be multiple, you can go on creating your own theme:

  1. For lesser requirements, you can check this sample which demonstrates how to change the background color and overall appearance of the Grid header/footer and the pager.


        border: 1px solid #d5d5d5;
      .k-grid .k-grid-header .k-header{
        border-bottom: none;
        background-color: gray;
      .k-grid .k-grid-header .k-header a{
        color: white;
        background-color: gray;
        color: white;
      .k-pager .k-link.k-selected
        background-color: lime;

    <script src=""></script>

    <div id="example">
      <div id="grid"></div>

        $(document).ready(function() {
            dataSource: {
              data: products,
              schema: {
                model: {
                  fields: {
                    ProductName: { type: "string" },
                    UnitPrice: { type: "number" },
                    UnitsInStock: { type: "number" },
                    Discontinued: { type: "boolean" }
              pageSize: 3
            sortable: true,
            scrollable: false,
            filterable: true,
            pageable: {
              input: true,
              numeric: true
            columns: [
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
              { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
              { field: "Discontinued", width: "130px" }

In this article