Slow Window Resize

[Mark Davison]

Hi,

Has anyone noticed a problem with the splitter when resizing the browser window? If you have a large amount of content in a pane, then you maximise the window, it can take a minute or more for the browser window to redraw properly. You have to have a huge amount of content i.e. a 1500 row table in one pane, 1500 graphics in another pane. Yes we do need this as we are writing a Gantt Chart and a project plan for some of our customers can easily have double this amount of tasks.

If I remove the splitter and implement my own DIV's, it takes it 2 seconds to redraw.

I really like the display and functionality behind the splitter but I cannot use it unless someone can tell me how to correct this problem! It must be something to do with the splitter code?

Regards,

Mark

[Tsvetie]

Hi Mark Davison,
When you resize a RadPane, it checks all its child controls whether any of them should be resized as well. That is why, when you place a RadTreeview, for example, with several hundreds of nodes in a RadPane and resize that pane, it will
iterate through all these nodes to perform that check. That operation in your case takes a lot of time to complete and as a result, you get the unexpected bad performance.

For cases like yours, we have prepared a way to skip that operation, so that you achieve the performance that you expect. Please, refer to the attached files that demonstrate the method to skip the time-consuming operation.

Genareally, you have to wrap the content of the RadPanes in the following DIV tag:

            <telerik:RadPane ID="RadPane1" runat="server">
                <div RadResizeStopLookup="true" RadShowStopLookup="true" >
                    <radT:RadTreeView ContentFile="Tree.xml" ID="RadTreeView1"
                        runat="server">
                    </radT:RadTreeView>
                </div>
            </telerik:RadPane>

However, we have not yet implemented that feature for the Prometheus RadSplitter and therefore, please add the following javascript to the end of your page:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <telerik:RadSplitter ID="RadSplitter1" runat="server">
        <telerik:RadPane ID="RadPane1" runat="server">
            <div RadResizeStopLookup="true" RadShowStopLookup="true" >
                <radT:RadTreeView ContentFile="Tree.xml" ID="RadTreeView1"
                    runat="server">
                </radT:RadTreeView>
            </div>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" />
        <telerik:RadPane ID="RadPane2" runat="server">
            This splitter demonstrates the optimized resize on a RadTreeview with 900 nodes.
        </telerik:RadPane>
    </telerik:RadSplitter>

    <script type="text/javascript">
        Telerik.Web.UI.CallRadResize = function (parentElement)
        {
            var children = parentElement.getElementsByTagName("*");
            for (var i = 0; i < children.length; i ++)
            {
                var child = children[i];
                if (child.RadResize)
                {
                    child.RadResize();
                }
                if (child.RadResizeStopLookup) return;
            }
        };

        Telerik.Web.UI.CallRadShow = function (parentElement)
        {
            var children = parentElement.getElementsByTagName("*");
            for (var i = 0; i < children.length; i ++)
            {
                var child = children[i];
                if (child.RadShow)
                {
                    child.RadShow();
                }
                if (child.RadShowStopLookup) return;
            }
        };
    </script>
</form>

This feature will be implemented for the next update of the Prometheus suite.

Best wishes,
Tsvetie
the Telerik team

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

[Mark Davison]

Hi,

Thanks for the response. I have managed to implement this ok so I will let you know if I have any problems.

Regards,

Mark

[Mark Davison]

Hi,

This is now a lot better but can still task 10-13 seconds to get control back once you resize the browser. Is there anything else I can do?

Regards,

Mark

[Tsvetie]

Hello Mark,
Could you please provide detailed information on the layout of your page? It would be best if you could prepare and send us a simple running project (in a new support ticket) that demonstrates the issue - we will do our best to find what is causing the bad performance and get back to you as soon as possible.

Greetings,
Tsvetie
the Telerik team

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

[AS]

I am also experiencing this problem (version Q4 2006) when using the RadSplitter. I have 2 RadPanes separated by a RadSplitBar. The RadSplitBar has CollapseMode set to forward.  In my bottom RadPane, I have a Grid with hundreds of rows of data. I've tried encompassing the grid with the following div tags :

 <div RadResizeStopLookup="true" RadShowStopLookup="true" > 

However, it still takes up to 2-3 MINUTES when a pane is expanded/collapsed.

Any help is appreciated!

[AS]

I just realized that I posted this to the wrong forum.  My apologies for posting this to the Prometheus forum instead of the RadControls forum.

[Tsvetie]

Hello Ami Shah,
The approach, described here, applies also in case you are using the old version of the RadSplitter control - the one that is not part of the Prometheus suite.

In case the problem persists, please open a new support ticket and send us a simple running project, demonstrating it.

Kind regards,
Tsvetie
the Telerik team

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

[Jacky Chau]

Will these performance issues be resolved soon?  I am planning on using RadSplitter extensively in the redesign of a website and will run into situations where a page may have 3-5 sliding panels with trees and grids inside.  Should I look for alternative controls?  I don't want to start using it in the web framework only to have to remove all the work later.

[Tsvetie]

Hello Jacky Chau,
You should not have problems when using trees with several hundred nodes and grids, displaying a lot of content, in case you wrap them in a DIV element with the RadResizeStopLookup and RadShowStopLookup attributes set to true.

Sincerely yours,
Tsvetie
the Telerik team

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

[Bernhard]

Can i use this with RadSlidingPane also?
I have one RadSlidingZone with 2 RadSlidingPane. And it takes 3-4 seconds on each Postback to show the RadSlidingPane.
I use Version 2007.3.1314.20

Regards,
Bernhard

[Tsvetie]

Hi Bernhard,
Yes, you can wrap the content of the RadSlidingPanes in the mentioned DIV element.

Greetings,
Tsvetie
the Telerik team

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

[Daron]

[Daron]

RE: Avant Browser

It seems that Avant (which I thought was merely a wrapper around IE) struggles with the window resize event. Just tried in IE6 and works a charm. Happy with splitter again....

Lesson learnt? Uninstall Avant!

Cheers,
Daron