How can I apply styling to the grid control?

[Richard]

I'm evaluating the Kendo web controls before buying. Specifically, I need to be able to style the controls to match the controls in Microsoft Dynamics CRM 2011. I'm looking at the grid control, creating a grid from fixed data and generating the grid in place of an empty grid, as per the example code.

I'm trying to work out how I can change the grid styling and I can't seem to get anything to work so I'm after pointers. I need to change things like the background colour of rows, row borders, row height, fonts used, etc. I need to understand how to change the styles independantly for normal rows, selected cells, cells being edited, etc. Can someone give me a starting point?

NB: I'm pretty new to jQuery, being historically a .NET developer using ASP.NET web forms, but at the point of making a switch to using much more HTML / jQuery to meet the new development models in CRM.

[Dimo]

Hello Richard,

Please consult the following documentation article...

http://www.kendoui.com/documentation/ui-widgets/appearance-styling.aspx

...and demo:

http://jsfiddle.net/dimodi/LL3GN/

For additional customization, you can inspect the Grid HTML output with Firebug, see what HTML elements and CSS classes are responsible for the visual appearance of the particular object and add custom CSS rules. In order to successfully override Kendo styles, you have to be familiar with the concept of CSS specificity.

Regards,
Dimo
the Telerik team

[Richard]

thanks