Frame-type functionality

10 posts, 1 answers
  1. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 19 Jan 2010 Link to this post

    Hi,
    I have been playing abround with the asp controls, more specifically the layout controls like RadSplitter and RadSlidingZones/Panels. What I am looking to do is to populate part of a page from a separate aspx (kind of like frame functionality) and maybe use Ajax to populate that part of the page. eg. I have a treeview that is static down the left hand side and have different pages I want to display on the right, hopefully loading them ajax-style.

    Any ideas/suggestions on how best to achieve this using the Telerik bits?

  2. Answer
    Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 19 Jan 2010 Link to this post

    Hello Alwin,

    First off, you want to use a RadSplitter for this.  A RadPane has a ContentUrl property, which then turns that pane into an iFrame.  So, in the simplest of scenarios you'll have this pseudocode:

    <Splitter>
      <LeftPane>
       <TreeView />
      </LeftPane>
      <RightPane />
    </Splitter>

    There's a few different ways to load the page in the right-hand pane, but the best would be to use the client-side API of both the TreeView and the RadPane.  Here's the "finished" product:

    <%@ Page Language="VB" %> 
     
    <!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></title>  
      <style type="text/css">  
        html, body, form { height:100%; width:100%; overflow:hidden; margin:0; padding:0; }  
      </style> 
    </head> 
    <body> 
      <form id="form1" runat="server">  
      <telerik:RadScriptManager runat="server" ID="rsm" CdnSettings-TelerikCdn="Enabled" /> 
      <telerik:RadSplitter runat="server" ID="rsBot" Height="100%" Width="100%" Orientation="Vertical">  
        <telerik:RadPane runat="server" ID="rpLeft" Width="220px" Scrolling="None" MinWidth="200" MaxWidth="400">  
          <telerik:RadTreeView runat="server" ID="rtvNav" SingleExpandPath="true" OnClientNodeClicked="NodeClick" Height="100%" Width="100%">  
            <Nodes> 
              <telerik:RadTreeNode Text="Telerik" Value="http://www.telerik.com" /> 
              <telerik:RadTreeNode Text="Search Engines">  
                <Nodes> 
                  <telerik:RadTreeNode Text="Bing" Value="http://www.bing.com" /> 
                  <telerik:RadTreeNode Text="Google" Value="http://www.google.com" /> 
                </Nodes> 
              </telerik:RadTreeNode> 
              <telerik:RadTreeNode Text="Telerik TV" Value="http://tv.telerik.com" /> 
            </Nodes> 
          </telerik:RadTreeView> 
        </telerik:RadPane> 
        <telerik:RadSplitBar runat="server" ID="rsbLeft" CollapseMode="Forward" EnableResize="true" /> 
        <telerik:RadPane runat="server" ID="rpMain" /> 
      </telerik:RadSplitter> 
      <telerik:RadCodeBlock runat="server" ID="rcbCP">  
        <script type="text/javascript">  
          
          function get_LeftPane() { var pane = $find("<%= rpLeft.ClientID %>"); return pane; }  
          function get_ContentPane() { var pane = $find("<%= rpMain.ClientID %>"); return pane; }  
          function get_TreeView() { var tree = $find("<%= rtvNav.ClientID %>"); return tree; }  
            
          // The following checks the value of the clicked node and if there is one, navigates to the page in the content pane; if not, then it just toggles the node  
          function NodeClick(sender, args) { var node = args.get_node(); var url = node.get_value(); if (url) { get_ContentPane().set_contentUrl(url); node.expand(); } else { node.toggle(); } }  
     
          // Use the following to set the selected page in the tree if the pages in the content pane link to other pages  
          function set_selected(url) {  
            var node = get_TreeView().findNodeByValue(url);  
            if (node) { node.set_selected(true); ExpandParents(node); node.scrollIntoView(); }  
          }  
          function ExpandParents(node) { if (node.get_parent() != node.get_treeView()) { node.get_parent().expand(); ExpandParents(node.get_parent()); } }  
            
        </script> 
      </telerik:RadCodeBlock> 
      </form> 
    </body> 
    </html> 
     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 20 Jan 2010 Link to this post

    Great help! I have got it working fine with client-side scripts.

    Is there a way to use ajax for this? eg. I want to use a server side context menu click to populate a pane so I get the nice ajax loading image (and it's easier to work server side)

    I have linked my context menu to my pane using the ajax manager control but whenever i do this i get he error:

     

    Server Error in '/ASP Tests' Application.

    SplitterItemsCollection must contain SplitterItem objects

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.ArgumentException: SplitterItemsCollection must contain SplitterItem objects

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [ArgumentException: SplitterItemsCollection must contain SplitterItem objects]
       Telerik.Web.UI.SplitterItemsCollection.AddAt(Int32 index, Control child) +98
       Telerik.Web.UI.RadAjaxControl.MoveUpdatePanel(Control initiator, Control updated) +214
       Telerik.Web.UI.RadAjaxControl.PerformRender() +508
       Telerik.Web.UI.RadAjaxControl.OnPageRender(HtmlTextWriter writer, Control page) +1858
       Telerik.Web.UI.RadAjaxControl.RenderPageInAjaxMode(HtmlTextWriter writer, Control page) +163
       System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +256
       System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +19
       System.Web.UI.Page.Render(HtmlTextWriter writer) +29
       System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27
       System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +99
       System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1266
    


    Version Information: Microsoft .NET Framework Version:2.0.50727.4927; ASP.NET Version:2.0.50727.4927
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 20 Jan 2010 Link to this post

    Hi Alwin,

    You cannot ajaxify splitter panes. Either ajaxify the whole splitter, or some container inside the pane.

    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 20 Jan 2010 Link to this post

    Hi Alwin,

    You can still get a loading image using client-side script if you want.  I'd recommend doing this as it will be  significantly faster than ajaxifying the whole splitter.  Such as:

    NodeClick(sender, args) {  
      ToggleLoading(true);  
      var node = args.get_node();   
      var url = node.get_value();   
      if (url) {   
        get_ContentPane().set_contentUrl(url); node.expand();   
      } else {   
        node.toggle();   
      }   
    }  
     
    ToggleLoading(show) {   
      var loading = $get("loadingPanel");   
      if (show) {   
        loading.style.visibility = "visible";   
      } else {   
        loading.style.visibility = "hidden";   
      }   

    And then in your content pages (the ones loaded inside the pane of the Splitter), add this script (preferably to a MasterPage):

    Sys.Application.add_load(top.ToggleLoading(false));

    Note that assumes that the main splitter page is the outer-most page (top); you could also use parent.ToggleLoading(false) in some scenarios.  Using top allows you to nest your content pages in other splitters if you'd like.  Hope that helps,

    Shaun.


  7. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 20 Jan 2010 Link to this post

    Thanks Shaun. I have added the scripts ,I get no errors but the loading panel doesn't show?
    ('AnotherPage.aspx' has one line of text and a 'sleep' in page_load to give the image time to show)

     

    <script type="text/javascript">

     

     

    function Button2_onclick() {

     

    ToggleLoading(

    true);

     

     

    var pne = $find("<%=RadPane3.ClientID%>");

     

    pne.set_contentUrl(

    "http://localhost:51970/ASP%20Tests/AnotherPage.aspx");

     

    }

     

     

    function ToggleLoading(show) {

     

     

     

    var loading = $get("RadAjaxLoadingPanel1");

     

     

     

    if (show) {

     

    loading.style.visibility =

    "visible";

     

    }

    else {

     

    loading.style.visibility =

    "hidden";

     

    }

     

    }

     

     

    </script>

     

  8. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 20 Jan 2010 Link to this post

    Hi Alwin,

    It's probably better to create your own loading panel in the same page as the Splitter:

    <div id="loadingPanel" style="visibility: hidden;">Loading...</div>

    Use your CSS to define how that loading panel will look, such as

    #loadingPanel { position: absolute; height: 100%; width: 100%; background: #ccc; vertical-align: middle; text-align: center; z-index: 1000; }

    Then change the ToggleLoading back so that it $get()s the loading panel div by it's ID.  If you also want the loading image, you can get them from the Skins folder in your Telerik installation directory and then either use it in the CSS for its background, or within the inner HTML of the <div>.  Since there's no AJAX happening I suspect that's why the loading panel isn't showing up.  I think there's probably a client-side API for the RadAjaxLoadingPanel but I can't find it online.  Hope that helps,

    Shaun.
  9. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 20 Jan 2010 Link to this post

    I have been looking at the following page in the help: ms-help://telerik.aspnetajax.radcontrols.2009.Q3/telerik.aspnetajax.radajax.2009.Q3/show-hide-loadingpanel.html

    It sort of implies that the loading panel can be shown anywhere/anytime but I can only ever get it to show when there is an actual ajax request happening, not sure if this is a bug or if I misinterpreted the doc.

    You mentioned in a previous post that I could perhaps ajaxify another container in the pane, what would use for that? ie. do you have something else that is ajaxable and can load external content.
  10. Shaun Peet
    Shaun Peet avatar
    571 posts
    Member since:
    Aug 2004

    Posted 21 Jan 2010 Link to this post

    Hi Alwin,

    Just as an FYI, I've submitted a code library project which might be helpful to you and anyone else reading this thread.  It usually takes a day or two for Telerik to "approve" a code library submission so check with this page to grab it once it's approved:

    http://www.telerik.com/community/code-library/aspnet-ajax/general.aspx

    Hope that helps,

    Shaun.
  11. milos
    milos avatar
    3 posts
    Member since:
    Aug 2011

    Posted 27 Oct 2011 Link to this post

    Hi,

    this looks like a great solution.  Unfortunately I get an error when I try to enter the control panel >

    Server Error in '/' Application.

    Failed to generate a user instance of SQL Server due to a failure in starting the process for the user instance. The connection will be closed.




    Here are the details:

    System.Web.HttpException was unhandled by user code
      ErrorCode=-2147467259
      Message=Unable to connect to SQL Server database.
      Source=System.Web
      WebEventCode=0
      StackTrace:
           at System.Web.DataAccess.SqlConnectionHelper.CreateMdfFile(String fullFileName, String dataDir, String connectionString)
           at System.Web.DataAccess.SqlConnectionHelper.EnsureSqlExpressDBFile(String connectionString)
           at System.Web.DataAccess.SqlConnectionHelper.GetConnection(String connectionString, Boolean revertImpersonation)
           at System.Web.Profile.SqlProfileProvider.GetPropertyValuesFromDatabase(String userName, SettingsPropertyValueCollection svc)
           at System.Web.Profile.SqlProfileProvider.GetPropertyValues(SettingsContext sc, SettingsPropertyCollection properties)
           at System.Configuration.SettingsBase.GetPropertiesFromProvider(SettingsProvider provider)
           at System.Configuration.SettingsBase.GetPropertyValueByName(String propertyName)
           at System.Configuration.SettingsBase.get_Item(String propertyName)
           at System.Web.Profile.ProfileBase.GetInternal(String propertyName)
           at System.Web.Profile.ProfileBase.get_Item(String propertyName)
           at System.Web.Profile.ProfileBase.GetPropertyValue(String propertyName)
           at ProfileCommon.get_realName() in C:\Users\Milos\AppData\Local\Temp\Temporary ASP.NET Files\root\3b7ab8f0\32c521ba\App_Code.ukwnew1p.1.vb:line 33
           at ASP.cp_default_aspx.Page_Load(Object sender, EventArgs e) in C:\Users\Milos\Documents\Content Manager\ControlPanel\CP\Default.aspx:line 10
           at System.Web.Util.CalliHelper.EventArgFunctionCaller(IntPtr fp, Object o, Object t, EventArgs e)
           at System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e)
           at System.Web.UI.Control.OnLoad(EventArgs e)
           at System.Web.UI.Control.LoadRecursive()
           at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)
      InnerException: System.Web.HttpException
           ErrorCode=-2147467259
           Message=Unable to connect to SQL Server database.
           Source=System.Web
           WebEventCode=0
           StackTrace:
                at System.Web.Management.SqlServices.GetSqlConnection(String server, String user, String password, Boolean trusted, String connectionString)
                at System.Web.Management.SqlServices.SetupApplicationServices(String server, String user, String password, Boolean trusted, String connectionString, String database, String dbFileName, SqlFeatures features, Boolean install)
                at System.Web.Management.SqlServices.Install(String database, String dbFileName, String connectionString)
                at System.Web.DataAccess.SqlConnectionHelper.CreateMdfFile(String fullFileName, String dataDir, String connectionString)
           InnerException: System.Data.SqlClient.SqlException
                Class=14
                ErrorCode=-2146232060
                LineNumber=65536
                Message=Failed to generate a user instance of SQL Server due to a failure in starting the process for the user instance. The connection will be closed.
                Number=15372
                Procedure=""
                Server=.\SQLEXPRESS
                Source=.Net SqlClient Data Provider
                State=1
                StackTrace:
                     at System.Data.SqlClient.SqlInternalConnection.OnError(SqlException exception, Boolean breakConnection)
                     at System.Data.SqlClient.TdsParser.ThrowExceptionAndWarning()
                     at System.Data.SqlClient.TdsParser.Run(RunBehavior runBehavior, SqlCommand cmdHandler, SqlDataReader dataStream, BulkCopySimpleResultSet bulkCopyHandler, TdsParserStateObject stateObj)
                     at System.Data.SqlClient.SqlInternalConnectionTds.CompleteLogin(Boolean enlistOK)
                     at System.Data.SqlClient.SqlInternalConnectionTds.AttemptOneLogin(ServerInfo serverInfo, String newPassword, Boolean ignoreSniOpenTimeout, TimeoutTimer timeout, SqlConnection owningObject)
                     at System.Data.SqlClient.SqlInternalConnectionTds.LoginNoFailover(ServerInfo serverInfo, String newPassword, Boolean redirectedUserInstance, SqlConnection owningObject, SqlConnectionString connectionOptions, TimeoutTimer timeout)
                     at System.Data.SqlClient.SqlInternalConnectionTds.OpenLoginEnlist(SqlConnection owningObject, TimeoutTimer timeout, SqlConnectionString connectionOptions, String newPassword, Boolean redirectedUserInstance)
                     at System.Data.SqlClient.SqlInternalConnectionTds..ctor(DbConnectionPoolIdentity identity, SqlConnectionString connectionOptions, Object providerInfo, String newPassword, SqlConnection owningObject, Boolean redirectedUserInstance)
                     at System.Data.SqlClient.SqlConnectionFactory.CreateConnection(DbConnectionOptions options, Object poolGroupProviderInfo, DbConnectionPool pool, DbConnection owningConnection)
                     at System.Data.ProviderBase.DbConnectionFactory.CreateNonPooledConnection(DbConnection owningConnection, DbConnectionPoolGroup poolGroup)
                     at System.Data.ProviderBase.DbConnectionFactory.GetConnection(DbConnection owningConnection)
                     at System.Data.ProviderBase.DbConnectionClosed.OpenConnection(DbConnection outerConnection, DbConnectionFactory connectionFactory)
                     at System.Data.SqlClient.SqlConnection.Open()
                     at System.Web.Management.SqlServices.GetSqlConnection(String server, String user, String password, Boolean trusted, String connectionString)
                InnerException:




    I have 2008 Express R2 installed. 

    I am using VS2010 for Vista.

    Best,
    Milos
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017