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

Setting CSS style for expanded panel item background

4 Answers 239 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Tomica
Top achievements
Rank 2
Tomica asked on 13 Mar 2014, 12:37 AM
I have viewed the demo for custom CSS and found that I can accomplish the following:

1) when using the Metro skin on the Q1 2014 release, when you select a child node the top level node remains with the blue background. This confuses my client because it appears that both are selected. I have changed the indent and other properties, but that does not satisfy them.

2) I changed the ExpandedCssClass value to my custom "noBlue" as shown in the code.
.noBlue
{
   background-color:white !important;
}


3) This works

4) afterwards I spent an hour trying to generalize the style so that the default "rpExpanded" could be left in the panel definition, but the blue background on the expanded item suppressed. I have no clue

5) I found a sample in an older posting, not specific to my needs, but indicates to me that I need something that starts with ".rp" that references the background color or similar part of the panel control.
 
div.RadPanelBar_Default a.rpLink,
        div.RadPanelBar_Default div.rpHeaderTemplate,
         div.RadPanelBar_Default .rpTemplate
         {
                 color: red;
         }
.

4 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 2
answered on 13 Mar 2014, 06:25 AM
Hi Tomica,

As a work around you can try the following code snippet which works fine at my end.

ASPX:
<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Metro" OnClientItemClicked="OnClientItemClicked">
    <Items>
        <telerik:RadPanelItem Text="Item1">
            <Items>
                <telerik:RadPanelItem Text="Item1.1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Item1.2">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
        <telerik:RadPanelItem Text="Item2">
            <Items>
                <telerik:RadPanelItem Text="Item2.1">
                </telerik:RadPanelItem>
                <telerik:RadPanelItem Text="Item2.2">
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelItem>
    </Items>
</telerik:RadPanelBar>

JavaScript:
<script type="text/javascript">
    function OnClientItemClicked(sender, args) {
        for (var i = 0; i < sender.get_allItems().length; i++) {
            if (sender.get_allItems()[i].get_expanded() == true) {
                if (sender.get_allItems()[i].get_text() != args.get_item().get_text()) {
                    sender.get_allItems()[i].set_expandedCssClass("noblue")
                }
            }
        }
    }
</script>

CSS:
<style type="text/css">
    .noblue
    {
        background-color: White !important;
    }
</style>

Thanks,
Shinu.
0
Tomica
Top achievements
Rank 2
answered on 08 Sep 2014, 11:04 PM
The proposed solution works as intended in an AJAX scenario.

I also access this page via a URL parameter which sets a specific PanelBar item as active, as in the enclosed code.

In this case, the OnClick script does not run.

Is there a way to invoke it, or a similar action, via server-side code during the PreRenderComplete event, or something similar on the client-side?
Protected Sub Page_PreRenderComplete(sender As Object, e As EventArgs) Handles Me.PreRenderComplete
 
    If Segment_Panel_Group < 99 And Segment_Panel_Item < 99 Then
        Try
            Me.RadPanelBar1.Items(Segment_Panel_Group).Expanded = True
            Me.RadPanelBar1.Items(Segment_Panel_Group).Items(Segment_Panel_Item).Selected = True
        Catch ex As Exception
        End Try
    End If
 
End Sub


0
Aneliya Petkova
Telerik team
answered on 11 Sep 2014, 03:22 PM
Hi Tomica,

Could you please elaborate a little more on your exact scenario since I am not quite sure I understand it. It would be also very helpful if you send us isolated runnable project that demonstrates the faced problem.
If you prefer to not share your page with other forum members then you could open a new support ticket.

Regards,
Aneliya Petkova
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tomica
Top achievements
Rank 2
answered on 12 Sep 2014, 06:34 PM
I may have resolved this issue. The client's concern is that with the Metro skin, there was no differentiation between the top level panel and the selected child item. In the attached screen clipping I show that I can override the skin colors as needed. Since this is done via CSS styling, the previous method of looping through the panel items is not needed. We have not decided on the alternate expanded background, as the close icon washes-out when we use a lighter background. 
.rpExpanded {
    background-color:#3586CE  !important;
}
 
.rpSelected {
    background-color:#3586CE  !important;
}

I am therefore able to adjust the background colo
Tags
PanelBar
Asked by
Tomica
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Tomica
Top achievements
Rank 2
Aneliya Petkova
Telerik team
Share this question
or