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
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.
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
i want to load dynamically separate ascx page on tab selected in clientside using javascript.
with regards,
Karthikeyan.G