RadpanelBar and javascript

2 posts, 0 answers
  1. Madhu
    Madhu avatar
    8 posts
    Member since:
    Jul 2010

    Posted 13 Jan 2013 Link to this post

    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

     

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 17 Jan 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top