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

Expand/Collapse Rad Panel bar from javascript

3 Answers 301 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
saravanan k
Top achievements
Rank 1
saravanan k asked on 07 Jun 2010, 02:23 PM
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

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 07 Jun 2010, 02:40 PM
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.






0
Waseem
Top achievements
Rank 1
answered on 19 Apr 2013, 10:17 PM
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
0
Waseem
Top achievements
Rank 1
answered on 19 Apr 2013, 11:06 PM
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
Tags
PanelBar
Asked by
saravanan k
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Waseem
Top achievements
Rank 1
Share this question
or