Add Custom CSS Class to Grid

[Chris]

Hi there,

I have occasion to style a few of my grids slightly differently to the defaults in my theme; what I really like to be able to do is specify, in the options for these grids, a custom CSS class to be applied to the generated k-grid element. 

Basically, by default, my tables should not have any kind of border applied.  However in several circumstances I do want to have a border applied around the whole grid.  I have tried applying a CSS class to the table to which I bind (using kendo-knockout) but of course this table becomes the content table and thus the border does not appear around the header.  Is there any way, save through JavaScript manipulation, that this can be achieved.  I was hoping something like the columns.attributes configuration property would be available for the whole grid, but this, sadly, does not seem to be the case.

Regards,
Chris Meek

[Dimo]

Hi Chris,

In case you are creating the Grid from a <div>, you can apply the custom CSS class to that <div>. In your case however, this is not possible, so please use Javascript to append the class to the widget's wrapper (gridObject.wrapper) after initialization. Another possible option is to wrap the <table> in a custom <div> that has the class. The Grid will be created inside that <div> and then you should simply use appropriate CSS selectors.

Regards,
Dimo
Telerik