Global change of the loading panel

5 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 02 Mar Link to this post

    Hi All,

    With near 400 pages on my site and at least 300 of them having loading panels I now need to use some custom css for them.  Because the css relies on a few divs I have inserted the divs into a loading panel..  Great it works... on one page.

    What is the simplest approach to do this with only one instance of the change, I don't mind doing a global replace if it means using a custom control.  That would work but the knock on effect is that the loading panel then doesn't link properly to the ajaxpanel

    My code that works on one page is as below. And by the way kudos to Anas Tawfeek for this css based animation (http://anastawfeek.github.io/ArtWorx-xLoader)

    <telerik:RadAjaxLoadingPanel ID="uxLoadingPanel" Runat="server" >
        <div class="loadingAnim3Part">
            <div class="google-spin-wrapper">
                <div class="google-spin"></div>
            </div>
        </div>
    </telerik:RadAjaxLoadingPanel>

    Any pointers?

    Regards

    Jon

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 07 Mar Link to this post

    Hello Jon,

    Since the animations that you want to use relies on specific elements/class names structure, the only thing that I could suggest is to try to make a global replace with a regular expression.

    A CSS solution would be possible if you need to change only the animation image for the default loading panel:
    <style>
        html .RadAjax_Default .raDiv {
            background-image: url(Images/yourAnimation.gif) ;
        }
    </style>

    Hope this helps.
     

    Regards,
    Konstantin Dikov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 07 Mar in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

    Thanks for letting me know.  I'd previously used the image approahc but have had a drive to get rid of all non svg based images from the site recently.

    In theory would a user control inheriting the loading panel work?  Would that link into the ajax panel without issues?

    Regards

    Jon

  5. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 08 Mar Link to this post

    Hi Jon,

    We do not support control inheritance, so I would not recommend such approach.

    Notwithstanding, another option that popped in my mind is to use ControlAdapter and add the DIV elements to the Controls collection of the RadAjaxLoadingPanel (through LiteralControl for example):
           <telerik:RadAjaxLoadingPanel ID="uxLoadingPanel" Runat="server" >
    </telerik:RadAjaxLoadingPanel>
     
            <telerik:RadAjaxPanel runat="server" LoadingPanelID="uxLoadingPanel">
                <telerik:RadButton runat="server" ID="radbutton1" OnClick="radbutton1_Click"></telerik:RadButton>
            </telerik:RadAjaxPanel>

    The ControlAdapter:
    public class RadAjaxLoadingPanelAdapter : ControlAdapter
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            LiteralControl literal = new LiteralControl();
            literal.Text = " <div class=\"loadingAnim3Part\"><div class=\"google-spin-wrapper\"><div class=\"google-spin\"></div></div></div>";
            this.Control.Controls.Add(literal);
        }
    }

    And within the BrowserFile.browser:
    <browser refID="Default">
      <controlAdapters>
        <adapter controlType="Telerik.Web.UI.RadAjaxLoadingPanel" adapterType="RadAjaxLoadingPanelAdapter" />
      </controlAdapters>


    Kind Regards,
    Konstantin Dikov
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 08 Mar in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

    Good to know re inheritance.

    That is a fantastic solution and it worked straight away.  I wasn't aware of control adapters till this but it seems to be a near perfect example of their use.  

    Thanks very much :)

    Cheers

    Jon

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017