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

[Solved] 3 User Controls Displays page only when all loaded

1 Answer 70 Views

Ajax

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

Trygve asked on 27 Jul 2009, 07:53 AM

Hi,

I have a page that loads 3 User Controls. All user controls contains a grid + various other controls. I use a RadAjaxManager in the Page that loads the user controls, and I use RadAjaxManagerProxy in all of the user controls. At intial load of the page it does not display anything untill all of the user controls have finished loading. However when I do a search in a grid or any other thing for that specific user control it only does updates around this control. Is there a way to make the main page load one user control at the time?

What I want is for the page to load it's layout quickly, and then do the populating of the grid in the background sorta speak. Is there a way to obtain this functionality?

ASPX page:

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="MyPimsR3Home.aspx.vb" Inherits="MyPimsR3Home" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <%@ Register src="MyResponsibilities.ascx" tagname="MyResponsibilities" tagprefix="uc1" %> 
        
            <%@ Register src="MyActions.ascx" tagname="MyActions" tagprefix="uc2" %> 
        
            <%@ Register src="MyRisks.ascx" tagname="MyRisks" tagprefix="uc3" %> 
        
            <!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 id="Head1" runat="server"> 
        
                <title></title> 
        
                <script type="text/javascript" language="javascript" src="Javascript/MyPimsR3Home.js" ></script> 
        
                <style type="text/css"> 
        
                    .gridFrame 
        
                    { 
        
                        border-right:#bbd7fa 1px solid; 
        
                        border-left:#bbd7fa 1px solid; 
        
                        border-bottom: #bbd7fa 1px solid; 
        
                        height: 100%; 
        
                    } 
        
                    .titleBar{ color:#00538f;} 
        
                    .collapseArrows {background: url(images/bullet_arrow_up.png) 1000px 50% no-repeat} 
        
                    .bl {background: url(images/bl.gif) 0 100% no-repeat} 
        
                    .br {background: url(images/br.gif) 100% 100% no-repeat} 
        
                    .tl {background: url(images/tl.gif) 0 0 no-repeat #bbd7fa; cursor:pointer;} 
        
                    .tr {background: url(images/tr.gif) 100% 0 no-repeat} 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" RequestQueueSize="1" EnableAJAX="true"> 
        
                </telerik:RadAjaxManager> 
        
                <table width='1030px' cellspacing='0'> 
        
                    <tr> 
        
                        <td id="cResponsibilitiesRow" title="Click to hide My Responsibilities" onclick="toggle(this)"> 
        
                            <div class="tl"><div id="cResponsibilitiesArrow" class="collapseArrows"><div class="tr"> 
        
                               <span id="cMyResponsibilitiesLink" class="titleBar"> 
        
                                <b>&nbsp;&nbsp;&nbsp;&nbsp;My Responsibilities</b></span> 
        
                            </div></div></div> 
        
                        </td> 
        
                   </tr> 
        
                   <tr> 
        
                        <td class="gridFrame"> 
        
                            <table id="cResponsibilitiesTable" width='1030px'> 
        
                                <tr> 
        
                                    <td> 
        
                                        <uc1:MyResponsibilities ID="cMyResponsibilities" runat="server" Visible="false" /> 
        
                                    </td> 
        
                                </tr> 
        
                            </table>                 
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td> 
        
                            &nbsp; 
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td id="cTasksRow" title="Click to hide My Tasks" onclick="toggle(this)"> 
        
                            <div class="tl"><div id="cTasksArrow" class="collapseArrows"><div class="tr"> 
        
                                <span id="cMyTasksLink" class="titleBar"> 
        
                                <b>&nbsp;&nbsp;&nbsp;&nbsp;My Actions</b></span> 
        
                            </div></div></div> 
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td class="gridFrame">     
        
                            <table id="cTasksTable" width='1030px'> 
        
                                <tr> 
        
                                    <td> 
        
                                        <uc2:MyActions ID="cMyActions" runat="server"/> 
        
                                    </td> 
        
                                </tr> 
        
                            </table>   
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td> 
        
                            &nbsp; 
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td id="cRisksRow" title="Click to hide My Risks" onclick="toggle(this)"> 
        
                            <div class="tl" ><div id="cRisksArrow" class="collapseArrows"><div class="tr"> 
        
                                <span id="cMyRisksLink" class="titleBar"> 
        
                                <b>&nbsp;&nbsp;&nbsp;&nbsp;My Risks</b></span> 
        
                            </div></div></div> 
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td class="gridFrame"> 
        
                            <table id="cRisksTable" width='1030px'> 
        
                                <tr> 
        
                                    <td> 
        
                                        <uc3:MyRisks ID="cMyRisks" runat="server" /> 
        
                                    </td> 
        
                                </tr> 
        
                            </table>   
        
                        </td> 
        
                    </tr> 
        
                    <tr> 
        
                        <td> 
        
                            <input id="cCurrentDomain" type="text" runat="server" style="display:none"/>        
        
                        </td> 
        
                    </tr> 
        
                </table> 
        
                </form> 
        
            </body> 
        
            </html>

ASCX Page:

    
            <%@ Control Language="VB" AutoEventWireup="true" CodeFile="MyResponsibilities.ascx.vb" Inherits="MyResponsibilities" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <link href="Stylesheets/CustomGridStyle.css" rel="stylesheet" type="text/css" /> 
        
            <telerik:RadAjaxManagerProxy ID="RespRadAjaxManagerProxy" runat="server"> 
        
                <AjaxSettings> 
        
                    <telerik:AjaxSetting AjaxControlID="ResponsibilitiesRadGrid"> 
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="ResponsibilitiesRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
            </telerik:RadAjaxManagerProxy> 
        
            <telerik:RadAjaxLoadingPanel ID="RespRadAjaxLoadingPanel1" runat="server" Transparency="30" IsSticky="True"> 
        
            </telerik:RadAjaxLoadingPanel> 
        
            <telerik:RadCodeBlock ID="RespRadCodeBlock1" runat="server"> 
        
                <script type="text/javascript"> 
        
                </script> 
        
            </telerik:RadCodeBlock> 
        
            <table style="width: 90%; height: 100%;"> 
        
                <tr> 
        
                    <td> 
        
                        <telerik:RadGrid ID="ResponsibilitiesRadGrid" PageSize="50" runat="server" Height="400px" BackColor="#CDE4FA" EnableViewState="false"> 
        
                            <FooterStyle CssClass="GridFooter_Office2007"></FooterStyle>  
        
                            <SelectedItemStyle CssClass="GridSelectedItemStyle" /> 
        
                            <HeaderContextMenu Skin="Office2007" EnableTheming="True"> 
        
                                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                            </HeaderContextMenu> 
        
                            <MasterTableView> 
        
                                <RowIndicatorColumn> 
        
                                    <HeaderStyle Width="20px"></HeaderStyle> 
        
                                </RowIndicatorColumn> 
        
                                <ExpandCollapseColumn> 
        
                                    <HeaderStyle Width="20px"></HeaderStyle> 
        
                                </ExpandCollapseColumn> 
        
                                <AlternatingItemStyle CssClass="GridAltItemStyle" /> 
        
                            </MasterTableView> 
        
                            <ClientSettings> 
        
                                <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true"> 
        
                                </Scrolling> 
        
                                <Selecting AllowRowSelect="true" /> 
        
                                <ClientEvents OnRowDblClick="respRowDblClick" /> 
        
                            </ClientSettings> 
        
                            <FilterMenu Skin="Office2007" EnableTheming="True"> 
        
                                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        
                            </FilterMenu> 
        
                        </telerik:RadGrid> 
        
                    </td> 
        
                </tr> 
        
                <input id="hdnRespCurrentDomain" type="text" runat="server" style="display:none;"/> 
        
            </table> 
        
            <script language="javascript"> 
        
                startUpRespScript(); 
        
            </script>

Any help is much appreciated.

Thanks,

Trygve

1 Answer, 1 is accepted

answered on 30 Jul 2009, 06:23 AM

Hello Trygve,

Basically, there is no option to alter the way the controls are loaded, or first preload the other portions of the page, and then the controls.
Another option which you can consider would be to load the user controls in panels which are set with dislplay=false. Then, after the controls are loaded, after some interval, for example seconds, you can toggle off the display of the panels, making the user controls visible.
I hope this suggestion helps.

Best wishes,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.