Show progress indicator Telerik demo style

[Felice]

Hi,
I would like to show a progress indicator like in your demos (see picture attached) in the middle of the visible area when the user has to wait for some operation to be completed. I know that such indicator is shown in the bottom left corner of the radgrid but if the user is not at the bottom of the grid it is not visible.
How can I do something like that?

[Jayesh Goyani]

Hello,

Please set "ShowStatusBar='false'".

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadGrid ID="RadGrid1" runat="server" ShowStatusBar="false">
        ...........
        ...........
        </telerik:RadGrid>

If you want to set this loading icon in center of the screen then

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true" Style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">
       </telerik:RadAjaxLoadingPanel>

If you want to change the loading image then please check the below link.
http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/transparency/defaultcs.aspx

Let me know if i am not understand your question.

Thanks,
Jayesh Goyani

[Felice]

Dear Jayesh,
thanks a lot for your support.
I added a RadAjaxManager and a RadAjaxLoadingPanel in my project. I also added the ajax-loader.gif in the root of the project files. But I still cannot see it during the update of the page.

</telerik:RadWindowManager>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" ImageUrl="~/ajax-loader.gif" IsSticky="true" Style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">
         </telerik:RadAjaxLoadingPanel>

I will appreciate if you can give me further instruction on what else I need to adapt in the above code. Thanks a lot, Felice 

[Felice]

Hi Jayesh,

I sorted it out thanks a lot.
My final code to get it working is as following:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelCssClass="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true" Style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">
         </telerik:RadAjaxLoadingPanel>

It is now working. No further actions are needed. Thanks again.

[muskan]

RadAjaxLoadingPanel is not working..i have tried same code as you suggested.