Setting CSS style for expanded panel item background

5 posts, 1 answers
  1. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 12 Mar 2014 Link to this post

    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;
             }
    .
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Mar 2014 in reply to Tomica Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 08 Sep 2014 in reply to Shinu Link to this post

    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


  5. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 11 Sep 2014 Link to this post

    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.

     
  6. Tomica
    Tomica avatar
    147 posts
    Member since:
    Apr 2008

    Posted 12 Sep 2014 in reply to Aneliya Petkova Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017