1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Get expanded <li> tag in RadPanelBar

Get expanded &lt;li&gt; tag in RadPanelBar

6 posts, 0 answered
  1. Paul
    Paul avatar
    176 posts
    Registered:
    18 Nov 2008
    02 Jun 2010
    Link to this post

    Hi!

    I need to set my css class for <li class="rpItem"> in SitePanelBar which is expanded (its childs have class Expanded) when I open some page. How can I do this?

    Thank you. 

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    02 Jun 2010
    Link to this post
    Hello Paul,

    You could use RadPanelBar ClientSide API. You can subscribe for OnClientItemExpand and get the root DOM element of the item (LI).

    function OnClientItemExpand(sender, args) {
        var htmlElement = args.get_item().get_element();
        htmlElement.className = htmlElement.className + " rpApplyCss";
       
    }


    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Paul
    Paul avatar
    176 posts
    Registered:
    18 Nov 2008
    02 Jun 2010
    Link to this post

    Hi Ivan!

    Your code snippet works strange. =)

    It apply my css class for LI item but only for some miliseconds. What can cause this?

  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    03 Jun 2010
    Link to this post
    Hi Paul,

    Here is the code that I am using and it works fine at my end

    <style type="text/css">
    /* PanelBar css */
      
     
    div.RadPanelBar .rpApplyCss .rpLink { background-image: none !important;  background-color:Red !important; }
     
      
      
    </style>
     
     
    <script type="text/jscript">
     
        function OnClientItemExpand(sender, args) {
            alert('expand');
            var htmlElement = args.get_item().get_element();
            htmlElement.className = htmlElement.className + " rpApplyCss";
     
        }
        function OnClientItemCollapse(sender, args) {
            alert('colapse');
            var htmlElement = args.get_item().get_element();
            htmlElement.className = "rpItem";
        }      
     
    </script>
     
     
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false"/>
    <telerik:RadPanelBar OnClientItemExpand="OnClientItemExpand" OnClientItemCollapse="OnClientItemCollapse"  ID="RadPanelbar1" runat="server" DataSourceID="SiteMapDataSource1" OnItemDataBound="RadPanelbar1_ItemDataBound">
    </telerik:RadPanelBar>

    If you make any post backs on click or you have subscribed for OnItemClick the value could be reset.

    I also attached a sample video that shows the behavior of the RadPanelBar at my end.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Paul
    Paul avatar
    176 posts
    Registered:
    18 Nov 2008
    08 Jun 2010
    Link to this post

    Hi Ivan!

    I don't understand why but it doesn't work for me. I'm using your code snippet with my css class and after I click on root element it expanded and my class applies but after about 200 ms it returns to the state without my css class. Why does It happen? I check panel bar for postbacks and I also have not subscribed for OnItemClick. What else can cause this?

    Thank you.

  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    08 Jun 2010
    Link to this post
    Hello Paul,

    Check whether you are applying some other css to the same element that clears the css added by the js code. Try using a clean page - no other css and js so you can narrow down the issue and see what exactly cause the issue you have.  Since I am not able to reproduce this issue locally I believe that you are applying some other css and js that overrides the logic inside OnClientItemExpand

    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Register for webinar
6 posts, 0 answered