[Solved] Multiple Grids on one page AND have separate styling?

[Daniel]

I have two grids on one page (within a TabStrip()).  Is it possible for each to use a separate stylesheet?  In other words, I want one Grid to be blue and one to be green.  I feel I know the answer, but I am strongly hoping there is a solution that doesn't involve iFrames.

Thanks!
Daniel

[Mylène]

Hi,

Any new about this ? I'm in the same case and would like to know if there is any issues.

Thanks

[Dimo]

Hello,

The requested behavior is possible to achieve. You need to place the two Grids in containers with some different CSS classes...

<div class="skin1">
    <%= Html.Telerik().Grid().Name("Grid1") %>
</div>

<div class="skin2">
    <%= Html.Telerik().Grid().Name("Grid2") %>
</div>

...and modify the MVC extension skins like this, so that the CSS classes above take part in each selector, for example:

telerik.skin-name-1.css

.skin1  .t-widget
{
        /* styles remain unchanged */
}

telerik.skin-name-2.css

.skin2  .t-widget
{
        /* styles remain unchanged*/
}

Actually, you can leave the skin that you are using more unchanged, while adding a custom CSS class only to the one that you need for one of the Grids.

It is up to you to decide whether this approach is easier for you than using iframes.



Best wishes,
Dimo
the Telerik team

[Mieke]

Thanks.
It works very well for styling the grid. But how do I style the popup window if I edit a record?

Kind regards,
Mieke

[Dimo]

Hi Mieke,

The Grid popup is actually a Window component, so the styling and required CSS classes are the same.

All the best,
Dimo
the Telerik team