Severe performance issues with large number of controls + radwindow + maximize/restore

[Blair]

I am having performance issues with a RadWindow containing a large number of controls and two charts across several tabs.  Initial load is very slow, navigation is acceptable but not ideal.  Additionally, restoring from maximized takes way too long.

Link to sample application demonstrating the problem:  removed due to Telerik End User License Agreement for UI for ASP.NET AJAX violation.

Due to an organizational requirement & legacy applications this solution must be run in IE 10.   

Additional information:  Latest version of Telerik.Web.UI, Visual Studio 2012, IE 10.0.9200.17357

Steps to reproduce:

1) Run the solution without debugging to maximize performace

2) Click the button to launch the RadWindow

3) Note the performance between when the page renders and when it becomes navigable.

4) Maximize the RadWindow - slow but acceptable

5) Restore the RadWindow - completely unacceptable

 

I do not know what I can do to make this better and am open to any and all suggestions to do so, including areas outside of the RadWindow itself (web config, master page, etc).  As you can see in the code I have tried RadInputManager as recommended in the documentation and RadMultiPage.RenderSelectedPageOnly (with conditional binding in the code behind) to see if that would improve anything (it did not).   

Please help!

Blair Davies

[Danail Vasilev]

Hi Blair,

I have investigated the provided sample and found that the performance issue is caused due to the existence of many RadTimePicker controls inside the repeater with ID="Repeater1". It looks like IE cannot handle well enough the big quantity of HTML and JavaScript.

What I can suggest is that you use RadInputManager+ASP:TextBoxes instead of the RadTimePicker controls. Such an example is illustrated in this demo (http://demos.telerik.com/aspnet-ajax/input/examples/radinputmanager/dynamicinputfiltersettings/defaultcs.aspx?product=input) and this help article (http://www.telerik.com/help/aspnet-ajax/input-inputmanager-performance.html).

Could I also ask you to not share Telerik UI for ASP.NET AJAX dev .dll files in public forums as this violates Telerik End User License Agreement for UI for ASP.NET AJAX. If you want to send us a project you can either open a support ticket and attach it there or provide a link to a project that contains no dev Telerik UI .dll files or the trial ones. That being said I have removed the link to the provided example.

Regards,
Danail Vasilev
Telerik

[Blair]

My apologies on the DLL.  I removed the file immediately when I got the email notification of your reply.

A bit distracted by shifting priorities but I will try the RadInputManager with the time pickers soon and report back.  Thank you for the help.

[Blair]

Is there an easy way to use a TimePicker with a RadInputManager?  I can't find an option to use one, only a DatePicker.  I tried overriding the SharedCalendar with a TimeView, but that didn't work either.

I'm thinking my only option is to embed a single TimePicker control on the page and have all of the Repeater's asp:TextBox controls use javascript to share the TimePicker via Javascript.

[Danail Vasilev]

Hi Blair,

This is not supported out of the box, but you can use the following workaround in order to simulate it:

ASPX:

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
    <script>
        var targetInput;
        function OnFocus(sender, args) {
            targetInput = args.get_targetInput();
            var position = $telerik.getBounds($get(targetInput.get_id()))
            $find("<%=RadTimePicker1.ClientID%>").showTimePopup(position.x, position.y);
        }
        function OnDateSelected(sender, args) {
            var selectedTime = args.get_newValue();
            targetInput.set_value(selectedTime);
        }
    </script>
    <telerik:RadInputManager ID="RadInputManager1" runat="server" Skin="Telerik">
        <telerik:DateInputSetting BehaviorID="TextBoxBehavior1" EmptyMessage="type here" InitializeOnClient="false" DateFormat="hh:mm tt">
            <ClientEvents OnFocus="OnFocus" />
            <TargetControls>
                <telerik:TargetInput ControlID="Repeater1" />
            </TargetControls>
        </telerik:DateInputSetting>
    </telerik:RadInputManager>
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <asp:TextBox ID="TextBox1" runat="server" />
        </ItemTemplate>
    </asp:Repeater>
    <div style="visibility: hidden;">
        <telerik:RadTimePicker ID="RadTimePicker1" runat="server">
            <ClientEvents OnDateSelected="OnDateSelected" />
        </telerik:RadTimePicker>
    </div>
</form>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    Repeater1.DataSource = new int[] { 1, 2, 3, 4, 5 };
    Repeater1.DataBind();
}

Regards,
Danail Vasilev
Telerik