This is a migrated thread and some comments may be shown as answers.

Loading UC in clientside on tab selected

3 Answers 98 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Karthi Keyan
Top achievements
Rank 1
Karthi Keyan asked on 21 Dec 2009, 08:43 AM
HI,
       i want to load separate usercontrol on tab selected event in clientside using javascript.. kindly provide sample code for the above



with regards,
Karthikeyan.G

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 21 Dec 2009, 10:15 AM
Hello Karthikeyan,

You can use RadMultiPage with different RadPageView. Place the usercontrol inside each PageView and set the MultiPageID property of RadTabStrip as ID of RadMultiPage.
Checkout the online demo for more information: TabStrip / MultiPage

-Shinu.
0
Karthi Keyan
Top achievements
Rank 1
answered on 21 Dec 2009, 10:43 AM

HI,
     My code looks somewhat similar like this...

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Dynamic Tab Loading </title>
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
    </telerik:RadScriptBlock>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
            function addRootTab() {

                var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
                //var selectedTab = tabStrip.get_selectedTab();

                //if (persistChanges)
                tabStrip.trackChanges();

                var tab = new Telerik.Web.UI.RadTab();

                //selectedTab.get_tabs().add(tab);
                tabStrip.get_tabs().add(tab);
                tab.set_text("Root Tab " + tabStrip.get_tabs().get_count());

                //if (persistChanges)
                tabStrip.commitChanges();

                return false;
            }

            function addChildTab() {

                var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
                var selectedTab = tabStrip.get_selectedTab();

                //if (persistChanges)
                tabStrip.trackChanges();

                var tab = new Telerik.Web.UI.RadTab();

                selectedTab.get_tabs().add(tab);
                tab.set_text("Child Tab " + selectedTab.get_tabs().get_count());
                //tab.set_navigateUrl("SamplePage.aspx");
                //if (persistChanges)
                tabStrip.commitChanges();

                return false;
            }

        </script>

    </telerik:RadCodeBlock>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="ScriptManager" runat="server" />
    <div>
        <asp:Button runat="server" ID="Button1" Text="Add Root tab" OnClientClick="return addRootTab();" />
        <asp:Button runat="server" ID="Button2" Text="Add Child to selected tab" OnClientClick="return addChildTab();" />
        <br />
        <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Style="float: left" OnClientTabSelecting="OnClientTabSelectingHandler" OnClientTabSelected="selectTab"
            MultiPageID="RadMultiPage1">
            <Tabs>
                <telerik:RadTab Text="Root Tab" />
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server">
        </telerik:RadMultiPage>
        <br />
    </div>
    <div>
    </div>
    </form>
</body>
</html>

for each tab creation i want to load separete ascx page.. how can i load separate ascx for each page in clientside using javascript

0
Karthi Keyan
Top achievements
Rank 1
answered on 21 Dec 2009, 11:02 AM
Hi,
        i want to load dynamically separate ascx page on tab selected in clientside using javascript.



with regards,
Karthikeyan.G
Tags
TabStrip
Asked by
Karthi Keyan
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Karthi Keyan
Top achievements
Rank 1
Share this question
or