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

Frame-type functionality

9 Answers 149 Views

General Discussions

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

9 Answers, 1 is accepted

Accepted

answered on 19 Jan 2010, 06:20 PM

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>

answered on 20 Jan 2010, 09:05 AM

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

answered on 20 Jan 2010, 01:18 PM

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.

answered on 20 Jan 2010, 01:53 PM

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)

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>

answered on 20 Jan 2010, 02:08 PM

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.

answered on 20 Jan 2010, 02:56 PM

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.

answered on 27 Oct 2011, 09:47 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools