[Solved] Setting the styles of the Headers and Rows

[Reid]

Hi all,

Can someone share an example of setting the font properties of the header, footer, rows and selected rows of the grid?

Appreciated,

Reid

[Dimo]

Hi Reid,

You can use the following CSS selectors to set font styles:

.t-grid .t-header {  } /* header font */

.t-grid .t-header .t-link {  }  /* header text color */

.t-grid .t-footer {  }  /* footer */

.t-grid tr {  }  /* data rows  */

.t-grid tr.t-state-selected {  }  /* selected data rows  */


Kind regards,
Dimo
the Telerik team

[Reid]

HI Dimo,

Thanks very much for this.  Any examples of applying these selectors? 

Appreciated!

Reid

[Dimo]

Hello Reid,

Did you try the suggested CSS selectors. Did you encounter any issues?

Regards,
Dimo
the Telerik team

[Reid]

Dimo,

Sorry for not following up sooner.  I am not sure how to apply these selectors.  Can you give me a small example?

Thanks,

Reid

[Dadv]

Hi,

Add an extra CSS file (after the telerik css) and insert something like this :
/* header font */
.t-grid .t-header { color : Red;background-color:#2e2e2e;  } 

 /* header text color */
.t-grid .t-header .t-link {  color : Green;background-color:Red; 
} 

.t-grid .t-footer { ... }  /* footer */

.t-grid tr { ...  }  /* data rows  */

.t-grid tr.t-state-selected { ... }  /* selected data rows  */

and so on..

But be careful , Telerik MVC css use common css class for all the component.

a way to provide specific style for a grid is to embedded it in a div for example :



<div id="myGrid">
<!-- Your grid code -->
</div>


then 

you can replace the css code before by :

/* header font */
#myGrid .t-grid .t-header { color : Red;background-color:#2e2e2e;  } 

 /* header text color */
#myGrid .t-grid .t-header .t-link {  color : Green;background-color:Red; 
} 

#myGrid .t-grid .t-footer { ... }  /* footer */

#myGrid .t-grid tr { ...  }  /* data rows  */

#myGrid .t-grid tr.t-state-selected { ... }  /* selected data rows  */


Look's like what you want ?

ps: don't forget to link your new css file in your header