New to Telerik UI for ASP.NET MVC? Download free 30-day trial

ASP.NET MVC PanelBar Images

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Change Theme
    default
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Ocean Blue A11Y accessibility
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Bootstrap 3
    • Bootstrap 3 Dark
    • Main Dark
    • Nordic
    • Turquoise
    • Turquoise Dark
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Nova
    Classic Theme
    • Main
    • Green
    • Green Dark
    • Lavender
    • Lavender Dark
    • Main Dark
    • Metro
    • Metro Dark
    • Moonlight
    • Opal
    • Opal Dark
    • Silver
    • Silver Dark
    • Uniform
    Fluent Theme
    • Main
    Launch Theme Builder
images.cshtml
ImagesController.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API

Description

Telerik UI for ASP.NET MVC PanelBar enables you to add images and sprites to each item to visually communicate its purpose to the users. For example, you can set the image URL through the ImageUrl() method, as demonstrated in this example where the items of the first PanelBar are rendered with an image and some text.

Rather than including each image as a separate image file, you can set a single image with CSS by utilizing the background-image property, and specify the respective sprite CSS class for each item by utilizing the SpriteCssClasses() option. In this way, the total number of HTTP requests will be reduced. In the current example, the second PanelBar uses sprites.

Additional Apps

This PanelBar example is part of a unique collection of hundreds of ASP.NET MVC demos, with which you can see all Telerik ASP.NET MVC components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in the ThemeBuilder.

Support & Learning Resources

Additional Resources