You can have multiple ASP.NET Grid controls with different styles on the same page, by using the CssSettings property or by using custom stylesheets.
CssSettings should be used for minor customizations, custom stylesheets should be used when using many controls with different styles on the same page (as in this example).
How to apply custom stylesheets
On this page we have three Grids using different stylesheets. The first Grid uses the "black_glass" style, the second uses "grand_gray" and the third uses "premiere_blue".
We used the class inheritance feature available in CSS. The folders with styles were copied to a new location (in the "resources/custom-styles" folder).
For all the CSS classes in the stylesheets we applied a parent CSS class. For the CSS classes from the "resources/custom-styles/black_glass/style.css" file we used
".master" as the parent class, for the ones in "resources/custom-styles/grand_gray/style.css" we used ".ob_gDGCCT .ob_gDGCCT" and for the ones in
"resources/custom-styles/premiere_blue/style.css" we used ".ob_gDGCCT". We used the "ob_gDGCCT" name to make the custom styles work with master/detail grids as well,
as in
this sample .
Each Grid was moved inside a container that uses those parent CSS classes that we added to the custom styles. The FolderStyle property of each Grid was set to a non-existent folder.
Thus, the first Grid was declared like this:
<div class="master">
<obout:Grid runat="server" ID="Grid1" FolderStyle="_" />
</div>
the second one like this:
<div class="ob_gDGCCT">
<div class="ob_gDGCCT">
<obout:Grid runat="server" ID="Grid2" FolderStyle="_" />
</div>
</div>
and the third one like this:
<div class="ob_gDGCCT">
<obout:Grid runat="server" ID="Grid3" FolderStyle="_" />
</div>
The final step is to load the custom stylesheets in the page (e.g. in the <head>):
<link href="../Grid/resources/custom-styles/black_glass/style.css" rel="Stylesheet" type="text/css" />
<link href="../Grid/resources/custom-styles/grand_gray/style.css" rel="Stylesheet" type="text/css" />
<link href="../Grid/resources/custom-styles/premiere_blue/style.css" rel="Stylesheet" type="text/css" />
See also the
Advanced Styles Tutorial