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

Images

The PanelBar allows you to include images or sprite icons inside its items.

Images

You can include images in the Telerik UI for ASP.NET Core PanelBar items using the .ImageUrl() configuration option and passing the image Url as a parameter:

@(Html.Kendo().PanelBar()
        .Name("panelbar-images")
        .Items(panelbar =>
        {
            panelbar.Add().Text("Baseball")
                .ImageUrl(Url.Content("~/shared/icons/sports/baseball.png"))
                .Items(baseball =>
                {
                    baseball.Add().Text("Top News")
                        .ImageUrl(Url.Content("~/shared/icons/16/star.png"));
                    baseball.Add().Text("Photo Galleries")
                        .ImageUrl(Url.Content("~/shared/icons/16/photo.png"));
                    baseball.Add().Text("Video Records")
                        .ImageUrl(Url.Content("~/shared/icons/16/video.png"));
                    baseball.Add().Text("Radio Records")
                        .ImageUrl(Url.Content("~/shared/icons/16/speaker.png"));
                });
        })
    )

Sprites

You can also set sprites the the Telerik UI for ASP.NET Core PanelBar items using the .SpriteCssClasses() configuration option and specifying the sprite CSS class:

@(Html.Kendo().PanelBar()
        .Name("panelbar-sprites")
        .Items(panelbar =>
        {
            panelbar.Add().Text("Brazil")
                .SpriteCssClasses("brazilFlag")
                .Items(brazil =>
                {
                    brazil.Add().Text("History")
                        .SpriteCssClasses("historyIcon");
                    brazil.Add().Text("Geography")
                        .SpriteCssClasses("geographyIcon");
                });
        })
    )

See Also

In this article
Not finding the help you need? Improve this article