For example, we can build a button on the page so that it can create a tabpanel on client-side when you click it. The data in this dynamic tabpanel can be static existing in the page, or can be recieved from web service by Ajax. Then we can create a closed-button in each tabpanel header.
The following code can help you to achieve creating TabPanel on client on the fly.
<script type="text/javascript">
var i = 3;
function createnew() {
CreateNewTabPanel('TabContainer1', 'TabPanel' + i, 'TabPanel' + i, 'TabPanel' + i);
i++;
}
function CreateNewTabPanel(tabContainerID, tabPanelID, headerText, bodyText) {
//create header
var header = document.createElement('span');
header.id = "__tab_" + tabContainerID + tabPanelID;
header.innerHTML = headerText;
$get(tabContainerID + "_header").appendChild(header);
//create content
var body = document.createElement('div');
body.id = tabContainerID + "_" + tabPanelID;
body.style.display = "none";
body.style.visibility = "hidden";
body.innerHTML = bodyText;
body.cssClass = "ajax__tab_panel";
$get(tabContainerID + "_body").appendChild(body);
$create(AjaxControlToolkit.TabPanel, { "headerTab": $get(header.id) }, null, { "owner": tabContainerID }, $get(body.id));
}
</script>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<span id="mes"></span><br />
<span id="mes1"></span>
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1" >
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="TabPanel1">
<HeaderTemplate>
TabPanel1
</HeaderTemplate>
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2" HeaderText="TabPanel2">
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
<input type="button" onclick="createnew()" value="create a new pane" />
</form>
</body>
var i = 3;
function createnew() {
CreateNewTabPanel('TabContainer1', 'TabPanel' + i, 'TabPanel' + i, 'TabPanel' + i);
i++;
}
function CreateNewTabPanel(tabContainerID, tabPanelID, headerText, bodyText) {
//create header
var header = document.createElement('span');
header.id = "__tab_" + tabContainerID + tabPanelID;
header.innerHTML = headerText;
$get(tabContainerID + "_header").appendChild(header);
//create content
var body = document.createElement('div');
body.id = tabContainerID + "_" + tabPanelID;
body.style.display = "none";
body.style.visibility = "hidden";
body.innerHTML = bodyText;
body.cssClass = "ajax__tab_panel";
$get(tabContainerID + "_body").appendChild(body);
$create(AjaxControlToolkit.TabPanel, { "headerTab": $get(header.id) }, null, { "owner": tabContainerID }, $get(body.id));
}
</script>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<span id="mes"></span><br />
<span id="mes1"></span>
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1" >
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="TabPanel1">
<HeaderTemplate>
TabPanel1
</HeaderTemplate>
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2" HeaderText="TabPanel2">
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
<input type="button" onclick="createnew()" value="create a new pane" />
</form>
</body>
To remove the related TabPanel on client dynamically, please check the code as below:
<script type="text/javascript">
function removeAt(tabPanelClientID,index) {
var activeTabPanel = $find('<%=TabContainer1.ClientID%>').get_tabs()[index];
var tabContainerID = "<%=TabContainer1.ClientID %>";
$get(tabContainerID + "_header").removeChild($get(tabPanelClientID+"_tab"));
$get(tabContainerID + "_body").removeChild($get(tabPanelClientID));
activeTabPanel.dispose();
$find('<%=TabContainer1.ClientID%>').set_activeTabIndex(index+1);
}
</script>
<body>
<form id="form1" runat="server">
<input type="image" style="height: 14px; width: 14px" onclick="removeAt(this.alt);return false;"
alt="0" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1">
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1">
<HeaderTemplate>
headertext0
<input type="image" style="height: 14px; width: 14px" onclick="removeAt('<%=TabPanel1.ClientID %>',0);return false;"
alt="0" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
</HeaderTemplate>
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2">
<HeaderTemplate>
headertext1
<input type="image" style="height: 14px; width: 14px" onclick="removeAt('<%=TabPanel2.ClientID %>',1);return false;"
alt="1" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
</HeaderTemplate>
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel3">
<HeaderTemplate>
headertext2
<input type="image" style="height: 14px; width: 14px" onclick="removeAt('<%=TabPanel3.ClientID %>',2);return false;"
alt="2" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
</HeaderTemplate>
<ContentTemplate>
TabPanel3
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>
function removeAt(tabPanelClientID,index) {
var activeTabPanel = $find('<%=TabContainer1.ClientID%>').get_tabs()[index];
var tabContainerID = "<%=TabContainer1.ClientID %>";
$get(tabContainerID + "_header").removeChild($get(tabPanelClientID+"_tab"));
$get(tabContainerID + "_body").removeChild($get(tabPanelClientID));
activeTabPanel.dispose();
$find('<%=TabContainer1.ClientID%>').set_activeTabIndex(index+1);
}
</script>
<body>
<form id="form1" runat="server">
<input type="image" style="height: 14px; width: 14px" onclick="removeAt(this.alt);return false;"
alt="0" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
<ajaxToolkit:ToolkitScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager1" />
<ajaxToolkit:TabContainer runat="server" ID="TabContainer1">
<ajaxToolkit:TabPanel runat="server" ID="TabPanel1">
<HeaderTemplate>
headertext0
<input type="image" style="height: 14px; width: 14px" onclick="removeAt('<%=TabPanel1.ClientID %>',0);return false;"
alt="0" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
</HeaderTemplate>
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel2">
<HeaderTemplate>
headertext1
<input type="image" style="height: 14px; width: 14px" onclick="removeAt('<%=TabPanel2.ClientID %>',1);return false;"
alt="1" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
</HeaderTemplate>
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server" ID="TabPanel3">
<HeaderTemplate>
headertext2
<input type="image" style="height: 14px; width: 14px" onclick="removeAt('<%=TabPanel3.ClientID %>',2);return false;"
alt="2" src="../../../effect/PopupDiv-roundCorner/images/close.gif" />
</HeaderTemplate>
<ContentTemplate>
TabPanel3
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>
