Bootstrap themes integration

Project Description:

The Bootstrap Framework is becoming more and more popular day by day. Some of the Bootstrap themes are amazing and frequently used in all types of web projects and site. With this Code Library we want to show how you can easily use those themes for styling RadGrid.

Prerequisites for Integration:

• Bootstrap does not offer styles and components for all of the available RadGrid features and it is important to provide image sprite for its icons.
• RadGrid has its own metrics and styles that should be removed.
• A template should be defined for the pager

How it Works:

• Disable the RadGrid’s main styles by setting the EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins properties to false.
• Include the custom trimmed version of the base RadGrid CSS file (all metric values are cut off).
• Set the necessary CSS classes on the main element:
  • RadGrid: table table-striped table-bordered table-hover
  • MasterTableView: table table-striped table-hover
• Define a template for the pager and edit form
• Use the predefined image sprites for the icons.

The Result

You can see below how the grid looks with applied Boostrap themes.

For my app, I had to add: 

EnableEmbeddedBaseStylesheet="false"

EnableEmbeddedSkins="false"

to all of the RadGrids on the page. If you don't the grid you've disabled will retain the styling of the other RadGrid. Took a bit testing to figure this one out, hope it doesn't trip anyone else up.