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="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