Show progress indicator Telerik demo style

5 posts, 1 answers
  1. Felice
    Felice avatar
    198 posts
    Member since:
    Aug 2013

    Posted 21 Sep 2013 Link to this post

    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?
  2. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 23 Sep 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Felice
    Felice avatar
    198 posts
    Member since:
    Aug 2013

    Posted 23 Sep 2013 Link to this post

    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 
  5. Felice
    Felice avatar
    198 posts
    Member since:
    Aug 2013

    Posted 23 Sep 2013 Link to this post

    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.
  6. muskan
    muskan avatar
    1 posts
    Member since:
    Jul 2016

    Posted 10 Sep in reply to Felice Link to this post

    RadAjaxLoadingPanel is not working..i have tried same code as you suggested.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017