A question about RadSplitter and RadPane

8 posts, 0 answers
  1. guo jun
    guo jun avatar
    10 posts
    Member since:
    Jul 2009

    Posted 03 Aug 2009 Link to this post

    Hi, Telerik Team,

        Could I create(add)  RadSplitter and RadPane in client side by javascript not service-side?
       
    Thanks very much!
    Jguo
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 03 Aug 2009 Link to this post

    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.
  3. guo jun
    guo jun avatar
    10 posts
    Member since:
    Jul 2009

    Posted 05 Aug 2009 Link to this post

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

    Thanks
    guo

  4. guo jun
    guo jun avatar
    10 posts
    Member since:
    Jul 2009

    Posted 05 Aug 2009 Link to this post

    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:

  5. guo jun
    guo jun avatar
    10 posts
    Member since:
    Jul 2009

    Posted 05 Aug 2009 Link to this post

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

  6. guo jun
    guo jun avatar
    10 posts
    Member since:
    Jul 2009

    Posted 05 Aug 2009 Link to this post

    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
  7. guo jun
    guo jun avatar
    10 posts
    Member since:
    Jul 2009

    Posted 05 Aug 2009 Link to this post

    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
  8. guo jun
    guo jun avatar
    10 posts
    Member since:
    Jul 2009

    Posted 05 Aug 2009 Link to this post

    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 ?
Back to Top