RadDatePicker is giving error on IE10

[Damodar]

Hi,

In IE10 if you clear date from RadDatePicker where RadDatePicker's min date is set and click somewhere else it is giving following error.

Unhandled exception at line 151, column 1 in http://aspnet-scripts.telerikstatic.com/ajaxz/2012.3.1308/Calendar/RadDatePicker.js

0x800a138f - JavaScript runtime error: Unable to get property 'toString' of undefined or null reference ..

in RadDatePicker.js file. How to solve this?


Best Regards,
Damodar

[Konstantin Dikov]

Hello Damodar,

Thank you for contacting us.

From the exception you have mentioned it seems that you are using CDN to load the controls scripts and that in web.config you have key in the web.config appSettings “Telerik.ScriptManager.TelerikCdn” with value set to “Enabled” (more information about Telerik CDN you can find in this help topic).

I have tried the scenario but was unable to produce such error in IE 10, neither in Chrome nor Firefox. 

I am attaching a sample project with RadDatePicker, loading controls scripts and skins from Telerik CDN, working on my side without throwing any errors.

Please have in mind that you should NOT use CDN when you are using internal build (not an official one). CDN support is enabled only for Official Major Releases, Official Service Packs and Beta releases.

If you continue to have issues with CDN and in order for us to be of any assistance I will ask you to submit your project or part of with (RadDatePicker declaration as well as the related code behind and all client code you have on the page) or open a support ticket and attach to it a simple, runnable project with the described issue.

 
Best Regards,
Konstantin Dikov
Telerik

[Damodar]

Hi Konstantin,

Thanks for your reply.
Found the problem. It is giving error in second date picker control.
I was setting the min date of another date picker from first one. 
And It could not set the min date to null of another date picker and giving error.
Fixed the problem by changing the javascript to check if it is null.
But if this is embedded in the built-in javascript it will be nice.

You can also try it if you set min date of the date picker on client events OnDateSelected as follows.

function RadDatePicker1_OnDateSelected(sender,args)
	{
	    //Add JavaScript handler code here
	    var date = sender.get_selectedDate();
	    sender.set_minDate(date);
	}

it will give you error.

Another question.
I want to display RadAjaxLoadingPanel in (postback) button click. 

	<div id="divMain" class="maincenterDiv"></div>
	<asp:Button ID="btnSearch" CssClass="roundbutton"  runat="server" AlternateText="Search" OnClick="btnSearch_Click"  /> 


	<telerik:RadAjaxManager ID="RADAM" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="btnFlights">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="divMain" LoadingPanelID="RADAJPanelBooking" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
    </telerik:RadAjaxManager>
	<telerik:radajaxloadingpanel runat="server" skin="Web20" ID="RADAJPanelBooking"         
        Style=" position: absolute; height: 100%; width: 100%" ClientIDMode="Static">
    	</telerik:radajaxloadingpanel>

	<telerik:RadCodeBlock ID="RADCodeBlock" runat="server">
        <script type="text/javascript">
            var currentLoadingPanel = null;
            var currentUpdatedControl = null;
            function RequestStart(sender, args) {
                currentLoadingPanel = $find("<%= RADAJPanelBooking.ClientID %>");
 
            if (args.get_eventTarget() == "<%= btnSearch.ClientID %>") {
                currentUpdatedControl = "divMain";
            }            
            //show the loading panel over the updated control
            currentLoadingPanel.show(currentUpdatedControl);
        }
        function ResponseEnd() {
            //hide the loading panel and clean up the global variables
            if (currentLoadingPanel != null)
                currentLoadingPanel.hide(currentUpdatedControl);
            currentUpdatedControl = null;
            currentLoadingPanel = null;
        }
        </script>
    </telerik:RadCodeBlock>
	

It doesn't work am I missing something?

Best Regards,
Damodar

[Konstantin Dikov]

Hi Damodar,

Thank you for getting back to us and for your feedback on RadDatePicker.

Not being able to set MinDate to null is made that way by design, but setting selected date to minDate client-side is not expected to throw any errors. I have tested it on my side and on every date selection, the minDate of the RadDatePicker is correctly set to the selected one (using your code snippet). 

About your other question: In order to set loading panel to display over updated controls in RadAjaxManager you could set DefaultLoadingPanelID in the manager or set LoadingPanelID explicitly on updated control (as you are setting it in your code). However, in your case you are trying to update "divMain" div by clicking on "btnFlights" button instead of "btnSearch" button.

Another thing to have in mind is that only server control can be used as AjaxUpdatedControl in the RadAjaxManager, not html elements. Said that, you need to change "divMain" to server control in order to update it correctly.

Moreover, firing ajaxRequest on client-side events to show/hide the loading panel in not needed in your case. Please examine the code snippet bellow to see how you can set the loading panel: 

<asp:Panel ID="divMain" runat="server" Width="50px" Height="50px"></asp:Panel>

