This is a migrated thread and some comments may be shown as answers.

Is it possible to change the PanelBar color dynamically based on a value?

1 Answer 38 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
SC
Top achievements
Rank 1
SC asked on 23 Nov 2020, 02:08 PM

 

I have a panel bar in my application. The use case with my application is, I wanted to change the color of Panel bar when my project goes through various stages, Ex: Stage 1,2,3,4. May be like

For Stage 1: Red,

Stage 2: Orange,

Stage 3: Blue,

Stage 4: Green

Is this possible? If possible how to do it.

Thanks,

SC

 

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 27 Nov 2020, 04:28 PM

Hello,

The easiest way to change the colors in the PanelBar would be to set a custom CssClass to the PanelBar from the server-side. Then you can use pure CSS to control the colors of any items inside the PanelBar.

<style>
    .RadPanelBar.red-panelbar .rpItem .rpLink {
        background-color: red;
        background-image: none;
        /* original values for Default skin*/
        /* background-color: #e6e6e6;*/
        /* background-image: linear-gradient(#fafafa,#e6e6e6);*/
    }
</style>
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" RenderMode="Lightweight" CssClass="red-panelbar">
    <Items>
        <telerik:RadPanelItem Text="Item 1"></telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item 2"></telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item 3"></telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item 4"></telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

For further customization, you can follow the suggestions in the first two points of the Improve Your Debugging Skills with Chrome DevTools blog post explaining how to inspect the generated HTML and check the applied styles for various elements. 

Once you know the styles you need to override, you can use the same style selector and add "html body " in front of it to make it more specific, "stronger". More on CSS specificity you can find here: 

 

Regards,
Peter Milchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
PanelBar
Asked by
SC
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Share this question
or