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

When a panel is already expanded using...("tPanelBar").expand...stops all expand/collapse behavior for the panel

0 Answers 39 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Arnold Smith
Top achievements
Rank 1
Arnold Smith asked on 15 Feb 2011, 01:22 AM
Hi Telerik Experts,

I'm using several unrelated PanelBars in an ASP.NET MVC 2 application. I'm using them like collapsible DIVs. I added two buttons at the top of the page: "Expand All" and "Collapse All". Here is the markup:

 

<input id="btnExpandThis" type="button" value="Expand This" title="Expand This" onclick="ExpandCollectionInformation();" />

<input id="btnCollapseThis" type="button" value="Collapse This" title="Collapse This" onclick="CollapseCollectionInformation();" />

 

I'm trying to get just one PanelBar to work, so I'm practicing on #pnlCollectionInformation at this point. Here is the markup:

<% Html.Telerik().PanelBar()

 

 

.Name(

"pnlCollectionInformation"

) 

 

 

.ExpandAll(

 

 

false

) 

 

 

.HtmlAttributes(

 

 

new { style = "text-align:left"

}) 

 

 

.Effects(fx => fx.Expand()

 

 .Opacity()

 

 .OpenDuration(250)

 

 .CloseDuration(250))

 

 .Items(items =>

 

 { 

 

items.Add()

 

 .Text(

 

 

"Collection Information"

) 

 

 

.Content(() =>

 

 {

 

 %>

 

 

<table width="100%">

 

 

<tr>

 

 

<td class="display-label" style="width:24%">

 

 

Permanent Collector:

 

 

 <

/td>

 

 

<td class="display-field">

 

 

<%Html.DisplayFor(model => model.CollectionData.Collector)%>

 

 

</td>

 

 

</tr>

 

 

</table>

 <%

 });

 })

 .Render();%>

 

My javascript looks like this:

 <script type="text/javascript">

 

function ExpandCollectionInformation() {

 

 $(

'#pnlCollectionInformation').data("tPanelBar").expand('#pnlCollectionInformation > li');

 

 }

 

functionCollapseCollectionInformation() {

 

 $(

'#pnlCollectionInformation').data("tPanelBar").collapse('#pnlCollectionInformation > li');

 

 }

 

</

 

script>

This code works nearly perfectly except for one issue. If I click on  btnExpandThis when #pnlCollectionInformation is NOT expanded, then the expand/collapse behavior stops working for that PanelBar. The PanelBar itself also becomes unresponsive to a mouse click.

How can I correctly implement the expan/collapse behaviors?

Thank you!

Arnold Smith
 

Tags
PanelBar
Asked by
Arnold Smith
Top achievements
Rank 1
Share this question
or