Cant seem to apply any css override styles to the KendoGrid header

3 posts, 1 answers
  1. Cedric Gaines
    Cedric Gaines avatar
    12 posts
    Member since:
    Dec 2004

    Posted 18 Oct 2017 Link to this post

    Maybe I'm overlooking something easy, but I can't seem to simply change the background color of my kendo grid header.

     

    This is what I have, (it everything runs, but the base theme never changes)... (no centering, no bg color change).  What am I missing?

    CSS

    .k-header{
    text-align: center;
    background-color: #ff0099;
    }

     

    JS

    $("#agencyListGrid").kendoGrid({
    columns: [{
    field: "agencyName",
    title: "Agency"
    },
    {
    field: "agencyID",
    title: "View",
    width: 100
    },
    {
    field: "agencyID",
    title: "Archive",
    width: 100
    }],
    dataSource: {
    data: this.agencyList.agencies,
    pageSize: 15
    },
    height: 500,
    pageable: {
    pageSizes: true,
    buttonCount: 5
    }
    });

  2. Answer
    Preslav
    Admin
    Preslav avatar
    516 posts

    Posted 19 Oct 2017 Link to this post

    Hello Cedric,

    A possible solution to achieve the desired result might be using a CSS code similar to this one:

    <style>
      .k-grid-header th.k-header{
        text-align: center;
        background-color: #ff0099;
      }
    </style>

    For a runnable example, check my testing Dojo: http://dojo.telerik.com/ULUDe

    Additionally, if you are interested in my workflow how I am finding the required CSS selectors, I recorded a short video for your reference:
    I hope this helps.
     

    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Cedric Gaines
    Cedric Gaines avatar
    12 posts
    Member since:
    Dec 2004

    Posted 19 Oct 2017 Link to this post

    Awesome, this helped me A LOT!!!

    Thanks!

Back to Top