Loading Widgets Async : Dashboard

[Aarsh]

Hi friends, I am having different user controls that load up grid views form SPes on the dashboard. I am using this control to display all such widgets on the dashboard page. Now (most likely) as this control has been built with this scenario in mind, would it be possible to load each widget asynchronously on the dashboard ?

Thanks,
-Aarsh

[Slav]

Hello Aarsh,

It is possible to AJAXify the content of a RadDock so that the controls inside are loaded asynchronously as shown in the following code sample:

<telerik:RadDock runat="server" ID="RadDock1" Title="ContentTemplate">
    <ContentTemplate>
        <asp:UpdatePanel ID="Updatepanel1" runat="server">
            <ContentTemplate>
                <asp:label ID="Label1" text="RadDock content" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </ContentTemplate>
</telerik:RadDock>

If there is something specific in the way the content should be loaded, please elaborate so that I can provide a more to the point answer.

All the best,
Slav
the Telerik team

[Aarsh]

LINK

Hello,

Plot:

I've created a dashboard for my asp.net website running on .NET framework 4.0 and I am using widgets (which essentially are just different user controls). Now most of these widget would actually have 2-3 parameters and a 'Load' button (very much likely the way reports work)

To add, I am having a 'preview pane' which actually loads the detail - if I click on any of the reord in the widget - in the page that host all these wigets as asp.net user controls.

Problem:

I observed that:

• When dashboard screen (the host for all user controls) load for the first time it actually executes user controls twice including the function of user control that actually loads the data from database
• Second problem is, all user controls reload (including those who are getting data from SQL server) after each post back originated anywhere from the page

Technologies:

SQL Server, asp.net grid view to display data in a tabular format, telerik's RadDockLayout, RadDockZone & RadDock for having Widget kind of user interface on my dashboard page

I'd love to see my all user controls loding in an asynchronous manner and not bothering each other when I load them again

Thanks,

-Aarsh

[Aarsh]

http://forums.asp.net/post/5411957.aspx

Hello,

Plot:

I've created a dashboard for my asp.net website running on .NET framework 4.0 and I am using widgets (which essentially are just different user controls). Now most of these widget would actually have 2-3 parameters and a 'Load' button (very much likely the way reports work)

To add, I am having a 'preview pane' which actually loads the detail - if I click on any reord in any widget (I mostly will have a link button dynamically added to gridview to get the parameters for the record clicked and then I'd trigger the click event which in trun calls the Stored Pocedure and sends data back to host page's code-behind, where this preview pane exists) - in the page that host all these widgets as asp.net user controls.

Problem:

I observed that:

1. When dashboard screen (the host for all user controls) load for the first time it actually executes user controls twice including the function of user control that actually loads the data from database
2. Second problem is, all user controls reload (including those who are getting data from SQL server) after each post back originated anywhere from the page

Current Code Issue:

I tried to implement AJAX-ing in following manner :

<telerik:RadDockZone ID="zone1" runat="server" Width="360">
    <telerik:RadDock ID="Dock6" runat="server" EnableAnimation="false" DockMode="Docked"
        Title="Files Checked Out">
        <Commands>
            <telerik:DockExpandCollapseCommand />
        </Commands>
        <ContentTemplate>
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
            </telerik:RadAjaxLoadingPanel>
            <asp:Panel ID="Panel_Dock6" runat="server">
                <Widget:WidgetName ID="WidgetID1" runat="server"/>
            </asp:Panel>
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Height="75px"
                Width="75px" Transparency="50">
                <img alt="Loading..." src="~/loading.gif" style="border: 0;" />
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                    function pageLoad(sender, eventArgs) {
                        if (!eventArgs.get_isPartialLoad()) {
                            $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");
                        }
                    }
                </script>
            </telerik:RadCodeBlock>
        </ContentTemplate>
    </telerik:RadDock>
</telerik:RadDockZone>

//this function never gets called so I am not sure if we want to keep this event handler or not
protected void RadAjaxManager1_AjaxRequest(object sender, EventArgs e)
{
            Dashboard.Widgets.Widget w= new Widgets.Widget ();
            w.LoadWidget();
}

where w.LoadWidget ultimately is the same code as that of Page_Load in that .ascx.cs file

These all ... did loaded the GridView but did not called the method "LoadWidget()" & Page_Load got called just once instead twice and I got the following error in my jQuery 1.9 code :
JavaScript runtime error: Syntax error, unrecognized expression: #

Thanks,
-Aarsh

[Slav]

Hello Aarsh,

I am not quite sure of your implementation from the code samples and the information you provided. You mentioned that you are executing the code for adding the user control on Page_Load and on RadAjaxManager1_AjaxRequest. Also, the user control appears to be added declaratively on the page so it is expected that its code will be executed multiple times. Please elaborate on your scenario so that I can help you accordingly.

If you do not want to reload every user control on postback, you should add them on the page via AJAX request. Each request will need to update only a particular user control, which can be achieved through update panels with conditional updating or via RadAjaxManager, which has a separate update settings for each user control.

Regards,
Slav
Telerik

[Aarsh]

Sorry for making my question confusing b/w "loading" and "declaring". Actually I do have declared them in aspx code manualy (static) but when the host page loads the user controls the user controls would talk to database and load the data from database. The process of loading data from database happens repeatatively. The Page_Load that you've in bold text is that of user control's and not of host page's code behind. And is not for Adding the control but, for actually loading the data in the control

[Slav]

Hello Aarsh,

Thank you for clarifying your scenario. Indeed, the life cycle of the user controls is executed twice because:
1. They are loaded initially on the page.
2. When the AJAX request is performed on pageLoad, the page and its user controls go through their lifecycle again even if only the specified area of the page is updated.

This is an expected behavior, because the RadAjaxManager user ASP.NET UpdatePanels, which trigger the execution of the full page lifecycle (and that of the user controls if there are any) regardless of the area they need to update. You can set flags to prevent the execution of your code in certain cases or use another approach to make request to the server, if any of the other major ways to do this is applicable in your scenario.

Regards,
Slav
Telerik