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
495
Closing Tabs
posted

 How would you go about creating tabs that have the functionality sort of like tabs do Firefox and IE 7 .  Where you are able to close tabs by pressing on the "x" image at the top right of the tab.  

 Is this even possible using The infragistics Tab control

Parents
No Data
Reply
  • 24497
    posted

    Hi,

    Unfortunately there is no such built-in feature in UltraWebTab. However, tab exposes various ClientSideEvents and allows to customize appearance of tab-label. Example below shows how to add image after text and how to close tab when that image is clicked by user.

    <script type="text/javascript">
    function
    UltraWebTab1_Click(oWebTab, oTab, oEvent)
    {
     
    var src = oEvent.event.srcElement;
     
    if(!src)
        src = oEvent.event.target;
     //
    if(!src){alert("no src");return;}
     
    if(src.nodeName != 'IMG' || src.src.indexOf("close.gif") < 0)
       
    return;
     
    // Note: a simple call like oTab.setVisible(false) can not be used, because
     
    // a browser may lock element related to event and request to change visibility will fail.
     
    // So, request to hide tab should be moved in another "thread":
     
    var command = "igtab_getTabById('" + oWebTab.ID + "').Tabs[" + oTab.index + "].setVisible(false)";
     window.setTimeout(command, 0);
    }
    </script>

    <igtab:UltraWebTab ID="UltraWebTab1" runat="server" Height="150px" Width="267px">
     
    <ClientSideEvents Click="UltraWebTab1_Click" />
     
    <Tabs>
      
    <igtab:Tab Text="New Tab<img src='./images/close.gif' />"></igtab:Tab>
      
    <igtab:Tab Text="New Tab<img src='./images/close.gif' />"></igtab:Tab>
      
    <igtab:Tab Text="New Tab<img src='./images/close.gif' />"></igtab:Tab>
     
    </Tabs>
    </igtab:UltraWebTab>

Children
No Data