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

Full screen lag

8 Answers 299 Views

Splitter

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

Christopher Blickley asked on 02 May 2008, 07:41 PM

Hello,

I'm attempting to implement RadSplitter in full screen mode for my site. I have everything working well, but am somewhat dissapointed with the delay that occurs until the page is laid out correctly.

I have gone ahead and used the VisibleDuringInit, which also works well, but I'm actually trying to address the delay itself.

When viewing the online demo that shows full screen, there is a .5 - 1 second delay before the page fully adjusts. In the "classic" RadSplliter demo, this works really well and fast.

It seems to me that something in the underlaying architecture is causing the delay before the layout functions kick in.

Is there any way to speed this up and have it more quickly like the "classic" RadSplitter did? I really want to use the control, bit this lag makes the web site itself feel slow, which is not the case.

Thanks,
Chris

8 Answers, 1 is accepted

answered on 06 May 2008, 01:46 PM

Hi Christopher,

Please wrap the content of the RadPanes in the following DIV element - that should fix the slow loading problem:

    
            <DIV RadResizeStopLookup="true" RadShowStopLookup="true" >    
        
            <!-- place the pane content here>    
        
            </DIV>

We recently found a problem with the VisibleDuringInit property when used with nested RadSplitters. The problem that I refer to is the following - the nested RadSplitter initializes first and becomes visible. After that, the parent RadSplitter calculates its size (at this point it is not visible) and resizes its child splitter (at this point it is visible). We have prepared a workaround that you can use for the time being until we are able to fix the problem. Please have a look at the code bellow that demonstrates the idea:

    
            <body style="margin: 0px; height: 100%">  
        
                <form runat="server" style="height: 100%">  
        
                    <asp:ScriptManager runat="server">  
        
                    </asp:ScriptManager>  
        
                    <telerik:RadSplitter OnClientLoaded="MainSplitterLoaded" ID="_dispatchSplitter" Skin="Web20" runat="server" Visible="true" 
        
                        Height="100%" Width="100%" Orientation="Horizontal" >  
        
                        <telerik:RadPane ID="_dispatchTop" runat="server" Height="70px">  
        
                        </telerik:RadPane>  
        
                        <telerik:RadSplitBar ID="_topSplitBar" runat="server" CollapseMode="forward"></telerik:RadSplitBar>  
        
                        <telerik:RadPane ID="_dispatchMain" runat="server" Scrolling="None">  
        
                            <telerik:RadSplitter ID="_dispatchSubSplitter" Skin="Web20" runat="server" Orientation="Vertical" 
        
                                VisibleDuringInit="false" Visible="true">  
        
                                <telerik:RadPane ID="_driversPane" runat="server" Width="150px">  
        
                                </telerik:RadPane>  
        
                                <telerik:RadSplitBar ID="_splitBar1" runat="server" CollapseMode="forward"></telerik:RadSplitBar>  
        
                                <telerik:RadPane ID="_operatorList" runat="server" Width="100px" Scrolling="None">  
        
                                </telerik:RadPane>  
        
                                <telerik:RadSplitBar ID="_splitBar2" runat="server" CollapseMode="forward"></telerik:RadSplitBar>  
        
                                <telerik:RadPane ID="_dispatchRight" runat="server" Scrolling="None">  
        
                                    <telerik:RadSplitter ID="_dispatchSubMainSplitter" Skin="Web20" runat="server" Orientation="Horizontal" 
        
                                        VisibleDuringInit="false" Visible="true">  
        
                                        <telerik:RadPane ID="_timeTableSplitter" runat="server" Height="39" Scrolling="None">  
        
                                        </telerik:RadPane>  
        
                                        <telerik:RadPane ID="_canvasPane" runat="server" Scrolling="None">  
        
                                        </telerik:RadPane>  
        
                                    </telerik:RadSplitter>  
        
                                </telerik:RadPane>  
        
                            </telerik:RadSplitter>  
        
                        </telerik:RadPane>  
        
                    </telerik:RadSplitter>  
        
                </form>  
        
                <script type="text/javascript">            
        
                var mainSplitterElement = document.getElementById('RAD_SPLITTER_<%= _dispatchSplitter.ClientID %>');        
        
                mainSplitterElement.style.visibility = "hidden";        
        
                var nestedSplitterElement = document.getElementById('RAD_SPLITTER_<%= _dispatchSubSplitter.ClientID %>');        
        
                nestedSplitterElement.style.visibility = "hidden";      
        
                 var nestedSplitterElement2 = document.getElementById('RAD_SPLITTER_<%= _dispatchSubMainSplitter.ClientID %>');        
        
                nestedSplitterElement2.style.visibility = "hidden";       
        
                function MainSplitterLoaded()        
        
                {        
        
                    mainSplitterElement.style.visibility = "visible";        
        
                    nestedSplitterElement.style.visibility = "visible";     
        
                    nestedSplitterElement2.style.visibility = "visible";     
        
                }        
        
                </script>      
        
            </body>

