Bootstrap themes integration

2 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1572 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
  2. Tom
    Tom avatar
    1 posts
    Member since:
    Jan 2018

    Posted 21 Feb 2018 in reply to Telerik Admin Link to this post

    For my app, I had to add: 



    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.

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.