Global change of the loading panel

[Jon]

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

[Konstantin Dikov]

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

[Jon]

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

[Konstantin Dikov]

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

[Jon]

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