Note that I have removed VisibleDuringInit=false for the RadSplitter controls. I hide the splitters manually, until the main splitter has finished loading.

In case this does not help, please open a new support ticket and send us a small, working project which reproduces the behavior and we will do our best to help.

All the best,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 15 May 2008, 03:26 PM

Hello guys,

Please, accept my sincere apologies for not noticing the version of RadSplitter you are using.

In the 2008.1 415 version of the control the effect which was achieved by adding this DIV is part of the default behavior.

The VisibleDuringInit property now works correctly for nested splitters.

Therefore, what I can suggest is:

Set the VisibleDuringInit property to false.
You can display a loading panel which displays a proper animation while the page is loading. You can find more information how to do this here.

Sincerely yours,
Georgi Tunev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 19 May 2008, 12:49 PM

Hello Georgi,

I have the latest version of Telerik controls (2008.1.416.35) and suffering major performance problems similar to those suggested in this thread.

I have performed some rudimentary traffic analysis (using HttpWatch in IE) and noticed that the page itself (including associated resources) downloads and executes rather quickly (3sec - not brilliant but it's a rather complex page). Total data downloaded is 70kb (most content is grabbed from cache).

So this should be a pretty "rapid-response" page. However, in HttpWatch, once the final request has been received I look to my browser and wait around 5-6sec for the content to display itself (sometime longer)! This is absolutely atrocious in terms of performance and I need to improve on this.

Is there anything you can suggest me doing. In terms of telerik controls on the page, I'm using RadSplitter, RadPanes, RadPanelBar and RadAjaxManager. I'm not sure which control is causing the slow-down but have noticed that when I expand the RadPanelBar (I load each pane's content via ajax) the panel itself displays in less than a second, but the Ajax request doesn't finalise for around 5-6sec!!! (I write out the time on the AjaxManager1.ClientEvents.OnResponseEnd event).

So there seem to be problems with the response times of the Telerik controls, but I don't know (and don't have time to find out) which ones are causing it. I'm wondering if you can point me in the right direction as to settings I need to enable/disable, or generally what I can do to substantially improve performance times, short of removing the Telerik controls altogether!

Cheers,

Daron

answered on 19 May 2008, 01:55 PM

OK,

When I remove all the splitters, radpanes, etc. from my masterpage, my webform loads and renders at least 10x faster than with the splitter (it's almost instantaneous in fact). So there's definitely some major performance issues with the splitter.

However I've now noticed that when I ajaxically populate RadPanelBar panes I get the same slowness of response. Strangely, the pane populates and renders quite fast (well under 1sec) but the ajaxmanager doesn't come back to a "ready state" for at least 6sec. Therefore, if I click another pane too fast I get all sorts of script errors. What is going on with the RadPanelBar/RadAjaxManager combination?

Please advise ASAP, my deadline is a week away and at this rate I'm looking at having to ditch the telerik controls in favour of performance.

Cheers,

Daron