Is it possible to add TabPanel from javascript or WebMethod?

I have a TabContainer that load from aspx code with a default TabPanel.Is it possible to add TabPanel dynamically in that container from client-side scripts?

Hope my question was clear :)

JKB

Initially,I try to add hard-coded HTML element of TabPanel from this script.But not Work properly!

Note:My TabContainer "MainTabContainer" is place on the ContentPlaceHolder.

1<script language="javascript">
2 function AddTab()
3 {
4 var num = 1;
5
6 //TabHead
7 ///////////////////////////////
8 var _spanActive = document.createElement('span');
9
10 //This seem to be the class of activated tab
11 //_spanOut.setAttribute('class','ajax__tab_active');
12
13 var _spanOut = document.createElement('span');
14 _spanOut.setAttribute('className','ajax__tab_outer');
15 _spanActive.appendChild(_spanOut);
16
17 var _spanIn = document.createElement('span');
18 _spanIn.setAttribute('className','ajax__tab_inner');
19 _spanOut.appendChild(_spanIn);
20
21 var _headID = '__tab_ctl00_ContentPlaceHolder1_MainTabContainer_Module'+num;
22 var _spanHead = document.createElement('span');
23
24 //**********
25 _spanHead.setAttribute('_events','[object Object]');
26
27
28 _spanHead.setAttribute('className','ajax__tab_tab');
29 _spanHead.setAttribute('id',_headID);
30 _spanHead.innerHTML = "MyHeader";
31 _spanIn.appendChild(_spanHead);
32
33 var tabHead = $get("ctl00_ContentPlaceHolder1_MainTabContainer_header");
34 tabHead.appendChild(_spanActive);
35 ///////////////////////////////
36
37 //TabBody
38 //////////////////////////////
39 //Main
40 var tabID = 'ctl00_ContentPlaceHolder1_MainTabContainer_Module'+num;
41 var _tabHtml = document.createElement('div');
42 _tabHtml.setAttribute('className','ajax__tab_panel');
43
44 //******
45 _tabHtml.setAttribute('control','[object Object]');
46
47 _tabHtml.setAttribute('id',tabID);
48 _tabHtml.style.visibility='hidden';
49
50 //Body
51 var bodyID = tabID+'_ctl00_body';
52 var _tabBody = document.createElement('div');
53 _tabBody.setAttribute('id',bodyID);
54
55 _tabHtml.appendChild(_tabBody);
56
57 var tabMainBody = $get("ctl00_ContentPlaceHolder1_MainTabContainer_body");
58 tabMainBody.appendChild(_tabHtml);
59
60 ///////////////////////////////////////////////////////////
61
62 var tabCon = $get("ctl00_ContentPlaceHolder1_MainTabContainer");
63 var stHtml = tabCon.innerHTML;
64 //alert(stHtml);
65 num+=1;
66 }
67
68</script>

The TabContainer add new tab to its but every TabPanel function doesn't work. i.e.The tab cannot be selected.

Any suggestion?

Hi,

Here is the essential part of adding panel on client side:

<inputid="Button1"type="button"value="Create Tab"onclick=" createTab();"/>
<inputid="persist"/>

functioncreateTab() {
var newPanel =newAjaxControlToolkit.TabPanel($get("persist"));

newPanel.set_owner(tc);
newPanel.initialize();
Array.add(tc.get_tabs(),newPanel);

$create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_TabContainer1_p4")},null,{"owner":"TabContainer1"},$get("TabContainer1_p4"));

}

Raymond Wen - MSFT:

Hi,

Here is the essential part of adding panel on client side:

<inputid="Button1"type="button"value="Create Tab"onclick=" createTab();"/>
<inputid="persist"/>

functioncreateTab() {
var newPanel =newAjaxControlToolkit.TabPanel($get("persist"));

newPanel.set_owner(tc);
newPanel.initialize();
Array.add(tc.get_tabs(),newPanel);

$create(AjaxControlToolkit.TabPanel, {"headerTab":$get("__tab_TabContainer1_p4")},null,{"owner":"TabContainer1"},$get("TabContainer1_p4"));

}

Problem occur while running script and throw exception following :

-----------

Error : 'tc' is undefined

Code : 0

-----------

This run on IE6 SP2

What's the problem?

Anyway,Thank you for your code.

tc is a global variable holding reference to the TabContainer instance on the page.

tc = $find("TabContainer1");

Raymond Wen - MSFT:

tc is a global variable holding reference to the TabContainer instance on the page.

tc = $find("TabContainer1");

After I follow your instruction.an error appear :

Error : 'this._header.parentNode' is null or not an object

What can i do?

Sorry for some stupid question,I'm a beginner in javascript. :-)

A working example:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function addTab() { var headerHolder = $get("TabContainer1_header"); var tabHeader = $get("newheader"); headerHolder.appendChild(tabHeader); var contentHolder = $get("TabContainer1_body"); var tab = $get("newpanel"); contentHolder.appendChild(tab); tab.style.display = "none"; $create(AjaxControlToolkit.TabPanel, {"headerTab":$get("newheader")}, null, {"owner":"TabContainer1"}, $get("newpanel")); } </script></head><body><form id="form1" runat="server"><asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager><div> <input id="Button1" type="button" value="button" onclick="addTab();"/> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0"> <ajaxToolkit:TabPanel runat="server" HeaderText="TabPanel1" ID="TabPanel1"> <HeaderTemplate>tab 1</HeaderTemplate> <ContentTemplate>Content of tab 1</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> <HeaderTemplate>tab 2</HeaderTemplate> <ContentTemplate>Content of tab 2</ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3"> <HeaderTemplate>tab 3</HeaderTemplate> <ContentTemplate>Content of tab 3</ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> <br /> <br /> <br /> <br /> <span id="newheader">TabPanel4</span><div id="newpanel">this is new panel</div></div></form></body></html>