Getting a "Unable to get property 'documentElement' of undefined or null reference" error in UI for ASP.NET AJAX General Discussions

Rod

71 posts

Member since:
Jan 2011

Posted 28 Jun 2013 Link to this post

I'm modifying one of our older ASP.NET WebForms apps that I've used Telerik AJAX controls in. While running the app in the VS 2010 debugger, I've started to get this error message:

"JavaScript runtime error: Unable to get property 'documentElement' of undefined or null reference"

It stops in Telerik.Web.UI.WebResource_4.axd code when I click on the RadDatePicker control. I've not modified that page in a very long time. If anything I've upgraded the Telerik ASP.NET AJAX controls, or at least I've downloaded them and installed them on my PC. If I run VS 2010 without the debugger and then click on the RadDatePicker control, I'll get a popup dialog box asking me if I want to use IE10's built in JavaScript debugger, because the same line is hit on. That line is:

var E = a.document.documentElement;

Which is in the getLocation: function (a)
(at least that's where I found it. That line of code maybe elsewhere.)

Bottom line: What's wrong and what can I do about it?

Kasper Bergmann

14 posts

Member since:
Feb 2007

Posted 29 Jun 2013 Link to this post

I had the same problem with RadMenu. The workaround is to force IE10 to run in the compatibility mode by inserting this code in the <head> :

<meta http-equiv="x-ua-compatible" content="IE=9">

This is what it works for me, I am using v. 2011.3.1305.35

Gregory

3 posts

Member since:
Apr 2012

Posted 16 Oct 2013 Link to this post

Hi Kasper,

This isn't good enough for us. We need to target IE10 Native mode.

Do we know what is causing that issue and how we can stop it?

Regargs,
Greg.

Shane

3 posts

Member since:
Jun 2009

Posted 16 Oct 2013 Link to this post

Thanks for posting the fix, Kasper.

Sachin

6 posts

Member since:
Aug 2011

Posted 07 Nov 2013 Link to this post

Any pointers to resolve this issue?

Kate

Admin

1898 posts

Posted 11 Nov 2013 Link to this post

Hi Sachin,

Can you please clarify which are the controls and the version that you are using and that are giving you exceptions when using in IE10?

Regards,
Kate
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.

Sachin

6 posts

Member since:
Aug 2011

Posted 11 Nov 2013 Link to this post

Kate -
Thank you for your reply. We are using ASP.NET AJAX controls like RadMenu, RadPanelBar, etc and the version is 2011.1.315.35

Thanks & Regards,
Sachin

Kate

Admin

1898 posts

Posted 11 Nov 2013 Link to this post

Hi Sachin,

Thanks for clarifying. Unfortunately it is expected that you get issues in IE10 when using the 2011 version of the RadControls. The reason is that in 2011 when this specific version of the RadControls was launched , the IE10 browser was still not released. Therefore I would suggest that you try upgrading to the latest version of the RadControls that are fully compatible with IE10 and use them instead of the 2011.

Regards,
Kate
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.

Iain

1 posts

Member since:
Dec 2013

Posted 03 Dec 2013 Link to this post

For those of you, like us, who reverting to compatibility mode or upgrading are not good solutions at this time, we have a JavaScript patch that has a dependency on jQuery.

$(function(){

if (typeof(window.$telerik.getLocation) == 'function' && Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version == 10) {

window.$telerik.getLocation = function(a)

{

if (a === document.documentElement) {

return new Sys.UI.Point(0, 0);

}

var offset = $(a).offset();

return new Sys.UI.Point(offset.left, offset.top);

}

});

One potential problem is that when a date or time picker element fades out, you can see the iframe behind it with the unstyled word "false" in it. Just something to bear in mind and watch out for if you decide to use this patch.
During our investigation, we also noticed that this version of RadDatePicker works fine IE11, just not IE10.

Gauri

32 posts

Member since:
Jan 2012

Posted 19 Dec 2013 Link to this post

We are using 2013.2.717.40 version
But we are still getting javascript errors on IE10
I tried changing the compatibility mode to IE=9 and also IE=8.

It's still the same.

It's working for some raddatepickers and not for couple of them on the same page.
They are used exactly in same manner.
All same tags etc.

I also checed the viewsource. It shows that control in there.

We have the javscript in .js file which is being referred to in the master page and is wrapped by telerik:RadScriptBlock.

Any help is greatly appreciated.

Thanks.
Gauri

Kate

Admin

1898 posts

Posted 23 Dec 2013 Link to this post

Hi Gauri,

Can you provide more details on the exact issue that you get? For example what is the error message that you get from the exception? Also providing us a very simplified runnable page that we can test from our side would also be very helpful in assisting with resolving the issue.

Regards,
Kate
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.

Hubert

1 posts

Member since:
Feb 2014

Posted 16 Feb 2014 Link to this post

Can I get an update on this one:

On my case I am debugging the following code: the problem is that when the page is loaded the error occurs
thus the contents of the sfc:HtmlEditor does not load properly.

<telerikNavigation:RadTabControl x:Name="MainTab" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Width="Auto" VerticalAlignment="Stretch"
DisplayMemberPath="Content" DropDownDisplayMode="Visible" ScrollMode="Viewport"
Background="#dde1ea" BorderBrush="Black" BorderThickness="0">

<telerikNavigation:RadTabItem Padding="4 1" DropDownContent="Content" >

<telerikNavigation:RadTabItem.Header>
<TextBlock Text="Content" Margin="19 2 19 0" />
</telerikNavigation:RadTabItem.Header>

<telerikNavigation:RadTabItem.Content >
<sfc:HtmlEditor x:Name="HtmlEditor" Width="Auto" Height="Auto" Margin="0,5,0,0" />
</telerikNavigation:RadTabItem.Content>

</telerikNavigation:RadTabItem>
</telerikNavigation:RadTabControl>

Ted

2 posts

Member since:
Jun 2014

Posted 18 Jul 2014 in reply to Iain Link to this post

Thanks for the tip, Lain!

This workaround worked perfectly for us, and the RadGrid is now working in IE 9, 10, and 11.

Tonino

107 posts

Member since:
Nov 2007

Posted 15 Dec 2014 in reply to Iain Link to this post

Hi Iain!

Thanks for your workaround which works on most pages. But on one page I get this error on line var offset = $(a).offset();:
Object expected

The a.className is "rgAltRow" and it looks like it belongs to a RadGrid. Any idea how to solve this?

I'm using version 2011.3.1305.40 of telerik controls.

Regards,
Tonino.

Tonino

107 posts

Member since:
Nov 2007

Posted 15 Dec 2014 in reply to Tonino Link to this post

ok, found the problem!
var offset = $(a).offset();
changed
to
var offset = window.$telerik.$(a).offset();
and now it works!

Govindaraj Kathirvel

5 posts

Member since:
Jan 2009

Posted 17 Dec 2014 in reply to Tonino Link to this post

Hi,

Which file & line I need to change ?

Thanks,
govind

raghwendra

1 posts

Member since:
Feb 2016

Posted 05 Feb 2016 in reply to Kasper Bergmann Link to this post

Even i had same problem your solutions worked for me.

Thq so mch Mr.Kasper Bergmann