Tuesday, February 3, 2009

Dynamically create and remove TabPanel on client

TabContainer provides some method to create/remove TabPanel on server-side. However, we want to achieve this on client and needn't to do postback to server.
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>



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>