Use custom HTML in RadLoadingPanel

[Covertix]

Hi,

I use RadLoadingPanel in my application with custom HTML and it works fine.

I include RadLoadingPanel in every page, so it makes me duplicate the HTML for each page.
Is there any way to use the same custom HTML for many loading panels?

this is my code:

                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"<br>                    Width="75px"><br>                                <div id="loadingOverlay" style="text-align:left;"><br>    <div id="loadingBox"><br>        <table id="tblRoundedHeader" runat="server" class="RoundedHeader" style="width:100%;"><br>        <tr><br>            <td class="Header2Left"></td><br>            <td class="Header2Middle">Covertix</td><br>            <td class="Header2Right"></td><br>        </tr><br>        </table><br><br>        <div class="frame-left"><br>        <div class="frame-right"><br>            <div style="margin-left: 11px; margin-right: 11px; background-color: white; height:80px">    <br>                <div id="Image1" class="LoadingImg"></div><br>                <p style="margin-left: 55px;">Loading...</p><br>            </div><br><br>        </div><br>        </div><br>        <div class="bottom-left"></div><br>        <div class="bottom"></div><br>        <div class="bottom-right"></div><br>    </div><br>    </div><br>                </telerik:RadAjaxLoadingPanel>

[Angel Petrov]

Hi,

If you have a master-content page scenario you can place the RadAjaxLoadingPanel on the master page.  That way you will avoid copying the loading panel definition to the different pages.

Regards,
Angel Petrov
Telerik

 

 

[Covertix]

Thanks Angel.

I used your approach and located the RadAjaxLoadingPanel on the master page.
In one of my pages I have the functions:

        function ShowLoadingDiv() {
            currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
            currentUpdatedControl = "<%= gvRules.ClientID %>";
            currentLoadingPanel.show(currentUpdatedControl);
        }

        function HideLoadingDiv() {
            currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
            currentUpdatedControl = "<%= gvRules.ClientID %>";
            currentLoadingPanel.hide(currentUpdatedControl);
        }


I get compilation error: RadAjaxLoadingPanel1 does not exist in the current context, because it is located on master page.
Is there any way to fix this issue?
If I will move the functions to the master page, I will get the same error for gvRules

[Angel Petrov]

Hi,

Please try replacing $find("<%= RadAjaxLoadingPanel1.ClientID %>") with $telerik.findControl(document,'RadAjaxLoadingPanel1') and test whether this resolves the problem.

Regards,
Angel Petrov
Telerik