In Built Loading Panel

12 posts, 0 answers
  1. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 10 Jun 2010 Link to this post

    Hello,

    It seems the latest version of the telerik controls has an in-built loading panel, which is very nice...  but I was wondering if each control now has an API to show or hide that loading panel?  Is that a CSS thing, or something else?

    Thanks.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Jun 2010 Link to this post

    Hi Brian,

    The visibility of RadAjaxLoadingPanel is controlled by RadAjaxManager or RadAjaxPanels (and by no other RadControls). You can also show/hide it explicitly:

    http://www.telerik.com/help/aspnet-ajax/ajxshowhideloadingpanel.html

    Sincerely yours,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 14 Jun 2010 Link to this post

    Hello,

    I upgraded to the latest version, and when an async postback happens, the RadGrid, RadScheduler, and other controls display their own loading panel with loading animation, formatted nicely with the Outlook 2007 skin.  In fact, I have a RadAjaxLoadingPanel control added to the page, and so two loading panels show per async request, the one I defined, and one internally???

    I don't understand why the controls how have an async loading panel display when posting back, except for there is an in-built mechanism to display it.

    Please clarify, Thanks.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Jun 2010 Link to this post

    Hi Brian,

    If you have defined a RadControls skin globally, then set Skin="" explicitly for the RadAjaxLoadingPanel. Otherwise you will end up with two animated images appearing at the same time for one loading panel.

    RadGrid has its own loading animation, which can be turned off by setting ShowStatusBar="false". RadScheduler doesn't.

    All the best,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 14 Jun 2010 Link to this post

    Hello,

    The loading animation for the RadGrid, can you control when it shows via the client-side API?  I would like to use that if possible.  Also, I see the RadScheduler with its own loading animation too.

    Thanks.
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Jun 2010 Link to this post

    Hello Brian,

    >> The loading animation for the RadGrid, can you control when it shows via the client-side API?

    I am afraid not. What you can do is obtain a reference to the DOM element of the animation wrapper element, which is a TD with a rgStatus CSS class. Here is a simple demo.



    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <script runat="server">
     
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 50;
        string colName = "Column";
     
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
     
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
     
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
     
        (sender as RadGrid).DataSource = dt;
    }
         
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    <style type="text/css">
     
    .rgStatus2 *
    {
        visibility:hidden !important;
    }
     
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
     
    <asp:CheckBox ID="CheckBox1" runat="server" onclick="toggleAnimation(this)" Checked="true" />
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
     
    function toggleAnimation(chkBox)
    {
        var statusCell = $telerik.getElementByClassName($get("<%= RadGrid1.ClientID %>"), "rgStatus", "td");
        if (chkBox.checked)
            Sys.UI.DomElement.removeCssClass(statusCell, "rgStatus2");
        else
            Sys.UI.DomElement.addCssClass(statusCell, "rgStatus2");
    }
     
    function checkAnimationSetting(sender, args)
    {
        var chkBox = $get("<%= CheckBox1.ClientID %>");
        if (chkBox && !chkBox.checked)
        {
            var statusCell = $telerik.getElementByClassName(sender.get_element(), "rgStatus", "td");
            Sys.UI.DomElement.addCssClass(statusCell, "rgStatus2");
        }
    }
     
    </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadGrid
        ID="RadGrid1"
        runat="server"
        Skin="Office2007"
        Width="800px"
        ShowStatusBar="true"
        AllowPaging="true"
        OnNeedDataSource="RadGrid_NeedDataSource">
        <ClientSettings>
            <ClientEvents OnGridCreated="checkAnimationSetting" />
        </ClientSettings>
    </telerik:RadGrid>
                   
    </form>
    </body>
    </html>





    >> I see the RadScheduler with its own loading animation too.

    RadScheduler does not have its own loading animation. I suspect there is some misunderstanding here. Can you provide a demo or a screenshot, which shows the loading animation?


    Greetings,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 15 Jun 2010 Link to this post

    Ignore this post.
  9. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 15 Jun 2010 Link to this post

    OK, ignore the previous post; attached is my scheduler; I have a RadAjaxLoadingPanel attached, with the Loading... text and the navy animation; however, the green loading icon that's in-built also appears too.

    I'm binding via the client-side, and no radajaxpanel or radajaxmanager ajax settings are attached to it.

    That's the same appearance as the RadGrid for me.

    Thanks.
  10. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Jun 2010 Link to this post

    Brian,

    Did you make sure that Skin="" for the RadAjaxLoadingPanel, as mentioned in one of my previous replies?

    In order to prevent further message roundtrips, please send a runnable demo if you need further assistance.

    All the best,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  11. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 15 Jun 2010 Link to this post

    I didn't set it to empty string; I will do that but I'm not concerned with that. I was trying to get from you more about does the RadScheduler have an in-built loading panel; you say it doesn't, but I see one.  So what is correct?

    Thanks.
  12. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 16 Jun 2010 Link to this post

    Brian,

    In my opinion currently you are using a RadAjaxLoadingPanel with its Skin property set to Office2007 AND a loading animation template. That's why you have two loading images. Please set Skin="".

    Regards,
    Dimo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  13. Brian Mains
    Brian Mains avatar
    485 posts
    Member since:
    Oct 2008

    Posted 16 Jun 2010 Link to this post

    OK, so the RadScheduler does have an in-built loading panel, thanks for the info.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017