how to change the background color in kendo pivot grid

2 posts, 0 answers
  1. Krishnan
    Krishnan avatar
    10 posts
    Member since:
    May 2016

    Posted 27 Oct 2016 Link to this post

    How do I change the background-color of the columnheader/rowHeader or grouping header in Kendo Pivot grid. I tried applying the following css in the custom.css but it is not getting affected with the grid. These classes are originally present in the kendo.common.min.css and I want to override it my custom CSS class.

    how do I change or override it?

    .k-grouping-header k-grid-header th.k-header{     background-color: #F7F7F7 !important;}
  2. Eduardo Serra
    Eduardo Serra avatar
    119 posts

    Posted 28 Oct 2016 Link to this post


    I have made the necessary CSS changes to achieve the style you wish to implement; you can take a look at in the Kendo UI Dojo here. The relevant part:

      #pivotgrid .k-button, #pivotgrid .k-header{
        background-color: #c50f0f;

    If you wish to keep the buttons' original color then remove #pivotgrid .k-button and only the background will be changed.

    I hope this helps.

    Eduardo Serra
    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
Back to Top