7 Answers, 1 is accepted
The RadSplitter does not support creation on the client. However, if you provide more details about the exact requirements you have, we will have a better understanding on your scenario and we will be able to provide you with some advice on how to get close to the desired result.
Best wishes,
Svetlina
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
We want to create tab by javascript, in the relation pageview, load the extent URL.
Thanks
guo
And I do a test page, I click one time “Add Tab”, and then click 3 times “callAjax”, get the follow error:
Line: 6
Error: Sys.WebForms.PageRequestManagerServerErrorException: Multiple controls with the same ID 'ctl02' were found. FindControl requires that controls have unique IDs.
The follow is the test page code:
<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="TestWebForm.aspx.vb" Inherits="Test.TestWebForm" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="uxScriptManager" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="uxAjaxManager" runat="server" DefaultLoadingPanelID="uxLoadingPanel" OnAjaxRequest="uxAjaxManager_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="uxAjaxManager">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="uxPanel" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadSplitter ID="uxPageSplitter" runat="server" Height="100%" Width="100%" Orientation="Horizontal" LiveResize="true">
<telerik:RadPane ID="uxMainPane" runat="server" Scrolling="None" >
<telerik:RadTabStrip ID="uxNavigatorTabStrip" runat="server" MultiPageID="uxNavigatorMultiPage" SelectedIndex="0" ScrollChildren="true">
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="uxNavigatorMultiPage" runat="server" SelectedIndex="0" ScrollBars="Auto">
</telerik:RadMultiPage>
</telerik:RadPane>
</telerik:RadSplitter>
<telerik:RadCodeBlock ID="uxScriptCodeBlock" runat="server">
<script type="text/javascript" language="javascript">
var tabStrip;
var multiPage;
var checkAccountNumberOnLoad = false;
function pageLoad() {
tabStripNavigator = $find("<%= uxNavigatorTabStrip.ClientID %>");
multiPageNavigator = $find("<%= uxNavigatorMultiPage.ClientID %>");
}
function CallAjax() {
var ajaxManager = $find('uxAjaxManager');
ajaxManager.ajaxRequest('test');
}
function AddTab() {
CreateTab(1, "Test", "http://www.google.com", true);
}
function CreateTab(id, text, url, isSelected) {
try {
if (tabStripNavigator && multiPageNavigator) {
tabStripNavigator.trackChanges();
multiPageNavigator.trackChanges();
var pageView;
var tab;
var isTabExist = false;
var pageViewId = String.format('{0}PageView', id);
var tabValue = String.format('{0}Tab', id);
if (multiPageNavigator.findPageViewByID(pageViewId)) {
pageView = multiPageNavigator.findPageViewByID(pageViewId);
isTabExist = true;
}else {
pageView = new Telerik.Web.UI.RadPageView();
pageView.set_id(pageViewId);
multiPageNavigator.get_pageViews().add(pageView);
}
if (tabStripNavigator.findTabByValue(tabValue)) {
tab = tabStripNavigator.findTabByValue(tabValue);
isTabExist = true;
}else {
tab = new Telerik.Web.UI.RadTab();
tab.set_text(text);
tab.set_value(tabValue);
tab.set_target("self");
tab.set_pageViewID(pageView.get_id());
tabStripNavigator.get_tabs().add(tab);
}
if (isTabExist == false) {
var iframe = document.createElement("iframe");
iframe.setAttribute("id", String.format('{0}IFrame', id));
iframe.setAttribute("src", url);
iframe.setAttribute("frameborder", 0);
iframe.style.width = "100%";
iframe.style.height = "100%";
var pageViewContent = document.createElement("div");
pageViewContent.setAttribute("id", String.format('{0}PageViewContent', id));
pageViewContent.style.width = "100%";
pageViewContent.appendChild(iframe);
pageView.get_element().innerHTML = pageViewContent.innerHTML;
}
if (isSelected) {
if (tab.get_selected() == false) {
tab.set_selected(isSelected);
}
if (pageView.get_selected() == false) {
pageView.select();
pageView.show();
}
}
multiPageNavigator.commitChanges();
tabStripNavigator.commitChanges();
}
} catch (ex) {
// failed to create tab.
}
}
</script>
</telerik:RadCodeBlock>
<telerik:RadAjaxLoadingPanel ID="uxLoadingPanel" runat="server" Height="175px" Width="175px" IsSticky="true" Transparency="40" BackgroundPosition="Center">
<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border: 0px;" />
</telerik:RadAjaxLoadingPanel>
<asp:Panel ID="uxPanel" runat="server">
<asp:Label ID="uxMessage" runat="server" CssClass="FormLabel" ></asp:Label>
</asp:Panel>
<input id="uxAddTab" value="Add Tab" onclick="AddTab();" type="button" />
<input id="uxCallAjax" value ="CallAjax" onclick="CallAjax();" type="button" />
</form>
</body>
</html>
Public Partial Class TestWebForm
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Protected Sub uxAjaxManager_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs)
uxMessage.Text = Date.Now.ToString
End Sub
End Class
Thanks
Guo
It looks like if i post back, it will add same div ...
<div id="uxNavigatorMultiPage"> |
<div id="ctl02" style="overflow:auto;width:100%;height:100%;"> |
</div><input id="uxNavigatorMultiPage_ClientState" name="uxNavigatorMultiPage_ClientState" type="hidden" /> |
</div> |
maybe it case the exception, but how to solve it ????
Thanks
Guo
it is case by
tabStripNavigator.trackChanges();
multiPageNavigator.trackChanges();
and
multiPageNavigator.commitChanges();
tabStripNavigator.commitChanges();
if we comment them. it runs ok
am i right ?