RadpanelBar and javascript

[Madhu]

Hi,

  

Can you explain the reason for error “Microsoft JScript runtime error: '_transitionAnimationIsInProgress' is null or not an object”.   Below is the scenario.

 I have a radpanelbar inside a page along with a link button.  Link button act as a ‘content’ toggle button for radpanelbar. To load panelItems and  sub items  initially,I use pageload() client script. When user click link button, existing items gets removed and a new set get added. Clicking again link button bring back old  contents. This work fine. The issue mentioned at the beginning happen  when I click link button after selecting any subItem.

 

To reproduce the same, please try following on sample below. After page comes up (u can see Hardware on top), expand ‘configuration’ and click any sub items for eg. ‘custodians’. Now click ‘S/w Inventory’  and try to expand any panel item.  =========================================================================================================
 

 <% @ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

 CodeBehind="Default.aspx.cs" Inherits="TelerikTotorial._Default" %>

 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">  </asp:Content>

 <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

 <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

 <Scripts> <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>

 <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"> </asp:ScriptReference><asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>

 </Scripts>

 </telerik:RadScriptManager>

 <script type="text/javascript" language="javascript">

 function addPanelBar(panel, name, url) {

 panelItem = new Telerik.Web.UI.RadPanelItem();

 panelItem.set_text(name);

panel.get_items().add(panelItem);

 return panelItem; }

 

function resetPanelBar(panelBar) {

 var panelCount = panelBar.get_items().get_count();

 for (var count = panelBar.get_items().get_count(); count > 1; count--) {

     panelBar.get_items().removeAt(count - 1);

   }

}

 function loadHardware() {

 var panelItem;

 var panelSubItem;

 document.getElementById('MainContent_lblInvType').innerHTML = "HARDWARE";

 document.getElementById('MainContent_lnkSwitch').innerHTML = "<span style='font-size: 10px; font-family: Arial; color:#696969;'>S/W Inventory</span>";

 var panelBar = $find("<%= RadPanelBar1.ClientID %>");

 panelBar.trackChanges();

resetPanelBar(panelBar);

 panelItem = addPanelBar(panelBar, "Dashboard", "");

 addPanelBar(panelItem, "Quick Search", "");

 panelItem = addPanelBar(panelBar, "Reports", "");

 panelItem = addPanelBar(panelBar, "Configuration", "");

 

addPanelBar(panelItem, "Asset Type", "");

 addPanelBar(panelItem, "Custodians", "");

 addPanelBar(panelItem, "Stores", "");

 panelBar.commitChanges();

}

 

 

function loadSoftware() {

 var panelItem;

 var panelSubItem;

 document.getElementById(

 'MainContent_lblInvType').innerHTML = "SOFTWARE";

 document.getElementById('MainContent_lnkSwitch').innerHTML = "<span style='font-size: 10px; font-family: Arial; color:#696969;'>H/W Inventory</span>";

 var panelBar = $find("<%= RadPanelBar1.ClientID %>");

 panelBar.trackChanges();

resetPanelBar(panelBar);

panelItem = addPanelBar(panelBar, "Purchase", "");

 addPanelBar(panelItem, "Purchase Order", "");

 addPanelBar(panelItem, "Invoice", "");

 panelItem = addPanelBar(panelBar, "Dashboard", "");

 addPanelBar(panelItem, "License Expiry", "");
panelItem = addPanelBar(panelBar, "Reports", "");

panelItem = addPanelBar(panelBar, "Configuration", "");

 addPanelBar(panelItem, "Publishers", "");

 addPanelBar(panelItem, "Vendors", "");

 addPanelBar(panelItem, "Locations", "");

 addPanelBar(panelItem, "Vendors", "");

 panelBar.commitChanges();

}

 

 

function toggleInventory() {

 var curLocation = document.getElementById('MainContent_lnkSwitch').innerHTML;

 if (curLocation.search("H/W") > 0)

 loadHardware();

 else

 loadSoftware();

}

 

function pageLoad() {

 loadHardware();

};

</script> <h2>

 Welcome to ASP.NET!

 

</h2>

 

<p>

 

To learn more about ASP.NET visit

 <a href="http://www.asp.net" title="ASP.NET Website">

 www.asp.net

 </a>.

 

</p>

 

<telerik:RadSplitter ID="radSplitter1" runat="server" Height="100%" Width="100%"BorderSize="0" BorderStyle="Solid" BorderWidth="1px" FullScreenMode="True" PanesBorderSize="0"  SplitBarsSize="">

 

<telerik:RadPane ID="navigationPane" runat="server" Width="180" Locked="true">

 <div style="width: 100%; vertical-align: middle; padding: 0px 0px 0px 3px;">

 <table border="0" cellspacing="3" width="95%"> <tr><td></td><td> <span style="color: #000000"><asp:Label ID="lblInvType" runat="server"> HARDWARE</asp:Label></span></td></tr> <tr><td colspan="2" align="right">

 <asp:LinkButton runat="server" ID="lnkSwitch" OnClientClick="toggleInventory(); return false;"><span style="font-size: 10px; font-family: Arial; color:#696969;">S/W Inventory</span></asp:LinkButton>

 </td></tr></table>

 </div>

<br />

 <telerik:RadPanelBar ID="RadPanelBar1" runat="server" ExpandMode="SingleExpandedItem"Width="99%" BackColor="#D9D9D9"> <Items> <telerik:RadPanelItem Expanded="True" Text="Inventory" BackColor="#D9D9D9" ID="panelInventory"> <Items> <telerik:RadPanelItem Text="test"> <ItemTemplate>  </ItemTemplate> </telerik:RadPanelItem> </Items> </telerik:RadPanelItem> </Items> </telerik:RadPanelBar> </telerik:RadPane>

 <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="None" Height="100%" />

 <telerik:RadPane ID="contentPane" runat="server" Height="100%" ContentUrl="about:blank">

 </telerik:RadPane> </telerik:RadSplitter>

 

</asp:Content>

 

========================================================================
Regards
Madhu

 

[Boyan Dimitrov]

Hello,

I would recommend you to collapse all expanded items and set RadPanelBar client-side object selectedItem property to null  before delete all items and repopulate the RadPanelBar object. This will avoid the client-side error that you are facing. Please use the code snipped below:
//JavaScript

function resetPanelBar(panelBar) {
    var panelCount = panelBar.get_items().get_count();
    for (var count = panelBar.get_items().get_count() ; count > 1; count--) {
        panelBar.get_items().getItem(count - 1).collapse();
        panelBar.get_items().removeAt(count - 1);

    }
    panelBar.set_selectedItem(null);
}

Regards,
Boyan Dimitrov
the Telerik team