Loading Panel and Grid

[Jako]

Hi there

I have a large data grid that I need to have a loading panel for. I have got it working by combining code from a few posts. I have two problems though.

1. If I don't set a height on my Grid, the initial loading panel is about about 5pixels high. The problem is that the data records are not all the same height, so it generates the height on load. Is there a way around this?

2. It shows the loading wheel on the initial page load, but not when I browse to other pages in my grid?

ASPX

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad(sender, eventArgs) {
                if (!eventArgs.get_isPartialLoad()) {
                    $find("<%= uxAjaxManager.ClientID %>").ajaxRequest("InitialPageLoad");
                }
            }
        </script>
    </telerik:RadCodeBlock>
<div>
    <telerik:RadAjaxManager ID="uxAjaxManager" runat="server" OnAjaxRequest="uxAjaxManager_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="uxAjaxManager">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="uxTitleGrid" LoadingPanelID="uxTitleGridLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="input_slide">
        <telerik:RadGrid ID="uxTitleGrid" runat="server"
             AutoGenerateColumns="false" AllowPaging="true" PageSize="20" Width="100%"
             EnableLinqExpressions="false" AllowSorting="true" AllowFilteringByColumn="true"
             OnNeedDataSource="uxTitleGrid_NeedDataSource"
             OnItemDataBound="FormatTitleColumns">
            <GroupingSettings CaseSensitive="false" />
            <MasterTableView>
                <Columns>
                    .
                    .
                    .
                </Columns>
                <NoRecordsTemplate>
                    No Titles listed for your company.
                </NoRecordsTemplate>
            </MasterTableView>
        </telerik:RadGrid>
        <telerik:RadAjaxLoadingPanel ID="uxTitleGridLoadingPanel" runat="server" />
   </div>
</div>

and here is the code behind

protected void uxAjaxManager_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    if (e.Argument == "InitialPageLoad")
    {
        Session["TitlesCanLoad"] = "Yes";
        uxTitleGrid.Rebind();
    }
}

protected void uxTitleGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
    if (Session["TitlesCanLoad"].ToString() == "Yes")
    {
        User currentUser = new User(HttpContext.Current.User.Identity.Name.ToString());
        uxTitleGrid.DataSource = RPGService.GetTitles(currentUser.CompanyName, currentUser.UserTypeID);
    }
}

Thanks.

[Jako]

Just an update, I thought the Loading Panel should show by default when using filters/grid paging?

I have added the following code, but it still doesn't show the loading panel when a filter is applied or the grid is paged?

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var currentLoadingPanel = null;
        var currentUpdatedControl = null;

        function ShowLoadingPanel(sender, args) {
            currentLoadingPanel = $find("<%= uxTitleGridLoadingPanel.ClientID %>");
            currentUpdatedControl = "<%= uxTitleGrid.ClientID %>";

            //show the loading panel over the updated control
            currentLoadingPanel.show(currentUpdatedControl);
        }
        function HideLoadingPanel() {
            //hide the loading panel and clean up the global variables
            if (currentLoadingPanel != null)
                currentLoadingPanel.hide(currentUpdatedControl);
            currentUpdatedControl = null;
            currentLoadingPanel = null;
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="uxAjaxManager" runat="server" OnAjaxRequest="uxAjaxManager_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="uxAjaxManager">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="uxTitleGrid" LoadingPanelID="uxTitleGridLoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnRequestStart="ShowLoadingPanel" OnResponseEnd="HideLoadingPanel" />
</telerik:RadAjaxManager>

I guess I am not understanding how the requests work?

[msigman]

Hello,

Try setting the RadGrid as the AJAX initiator and see if that fixes the problem.  I don't think you would need to manually show/hide the indicator in this scenario.  Let me know how it goes!

<telerik:RadAjaxManager ID="uxAjaxManager" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="uxTitleGrid">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="uxTitleGrid" LoadingPanelID="uxTitleGridLoadingPanel" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

[Jako]

Hello

As you can see from my OP, that is the way I had it. It doesn't seem to be firing the loading panel.

I added some code to show the loading panel on the initial load of the page, that worked, but none of the other events fired the loading panel?

[Viktor Tachev]

Hello Jako,

In order for the loading panel to be visible the Skin property has to be set. The default value of the property is empty string which translates to no skin. Try modifying your markup for the loading panel like the snippet below:

<telerik:RadAjaxLoadingPanel ID="uxTitleGridLoadingPanel" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>

As i understand you would like to show the loading panel over the grid on paging, filtering, etc. In order do this you need to set the RadGrid as the initiator of a request and as updated control in RadAjaxManager. This is suggested by Mathew in a previous post.

I am attaching a sample project illustrating the described approach.

Greetings,

Victor Tachev

the Telerik team

[Jako]

Hi Victor

This is working as expected. The problem I have is that its a large dataset that is pulling through and on the initial load of the page, there is no ajax call and therefore no LoadingPanel that shows data is being pulled from the server.

But once the page has loaded, the LoadingPanel works great on grid paging/filtering etc.

I just need the initial load of the page to also show the LoadingPanel.

Is this possible?

[msigman]

Yes it is possible.  Please see this article for more info: http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html

The focus on the following example is the pageLoad function, which initiates an AJAX request from the client. To be more functional, we have added an update of an ASP:Panel to this example. Thus, we need an AjaxSetting, where RadAjaxManager updates the panel (shows an initially invisible inner panel actually).

JavaScript

<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>

ASPX

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<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>
<asp:Panel ID="Panel1" runat="server">
    <asp:Panel ID="Panel2" Visible="false" runat="server">
        My content:
    </asp:Panel>
</asp:Panel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
    Width="75px" Transparency="50">
    <img alt="Loading..." src="~/loading.gif" style="border: 0;" />
</telerik:RadAjaxLoadingPanel>

C#

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    if (e.Argument == "InitialPageLoad")
    {
        //simulate longer page load
        System.Threading.Thread.Sleep(2000);
        Panel2.Visible = true;
    }
}

[Jako]

Hi there, I have tried implementing that solution, but I have to set the ControlID to the AjaxManager which makes it load on the intial page, but then the rest of the Loading Panels for paging/filtering doesn't work any more?

Its exactly what I had in the OP, it can get either one to work, but can't seem to implement both at the same time?

[Viktor Tachev]

Hi Jako,

I have tried the approach described by Matthew in the previous post and it is working as expected on my end.

I am attaching a sample project that is showing the AjaxLoadingPanel on initial page load. I have also added additional controls that are Ajax-ified - Button and an empty Panel below the RadGrid. The loading panel is displayed over the RadGrid on initial page load and over the Panel after the button is clicked. Give the approach a try and see if it is working for you.

I hope this is helpful.

Regards,

Victor Tachev

Telerik

[Jako]

Hi Victor

Wow, only thing I needed was another AjaxSetting!!!

One for the grid and one for the AjaxManager.

Totally missed it, thanks a lot!