Expand/Collapse Rad Panel bar from javascript

4 posts, 0 answers
  1. saravanan k
    saravanan k avatar
    88 posts
    Member since:
    Mar 2010

    Posted 07 Jun 2010 Link to this post

    Hi,

    I have a checkbox and a Rad panel bar. When the user checks or unchecks the checkbox, the panel bar must expand or collapse. The onclick event of checkbox is Test()

    <script>
    function Test()
    {
        //Code to expand or collpase the rad panel//----> what should i add here?
    }
    </script>

    Regards
    Saravanan
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 07 Jun 2010 Link to this post

    Hello Saravanan,

    One suggestion would be accessing all the panelitems from code behind and attach the onclick event to each checkboxes passing the panelbar text to event handler. And in the event handler, get the corresponding panelitem using the text (findItemByText method) the set_expanded() method to expand.


    Regards,
    Princy.






  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 19 Apr 2013 Link to this post

    Hi Princy

    How to check, if any item is expanded or collapse.
    so if item is collapse , we can expand it. if item is expand , we collapse it.

     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server" >
                        <script type="text/javascript">
                            $telerik.$(document).ready(function() {
                                $telerik.$(".rpExpandHandle").click(function() {
                                    var panelBar = $find("<%= radPanelBar.ClientID %>");
                                    if (  ) { //if it is collapse then expand it otherwise collapse it.
                                        panelBar.get_items().getItem(0).expand();
                                    }
                                    else {
                                        panelBar.get_items().getItem(0).collapse();
                                    }
                                 });
                            });
                        </script>
                    </telerik:RadCodeBlock>

    Thanks,
    the telerik team
  5. <span>w</span>
    <span>w</span> avatar
    84 posts
    Member since:
    Jun 2012

    Posted 19 Apr 2013 Link to this post

    I got a solution, by making isExpanded true , so it solve my problem. 
             
          <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server" >
                        <script type="text/javascript">
                            var isExpanded = true;
                            $telerik.$(document).ready(function() {
                                $telerik.$(".rpExpandHandle").click(function() {
                                    var panelBar = $find("<%= radPanelBar.ClientID %>");
                                    if (isExpanded == true) {
                                        panelBar.get_items().getItem(0).collapse();
                                        isExpanded = false;
                                    }
                                    else {
                                        panelBar.get_items().getItem(0).expand();
                                        isExpanded = true;
                                    }
                                });
                            });
                        </script>
                    </telerik:RadCodeBlock>

    Thanks.
    Muhammad Waseem
    the telerik team
Back to Top