<asp:Button ID="btnSearch" Text="Show panel" runat="server" />

 

<telerik:RadAjaxManager ID="RADAM" runat="server">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="btnSearch">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="divMain
" LoadingPanelID="RADAJPanelBooking"/>

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

 

<telerik:RadAjaxLoadingPanel runat="server" Skin="Web20" ID="RADAJPanelBooking"

    Style="position: absolute; height: 100%; width: 100%" ClientIDMode="Static" MinDisplayTime="200">

</telerik:RadAjaxLoadingPanel>

I am setting MinDisplayTime to the Loading panel and adding "width" and "height" to the "divMain
" to demonstrate that the loading panel is showing correctly. 

If you have any further questions, please feel free to contact us again. 

Best Regards,
Konstantin Dikov
Telerik

[Damodar]

Hi Konstantin,

Thanks for your reply.
You will get error if you are in IE10. 
What you have to do is click X inside input field of the RadDatePicker, after you select the date. 
And click outside of the input field. I am using Telerik AJAX Version 2012.3.1308.45.

Thanks for pointing and explanation of RadAjaxManager. 

I have one more question.
Is there timer count down control? Or what control should I use to achieve following scenario. 
I want to show user time left for the process to finish.
If the time is finished i.e. “0” redirect them to starting page.
I am using master page and user controls inside it.

Best Regards,
Damodar

[Konstantin Dikov]

Hi Damodar,

Thank you for getting back to us.

As I mentioned on my previous post, trying to set the MinDate of RadDatePicker to null is expected to throw an error. Using conditional statement to check if the date you are trying to set differs from null is the best option in your case.

About your question for a timer control:  To show to the user the time left for a process to finish I would suggest you use RadProgressArea which provides support for custom progress monitoring. 

You can take a look at our online demo for RadProgressArea and read the help articles. From the description of your scenario, RadProgressArea should fully cover your needs.

If any other questions arise, please feel free to contact us again. 

Best Regards,
Konstantin Dikov
Telerik

[Damodar]

Hi Konstantin,

Thanks for your reply.
May be I have missed it but You didn't say it will throw an error. "... minDate client-side is not expected to throw any errors."


Thanks but the scenario that I am and your suggestion is not similar.
I am using JS for that.

One question. This is for "RadAjaxLoadingPanel".
I am showing loading panel and then redirecting user to another page. It show first page for 1-3 seconds, before redirecting.
Is this normal? How to keep loading panel showing till another page load?

<telerik:RadAjaxManager ID="RADAM" runat="server">
        <AjaxSettings>
            <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"
        Style="top: 0; left: 0; position: absolute; height: 100%; width: 100%" ClientIDMode="Static" IsSticky="True">
</telerik:RadAjaxLoadingPanel> 
<asp:Button ID="btnSearch" CssClass="roundbutton"  runat="server" AlternateText="Search" OnClick="btnSearch_Click"  />

function RequestStart(sender, eventArgs) {
	var eventTarget = eventArgs.get_eventTarget();
        if (eventTarget.indexOf("btnFlights") != -1) 
        	eventArgs.set_enableAjax(false);	
}

Best Regards,
Damodar

[Konstantin Dikov]

Hello Damodar,

The part you are quoting was referring to scenario where selected date from one DatePicker was set as minDate of another DatePicker, which indeed is not expected to throw any errors. Trying to set minDate to null however should throw error and its made that way by design. 

Moving to your next question. If you are redirecting to another page using Response.Redirect, it will be impossible to show the RadAjaxLoadingPanel while opening that page. If this is not what you are doing in in your case, please elaborate little more about your scenario.

Furthermore, opening a support ticket with attached simple, runnable project that isolates the problem will help us examine the issue in greater details. 
 
Regards,
Konstantin Dikov
Telerik

[Damodar]

Hi Konstantin,

Thanks DatePicker's problem is fixed.

Yes I am doing RADAM.Redirect.
My question is why the previous page is shown before redirecting.
Say I am in search page and I am redirecting.
When I click search button, loading panel displays.
And after the search is complete, loading panel is hidden.
For couple of seconds it stays in search page and then redirects to result page.

Best Regards,
Damodar

[Konstantin Dikov]

Hello Damodar,

Response.Redirect() method specifies the new URL that the client should be redirected to and whether execution of the current page should terminate:

public void Redirect (
    string url,
    bool endResponse
)

Since it is not clear what the actual issue is in your case I could recommend you debug your project and see when the Response.Redirect() method is executed in the code behind. You may also try using Response.Redirect("your url", true) and see if it have any difference in your case.

If this issue continue to arise, please provide the markup and the code-behind of your project with more information about the expected behavior and the issue itself.
 
Regards,
Konstantin Dikov
Telerik

[Damodar]

Hi Konstantin,

Response.Redirect Did the trick.

Thanks for your help.

Best Regards,
Damodar