Unable to show RadAjaxLoadingPanel as $find is not working

6 posts, 0 answers
  1. Mike
    Mike avatar
    20 posts
    Member since:
    Jan 2011

    Posted 12 Dec 2012 Link to this post

    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.
  2. Vasil
    Admin
    Vasil avatar
    1640 posts

    Posted 13 Dec 2012 Link to this post

    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.
  3. Mike
    Mike avatar
    20 posts
    Member since:
    Jan 2011

    Posted 13 Dec 2012 Link to this post

    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.
  4. Vasil
    Admin
    Vasil avatar
    1640 posts

    Posted 13 Dec 2012 Link to this post

    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.
  5. JeffSM
    JeffSM avatar
    42 posts
    Member since:
    May 2014

    Posted 15 Apr in reply to Vasil Link to this post

    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

  6. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 18 Apr Link to this post

    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.
Back to Top