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