RadSplitter LiveResize causing performance issues. Looking for workaround.

[Sean]

Hi Telerik,

So, I am creating a web portal and it is mainly composed of dynamically created controls. There is a RadSplitter which holds panes which are resizable through the use of the RadSplitBar.

The issue is this: If I have LiveResize turned on -- the user grabs aholds of the RadSplitBar and drags it around. This cause's the client-side OnClientResized event to fire...a lot, I believe. Yet, it looks all normal. No lag or anything after the resize finishes and nothing seems to be hanging. Then, I dynamically create a new control on the page and throw up a loading icon as it generates. The amount of movement of the RadSplitBar seems to be correlated to the amount of time it takes the control to appear on the screen. If LiveResize is off, I see no real issues. If I move the RadSplitBar only a little then the control is created in ~5 seconds. If I grab the RadSplitBar and drag around wildly -- the control never seems to create and the program hangs with a loading panel.

I'm looking for a solution to this as our web dashboard is fairly interactive and it would be nice to see the changes live.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server" >
    <script type="text/javascript">
        function OnClientResized(pane, args) {
            var context = new Object();
            var paneIDandHeightandWidth = pane.get_id() + ',' + pane.get_height() + ',' + pane.get_width();
            //Context is just thrown away.
            CallSetDimensions(paneIDandHeightandWidth, context);
        }

        function CallbackOnSucceeded(result, context) {
        //Logging
        }

        function CallbackOnFailed(result, context) {
        //Logging
        }
    </script>
</telerik:RadCodeBlock>

The dynamically created RadPane's set their OnClientResized event to this OnClientResized function.

Server-side code:

protected void Page_Load(object sender, EventArgs e)
{
    RegisterCallBackReference();
}

private void RegisterCallBackReference()
{
    String callBack = Page.ClientScript.GetCallbackEventReference(this, "arg", "CallbackOnSucceeded", "context", "CallbackOnFailed", true);
    String clientFunction = "function CallSetDimensions(arg, context){ " + callBack + "; }";
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Call To Server", clientFunction, true);
}

#region ICallbackEventHandler Members
String returnValue;
string ICallbackEventHandler.GetCallbackResult()
{
    return returnValue;
}

void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
    bool result = SetDimensions(eventArgument);

    if (result)
    {
        returnValue = "Success.";
    }
    else
    {
        returnValue = "Failure.";
    }
}
#endregion

private bool SetDimensions(string args)
{
    bool saveSuccessful = false;

    string[] paneIDandHeightandWidth = args.Split(',');
    string paneID = paneIDandHeightandWidth[0];

    int paneHeight = 0;
    int.TryParse(paneIDandHeightandWidth[1], out paneHeight);

    int paneWidth = 0;
    int.TryParse(paneIDandHeightandWidth[2], out paneWidth);

    RadPane pane = Utilities.FindControlRecursive(Page, paneID) as RadPane;

    if (!object.Equals(pane, null))
    {
        saveSuccessful = true;
        RadPaneSetting paneSetting = RadPaneSetting.GetSettings(pane);
        pane.Height = new Unit(paneHeight, UnitType.Pixel);
        pane.Width = new Unit(paneWidth, UnitType.Pixel);
        controlSave.SavePane(pane);
    }

    return saveSuccessful;
}

Sorry this code isn't exactly..standard. I need to be able to call SavePane after updating a pane's properties so that Session is aware of the updates. Then, when the page reinitializes I get pane's that maintain their resized-ness.

Does this all make sense? Is there anything I can do here? Something like... detect that more re-sizes have occurred (e.g. the user hasn't let go of the RadSplitBar yet) and only call my event after all the resizing is done? I only need to save the pane state at the end of all the movement. 

[Dobromir]

Hi Sean,

By design, when RadSplitter's LiveResize property is set to true the BeforeResize / Resized events are fired multiple times when the slitbar is dragged because the panes are actually resized multiple times with a small delta.

To avoid the multiple callbacks I can suggest you the following approaches to workaround this issue:

• Create a flag that will indicate whether the splitbar is still dragged. Using this flag you can determine if the current event is intiated due to a new splitbar dragging. To achieve this you need to assign a handlers to the onmousedown event of the splitbar's element and onmouseup event of the document.
• In the pane's OnClientResized handler execute a function with a small timeout to check if the size of the pane has been changed, and if so then invoke the new callback. A relatively small timeout (i.e 100ms) will prevent the huge number of callbacks when the panes are resized.

Please let us know if you need further assistance.
All the best,
Dobromir
the Telerik team