This is a migrated thread and some comments may be shown as answers.

Unable to show RadAjaxLoadingPanel as $find is not working

5 Answers 199 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Mike
Top achievements
Rank 1
Mike asked on 12 Dec 2012, 03:47 PM
Hi there,

Bit of an odd problem here: I have a RadAjaxLoadingPanel that I want to display when I'm doing some client-side declarative data binding (http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx). According to this http://www.telerik.com/help/aspnet-ajax/ajax-show-hide-loadingpanel.html , I can show and hide it via JavaScript. I've hooked into the RadGrid's client events of OnDataBinding and OnDataBound to show and hide the loading panel respectively.

Here are the two relevant JS functions, which are in a RadScriptBlock:

var currentLoadingPanel = null;
var currentControl = null;

function ShowLoading() {
    currentControl = $find("<%= uxRGC.ClientID %>");
    currentLoadingPanel = $find('<%= RadAjaxLoadingPanel1.ClientID %>');
    currentLoadingPanel.show(currentControl);
}
 
function HideLoading() {
    if (currentLoadingPanel != null) {
        currentLoadingPanel.hide(currentUpdatedControl);
    }
    currentUpdatedControl = null;
    currentLoadingPanel = null;
}

The odd thing is, the $find for RadAjaxLoadingPanel1 does not find the control, i.e. it comes back as null. I get the currentControl, which is the RadGrid, but not the loading panel. If I use document.getElementById, it finds the control but show(xyz) isn't supported.

I'll just mention that the grid, loading panel and script block are in a ASP.Net .ascx control, which gets loaded onto a content page inside a master page.

Thank you,

Mike K.

5 Answers, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 13 Dec 2012, 11:52 AM
Hi Mike,

The first time the data binding of the grid happens is during it's initialization. This could be before the LoadingPanel is created.

Try to swap the declaration of your RadGrid and RadAjaxLoading panel in your page. If the loading panel is created first, the $find will return its client object properly by the time when RadGrid is initializing.

Note that if you don't use Ajax in your page, you should place the RadAjaxLoadingPanel before the RadGrid, and it's client scripts will be included first.
However if you user RadAjax, the scripts may be included in reversed order, this was bug that is fixed in the latest releases.

Greetings,
Vasil
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Mike
Top achievements
Rank 1
answered on 13 Dec 2012, 12:27 PM
Hello Vasil,

Thank you for your reply. I have moved the LoadPanel underneath the grid, and the JS now finds it via the $find method. However, as the remaining code executes, I get a "Microsoft JScript runtime error: Syntax error, unrecognized expression: #[object Object]_wrapper" in jquery.min.js

I am using Ajax in the control, as the grid is wrapped in an Ajax panel. I was wondering if I could hook into the control's page's AjaxManager, but I'm not sure if the client data-binding would actually trigger an Ajax event and therefore show the loading panel - which I was expecting anyway.

Any thoughts?

Thank you,

Mike K.
0
Vasil
Telerik team
answered on 13 Dec 2012, 12:59 PM
Hi Mike,

If you use ClientSide binding it will not cause Ajax request through the RadAjaxManager and the loading panel will not be automatically shown.

I don't know why you are facing the error in the jQuery scripts, try to insulate it in sample page, stripping down the excessive code to see what exact is causing it.

Regards,
Vasil
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
JeffSM
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 15 Apr 2019, 04:42 PM

Hi, I'm updated and with this problem.

How do I fix?

with window.$find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= divReport.ClientID %>");

or 

$find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= divReport.ClientID %>");

not works.

 

try {

                    window.$find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= divReport.ClientID %>");
                }
                catch (err) { }

 

#jeffersonMotta #jefferson2019 #telerik2019

0
Vessy
Telerik team
answered on 18 Apr 2019, 09:29 AM
Hi Jefferson,

What is the type of the divReport element that you are trying to show? Does it have a runat="server" property set that will allow you to access its server-side ID?

You can test the below setup and compare it with your actual configuration:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var currentLoadingPanel = null;
        var currentUpdatedControl = null;
 
        function ShowLoading(sender, args) {
            currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID %>");
            currentUpdatedControl = "<%= divReport.ClientID %>";
 
        //show the loading panel over the updated control
        currentLoadingPanel.show(currentUpdatedControl);
    }
 
    function HideLoading() {
        //hide the loading panel and clean up the global variables
        if (currentLoadingPanel != null)
            currentLoadingPanel.hide(currentUpdatedControl);
        currentUpdatedControl = null;
        currentLoadingPanel = null;
    }
    </script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Button1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="divReport" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
    <ClientEvents OnRequestStart="ShowLoading" OnResponseEnd="HideLoading" />
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<asp:Button ID="Button1" runat="server" Text="Postback" OnClick="Button1_Click" />
<asp:Panel ID="divReport" runat="server" Width="400px" Height="300px">
    Panel to update
</asp:Panel>



Regards,
Vessy
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Ajax
Asked by
Mike
Top achievements
Rank 1
Answers by
Vasil
Telerik team
Mike
Top achievements
Rank 1
JeffSM
Top achievements
Rank 2
Iron
Veteran
Iron
Vessy
Telerik team
Share this question
or