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>
6 comments:
How to make new Tab in selected state once created without mouse clicking?
Hi ItLwinger,
sorry for delay. But I didn't get your question. Maybe there is some client event you can make use of to call the creating function.
Thank you for your post.
It is very useful for my project.
But, I have one question.
When I use your code.
I can add tabs successfully
but, can NOT remove tabs.
so, I checked browser's HTML viewer.
and I can see the code below
==================================
[div id="TabUpdatePanel"]
[div id="TabContainer1" class="ajax__tab_xp" style="width:800px;visibility:hidden;"]
[div id="TabContainer1_header"]
[span id="__tab_TabContainer1_TabPanel1"]
TabPanel1
[/span]
[/div]
[div id="TabContainer1_body"]
[div id="TabContainer1_TabPanel1"]
TabPanel1
[/div]
[/div]
[/div]
===================================
I added 5 tabs. but in HTML viewer, I can see only 1 tab's code.
Is it normal situation?
as result of debugging,
The Browser maybe can NOT find tab object, so can NOT remove tab.
please give me your advice.
ps. I use IE8 now.
Thank you ___________________
Vince
Your movies on demandfor your post.
Hi Vince,
I tried to create a dynamic tab with your code but I am getting javascript error in this line
$get(tabContainerID + "_header").appendChild(header);
Any help in removing this error will be appreciated a lot.
TIA
Post a Comment