Help-Remove a tab from a container by a event....

Question

User-395487355 posted

Hi all,

I have an ajax tabcontainer with 5 tabpanel on it.

I want to delete a tab by  rightmouse click event.

Also  I want to give name of tab dynamically...

How to achieve this.

Plz. help with sample code.

Thanks in advance.

Ben

Answer 1

User2022958948 posted

Hi,

Actually, we can't handle right mouse clik on page. In this case, you can create a button to remove some tab on server. You can put the tab into an UpdatePanel so that it will not update when you trigger the button.  Server side code "TabContainer1.Tabs.Remove" can deal with it. And you can also build a close imagebutton for each tab header. Please check this: http://forums.asp.net/t/1309550.aspx

For add/remove tab panel on client, you can check http://forums.asp.net/t/1364335.aspx. It provides the function to add tab on client dynamically. The code for removing some tab is reversed. Firstly, you can dispose the tabpanel by $find('<%=TabContainer1.ClientID%>').get_tabs()[X].dispose(). And then you can remove the related div section in tabcontainer by using DOM.

 

Answer 2

User1132102078 posted

Hi,

I am not sure whether I should post on a new post, but I think my problem is quite related to this post.

I have a problem on disposing a tab. The tabs are still there even the TabPanel has been disposed. May I know what are the things I still need to do? 

The following is my code to clear all my tabs in a Tabcontainer.

function clearTabPanels() 
        {
            var tcContainer = $get('MainContent_tcContainer1');

            var arrTabs = $find('MainContent_tcContainer1').get_tabs();
            var totalTabs = arrTabs.length;

            var tabContainerID = tcContainer .id;

           
            for (var index = 0; index < totalTabs; index++) 
            {
                var activeTabPanel = arrTabs[0]; //--- this part I am not sure how to write as I think once an object is disposed, the array size would change

                var j = index + 1;
                var header = $get(tabContainerID + "_header");
               
                var headerTab = $get(tabContainerID + '_TabPanel' + (j)+'_tab');
                header.removeChild(headerTab);
               
               
                var body = $get(tabContainerID + "_body");
                var bodyTab = $get(tabContainerID + "_" + 'TabPanel' + (j));
                body.removeChild(bodyTab);

                activeTabPanel.dispose();//-- here it doesn't dispose. After this line of code I use the get_tabs() I still can see the number of tabs remain in the TabContainer.
               

            }

            
        }

Thank You. Any Idea,