HOW TO GIVE STYLES TO KENDO UI GRID HEADER

Hi All,

To give styles to KENDO  Grid we need to overwrite their inbuilt  available CSS class properties, Here is solution

 Use the following to do this,

     .k-header
    {
        background-image: url('<url of the image>');
        background-position: <value>;
        background-repeat:  <value>;
        border-collapse:  <value>;
        border-right-color: # <HEX value>;
        border-style:  <value>;
        border-width:  <value>px;
        color: # <HEX value>;
        font:  <value>;
        font-weight:  <value>;
        padding:  <value>px  <value>px  <value>px  <value>px;
        text-align:  <value>;
        vertical-align:  <value>; 
    }

Example:

     .k-header
    {
        background-image: url('../../Images/GridHeaderBg.png');
        background-position: center;
        background-repeat: repeat;
        border-collapse: collapse;
        border-right-color: #EFEFEF;
        border-style: solid;
        border-width: 1px;
        color: #EFEFEF;
        font: bold 15px Verdana, "Helvetica Neue" ,Helvetica,sans-serif;
        font-weight: bold;
        padding: 8px 0px 8px 4px;
        text-align: center;
        vertical-align: top; 
    }

Note:

Here I am giving Data field with preceding its object name.