Loading Panel

[Damodar]

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="top: 0; left: 0; position: absolute; height: 100%; width: 100%" 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

[Damodar]

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

[Maria Ilieva]

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

[Damodar]

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

[Maria Ilieva]

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

[Damodar]

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

[Damodar]

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

[Damodar]

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

[Maria Ilieva]

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

[Damodar]

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

[Maria Ilieva]

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