Loading Panel

11 posts, 0 answers
  1. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 23 Jul 2013 Link to this post

    Hi,

    Following error is happening:
    Unhandled exception at line 108, column 1 in http://aspnet-scripts.telerikstatic.com/ajaxz/2012.3.1308/Ajax/Ajax.js
    0x800a138f - JavaScript runtime error: Unable to get property 'id' of undefined or null reference...
    In Ajax.js dynamic file
    if(this.Type=="Telerik.Web.UI.RadAjaxManager"){if(e.get_postBackElement()!=this.get_element()){var h=this._updatePanels.split(",");
    if(Array.contains(h,e.get_postBackElement().id))

    I have 
    <asp:Panel ID="divMain" runat="server" CssClass="maincenterDiv" ClientIDMode="Static">
    <asp:RadioButtonList ID="rbType" runat="server" RepeatDirection="Horizontal" 
    AutoPostBack="True" OnSelectedIndexChanged="rbTrip_SelectedIndexChanged" RepeatLayout="Flow">
    <asp:ListItem Value="One"> One Way </asp:ListItem>
    <asp:ListItem Value="Two" Selected="True"> Two Way </asp:ListItem>
    </asp:RadioButtonList>
    <telerik:RadComboBox ID="RadCBDestination" runat="server" ShowDropDownOnTextboxClick="false">
    <Items>
    <telerik:RadComboBoxItem runat="server" Text="Australia (AUS)" Value="AUS" />
    <telerik:RadComboBoxItem runat="server" Text="ASIA (ASIA)" Value="ASIA" />
    </Items>
    </telerik:RadComboBox>
    <telerik:RadDatePicker ID="radStartDate" runat="server" Culture="en-AU" 
    HiddenInputTitleAttibute="Visually hidden input created for functionality purposes." 
    WrapperTableSummary="Table holding date picker control for selection of dates." Skin="Metro">
    <ClientEvents OnDateSelected="radStartDate_OnDateSelected" />
    </telerik:RadDatePicker>
    
    <asp:Panel ID="pnlUpdate" CssClass="rowSection" runat="server">
    <telerik:RadDatePicker ID="radEndDate" runat="server">
    </telerik:RadDatePicker>
    </asp:Panel>
    <telerik:RadAjaxManager ID="RADAM" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rbType">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlUpdate" UpdatePanelRenderMode="Inline" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btnSearch">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="divMain" LoadingPanelID="RADAJPanelBooking" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel runat="server" Skin="MetroTouch" ID="RADAJPanelBooking" 
    ClientIDMode="Static"
            Style="top0left0positionabsoluteheight100%width100%" IsSticky="True">
        </telerik:RadAjaxLoadingPanel>
    
    <asp:Button ID="btnSearch" CssClass="roundbutton" runat="server" AlternateText="Search" 
    OnClick="btnSearch_Click" />
    
    </asp:Panel>
    <telerik:RadCodeBlock ID="radcode" runat="server">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript" id="telerikClientEvents">        
            function radStartDate_OnDateSelected(sender, args) {
                var RADEndDate = $find("<%=radEndDate.ClientID%>");
                var date = sender.get_selectedDate();
                var retDate = RADEndDate.get_selectedDate();             
                         RADEndDate.set_selectedDate(date);
                         RADEndDate.set_minDate(date);
    }                 
                 
            }
            function RequestStart(sender, eventArgs) {
                var eventTarget = eventArgs.get_eventTarget();
                if (eventTarget.indexOf("btnSearch") != -1) {
                    eventArgs.set_enableAjax(false);
                }
            }
        </script>      
    </telerik:RadCodeBlock>


    This is happening only if radio button rbType has Selected="true".
    If we click radiobutton first and fill the form and click search it is showing loading panel.
    But If we don't click radiobutton and fill the form and click search it is giving error.

    So I would assume some id is not set in the first load. It is giving error.
    And when post back happened i.e after clicking radio button the id got loaded and  it is working.

    How to solve this?

    Best Regards,
    Damodar
  2. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 24 Jul 2013 Link to this post

    It is solved after changing 

    <telerik:AjaxSetting AjaxControlID="btnSearch"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="divMain" LoadingPanelID="RADAJPanelBooking" /> </UpdatedControls> </telerik:AjaxSetting>
    TO
    <telerik:AjaxSetting AjaxControlID="divMain"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="divMain" LoadingPanelID="RADAJPanelBooking" /> </UpdatedControls> </telerik:AjaxSetting>

    But I don't know why. Best Regards, Damodar

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 25 Jul 2013 Link to this post

    Hi Damodar,

    In case the RadioButtonList is added in RadAjaxManager settings you should also add a setting in which the RadioButtonList control updates itself. This is the reason for the clanged settings to properly work on your end.

    Regards,
    Maria Ilieva
    Telerik
    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 the blog feed now.
  5. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 30 Jul 2013 Link to this post

    Hi Maria,

    Thanks for your reply.
    What do I have to do? I did following but it does not work.
    <telerik:RadAjaxManager ID="RADAM" runat="server">
    	<AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rbType">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlUpdate" UpdatePanelRenderMode="Inline" />
    
    		    <telerik:AjaxUpdatedControl ControlID="rbTripType" />
                    
    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btnSearch">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="divMain" LoadingPanelID="RADAJPanelBooking" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
     </telerik:RadAjaxManager>

    I have one more question:
     How can I put loading panel to whole page?
    Page is long and when I scroll the loading panel is only shown to top part or screen size.

    Best Regards,
    Damodar
  6. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 01 Aug 2013 Link to this post

    Hello Damodar,

    Please try adding "rbtype" control to update itself and also please note that all RadControls are working only with ClientIDMode set to "AutoID" So please set the ClientIDMode of the whole page to "AutoID" and verify how it goes.

    Regards,
    Maria Ilieva
    Telerik
    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 the blog feed now.
  7. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 07 Aug 2013 Link to this post

    Hi Maria,
    Can you give me the code?
    If following is not what you meant
                <telerik:AjaxSetting AjaxControlID="rbType">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlUpdate" UpdatePanelRenderMode="Inline" />
    
    		    <telerik:AjaxUpdatedControl ControlID="rbTripType" />
                    
    </UpdatedControls>
                </telerik:AjaxSetting>
                
    One more question:
    In this article How to Center Image in a RadAjaxLoadingPanel 
    If we have skin it is not centering the image to the viewport. It is centering the loading image to whole page.

    What I want to do is: I have long page and I want display ajax loading panel and center the loading image to the viewport only.
    How to center image if we are using skin.

    Best Regards,
    Damodar
  8. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 07 Aug 2013 Link to this post

    Hi Maria,
    Can you give me the code?
    If following is not what you meant
    <telerik:AjaxSetting AjaxControlID="rbType">
          <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="pnlUpdate" UpdatePanelRenderMode="Inline" />
    
    	    <telerik:AjaxUpdatedControl ControlID="rbTripType" />
          
    </UpdatedControls>
    </telerik:AjaxSetting>
                
    One more question:
    In this article How to Center Image in a RadAjaxLoadingPanel 
    If we have skin it is not centering the image to the viewport. It is centering the loading image to whole page.

    What I want to do is: I have long page and I want to display ajax loading panel and center the loading image to the viewport.
    How to center image if we are using skin.

    Best Regards,
    Damodar
  9. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 08 Aug 2013 Link to this post

    Hi Maria,
    I was able to solve my question regarding centering loading image,
    with this article How to make a RadAjaxLoadingPanel over whole page.

    But I had to add last line of code.
    Which is not mentioned in the link.
    Do we have to use this line or not?
    Is that solution needed to be updated?

    function ShowLoading(sender, eventArgs) {
        // the following Javascript code takes care of expanding the RadAjaxLoadingPanel
        // to the full height of the page, if it is more than the browser window viewport
     
        var loadingPanel = $get('RADAJPanel');
        var pageHeight = document.documentElement.scrollHeight;
        var viewportHeight = document.documentElement.clientHeight;
     
        if (pageHeight > viewportHeight) {
            loadingPanel.style.height = pageHeight + "px";
        }
     
        var pageWidth = document.documentElement.scrollWidth;
        var viewportWidth = document.documentElement.clientWidth;
     
        if (pageWidth > viewportWidth) {
            loadingPanel.style.width = pageWidth + "px";
        }
     
        // the following Javascript code takes care of centering the RadAjaxLoadingPanel
        // background image, taking into consideration the scroll offset of the page content
     
        if ($telerik.isSafari) {
            var scrollTopOffset = document.body.scrollTop;
            var scrollLeftOffset = document.body.scrollLeft;
        }
        else {
            var scrollTopOffset = document.documentElement.scrollTop;
            var scrollLeftOffset = document.documentElement.scrollLeft;
        }
     
        var loadingImageWidth = 55;
        var loadingImageHeight = 55;
     
        loadingPanel.style.backgroundPosition = (parseInt(scrollLeftOffset) + parseInt(viewportWidth / 2) - parseInt(loadingImageWidth / 2)) + "px " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px";
        loadingPanel.firstElementChild.style.backgroundPosition = (parseInt(scrollLeftOffset) + parseInt(viewportWidth / 2) - parseInt(loadingImageWidth / 2)) + "px " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px";
    }
    Best Regards, Damodar
  10. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 12 Aug 2013 Link to this post

    Hi Damodar,

    The mentioned line which sets the background of the first LoadingPanel  ChildElement should be used only in case you do not use the "MyModalPanel" CssClass for the RadAjaxLoadingPanel as in the demo. This class is actually settings the mentioned background.

    Regards,
    Maria Ilieva
    Telerik
    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 the blog feed now.
  11. Damodar
    Damodar avatar
    55 posts
    Member since:
    Jan 2011

    Posted 13 Aug 2013 Link to this post

    Hi Maria,

    I am using skin Skin="MetroTouch", not using MyModalPanel.

    Question:
    Why do we have to use this line? It is not in the solution provided in the link.
    loadingPanel.firstElementChild.style.backgroundPosition = (parseInt(scrollLeftOffset) + parseInt(viewportWidth / 2) - parseInt(loadingImageWidth / 2)) + "px " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px";
    If we have to use it, I think you have to update that solution?

    Best Regards,
    Damodar
  12. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 15 Aug 2013 Link to this post

    Hi Damodar,

    This is exactly what I stated in my previous post. The "MyModalPanel: class which is used in the code library and which you do not use sets the background image of the child element. In your case as you are not using it you should set it manually with the mentioned additional line.


    Regards,
    Maria Ilieva
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017