Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
matt_dmaxx
660
Is it possible to reorder the tabs on the client side without a postback?
posted

My application cannot post back to the server once loaded and I have tab contnent elements that are dynamically created by the client.  I created a fixed number of tabs when the page is 1st loaded and hide them until the client needs them.  The client can also dismiss a.k.a.hide the tab when nolonger needed. 

I now have a need to re-order the tabs on the client side.  Is this possible?  Can I copy tab contents from 1 tab to another? 

thanks

Parents
No Data
Reply
  • 24497
    Suggested Answer
    posted

    Hi Matt,

    You can access html elements which are used by tab items of UltraWebTab. The member "element" is reference to the TD which renders label. The member "elemDiv" is reference to DIV which is used for content of tab (Note: that can be used only when ContentTemplate is set for a Tab).

    You may manipulate by those elements as you wish, though, after a postback all your changes will be gone. Below is examples for you to move tab and copy contents. To copy you may use more sofisticated approach with element.cloneNode(true), etc.

    <script type="text/javascript">
    function reorder()
    {
     var oWebTab = igtab_getTabById('<%=UltraWebTab1.ClientID%>');
     if(!oWebTab)
      return;
     var td0 = oWebTab.Tabs[0].element;
     var td1 = oWebTab.Tabs[1].element;
     var td2 = oWebTab.Tabs[2].element;
     var tr = td0.parentNode;
     tr.removeChild(td2);
     tr.insertBefore(td2, td1);
    }
    function copy()
    {
     var oWebTab = igtab_getTabById('<%=UltraWebTab1.ClientID%>');
     if(!oWebTab)
      return;
     var div0 = oWebTab.Tabs[0].elemDiv;
     var div1 = oWebTab.Tabs[1].elemDiv;
     div1.innerHTML = div0.innerHTML;
    }
    </script>
    <igtab:UltraWebTab ID="UltraWebTab1" runat="server" Height="200px" Width="300px">
       <ClientSideEvents InitializeTabs="UltraWebTab1_InitializeTabs" />
       <Tabs>
        <igtab:Tab Text="Tab1">
         <ContentTemplate>
          <input value='reorder' type='button' onclick='reorder()' />
          <input value='copy this to tab2' type='button' onclick='copy()' />
         </ContentTemplate>
        </igtab:Tab>
        <igtab:Tab Text="Tab2">
         <ContentTemplate>
         </ContentTemplate>
        </igtab:Tab>
        <igtab:Tab Text="Tab3"></igtab:Tab>
       </Tabs>
    </igtab:UltraWebTab>

Children
No Data