Bootstrap themes integration

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1694 posts
    Member since:
    Oct 2004

    Posted 28 Nov 2014 Link to this post


    Telerik Product and Version

    Telerik UI for ASP.NET AJAX, Q3 2014+

    Supported Browsers and Platforms

    all browsers supported by Telerik UI for ASP.NET AJAX

    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.

    RadGrid Boostrap Themes
Back to Top