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

A question about RadSplitter and RadPane

7 Answers 116 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
guo jun
Top achievements
Rank 1
guo jun asked on 03 Aug 2009, 09:51 AM
Hi, Telerik Team,

    Could I create(add)  RadSplitter and RadPane in client side by javascript not service-side?
   
Thanks very much!
Jguo

7 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 03 Aug 2009, 02:25 PM
Hi guo jun,

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.
0
guo jun
Top achievements
Rank 1
answered on 05 Aug 2009, 06:50 AM

We want to create tab by javascript, in the relation pageview, load the extent URL.

Thanks
guo

0
guo jun
Top achievements
Rank 1
answered on 05 Aug 2009, 07:07 AM

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:

0
guo jun
Top achievements
Rank 1
answered on 05 Aug 2009, 07:08 AM

<%@ 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>

0
guo jun
Top achievements
Rank 1
answered on 05 Aug 2009, 07:10 AM
VB Code:

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
0
guo jun
Top achievements
Rank 1
answered on 05 Aug 2009, 07:41 AM
I add a asp button, after I click "AddTab", then click this asp button, i find the follow code in html source code.
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
0
guo jun
Top achievements
Rank 1
answered on 05 Aug 2009, 08:47 AM
well, I think i find the reasion,

it is case by

tabStripNavigator.trackChanges();
multiPageNavigator.trackChanges();

and 

multiPageNavigator.commitChanges();
tabStripNavigator.commitChanges();

if we comment them. it runs ok

am i right ?
Tags
TabStrip
Asked by
guo jun
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
guo jun
Top achievements
Rank 1
Share this question
or