This is a migrated thread and some comments may be shown as answers.

radopen() not working with IE9

7 Answers 165 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Lydia asked on 31 Jan 2012, 09:33 AM

Hi,

I know there's another thread like this too
http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/radopen-is-not-working-properly-on-ie-9.aspx
But what I encountered is different.
Here's my code for calling the radopen when clicking a button.

ClientScript.RegisterStartupScript(Page.GetType(), ShowRemarks, "ShowRemarksDialog();", true);

Here's the javascript code in my main aspx page.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function ShowRemarksDialog() {

Sys.Application.add_load(function() {

window.radopen("UpdateRemarks.aspx?ScreenType=1", "RemarksDialog");

return false;

});

}

function refreshGrid() {

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");

}

</script>

</telerik:RadCodeBlock>

in the UpdateRemarks.aspx
I'm using this javascript to refresh my grid.

<script type="text/javascript">

function CloseAndRebind() {

GetRadWindow().BrowserWindow.refreshGrid();

GetRadWindow().close();

}

function GetRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

return oWindow;

}

function CancelEdit() {

GetRadWindow().close();

}

</script>

When the button is clicked, nothing is displayed in IE9.
It is working fine with IE7 though..
Any idea how to solve this???
THanks..

7 Answers, 1 is accepted

answered on 31 Jan 2012, 10:55 AM

Hi Lydia,

I am afraid that the provided code is not enough to find out the reason for the problem. However, I prepared for you the following notes:

1) Make sure that you are using a version of Telerik.Web.UI which supports IE9, it will be best if you test with the latest one.

2) In case you have ajaxified the button which opens the RadWindow, use the ResponseScripts collection of the RadAjaxManager instead of the ClientScript object to inject the script.

In case you are using a proper version of RadControls and you still experience issues, please isolate the issue in a fully working demo page (no need for grid refresh logic or content page at all, since you say that the problem is with the RadWindow opening) provide only a page with a button, ajax settings and opening code along with detailed explanations and I will modify it for you in order to meet your requirements.

Greetings,
Svetlina Anati
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

answered on 01 Feb 2012, 09:58 AM

Hello Lydia,

Basically, official support for IE9 was introduced in Q1 2011, as the browser was released a couple of days after we published Q1 2011.

What I can suggest in your case is:

Upgrade your RadControls to later than Q1 2011 version or best - to the latest one. This is the best option as you will be able to use many new features, controls and fixes.

2. Use the override below in the pages with RadWindows on them. This will help with showing the window, but note that there were also many different browser-specific issues that have been fixed in the latest version and you might experience other problems with using the control in IE9.

The problem originates in the document.createElement() function. In prior IE versions you had to pass the whole HTML tag because of a bug with the name attribute. Under IE9 this bug is fixed, but the prior arguments cause an exception an you only need to pass the tag name. For example:

Copy Code

//Pre-IE9 code:

document.createElement("<iframe name='" + name + "'>");

//IE9 code:

document.createElement("iframe");

Please note that if you upgrade you will need to remove this override in order to avoid a breaking change:

Copy Code

<script type="text/javascript">

var $T = Telerik.Web.UI;

$T.RadWindow.prototype._createUI = function () {

//Dynamic rendering of the window

if (!this._popupElement) {

var windowID = this.get_id();

var wrapperID = 'RadWindowWrapper_' + windowID;

var isRightToLeft = this._isWindowRightToLeft();

var rootDiv = document.createElement('div');

rootDiv.id = wrapperID;

rootDiv.className = this._getFullSkinName();

var cssClass = this.get_cssClass(); //get CssClass property value

if (cssClass) Sys.UI.DomElement.addCssClass(rootDiv, cssClass);

if (isRightToLeft) {

Sys.UI.DomElement.addCssClass(rootDiv, "RadWindow_rtl");

}

if (!this._visibleTitlebar) {

Sys.UI.DomElement.addCssClass(rootDiv, 'rwNoTitleBar');

}

rootDiv.style.width = this._width;

rootDiv.style.height = this._height;

rootDiv.setAttribute('unselectable', 'on');

this._popupElement = rootDiv;

var tableElement = document.createElement('table');

tableElement.cellSpacing = 0;

tableElement.cellPadding = 0;

//set the size through additional CSSClass to prevent inheritance when content template is used

Sys.UI.DomElement.addCssClass(tableElement, "rwTable");

this._tableElement = tableElement;

//Create the table cells of the window

var classNames = [];

// In the case of direction=rtl, the cells of a table are automatically switched. That is why we need to switch the

// order in whick we pass the cells to the ResizeExtender.

if (isRightToLeft) {

classNames = ["rwCorner rwTopRight", "rwTitlebar", "rwCorner rwTopLeft",

"rwCorner rwBodyRight", "rwWindowContent", "rwCorner rwBodyLeft",

"rwCorner rwBodyRight", "rwStatusbar", "rwCorner rwBodyLeft",

"rwCorner rwFooterRight", "rwFooterCenter", "rwCorner rwFooterLeft"];

}

else {

classNames = ["rwCorner rwTopLeft", "rwTitlebar", "rwCorner rwTopRight",

"rwCorner rwBodyLeft", "rwWindowContent", "rwCorner rwBodyRight",

"rwCorner rwBodyLeft", "rwStatusbar", "rwCorner rwBodyRight",

"rwCorner rwFooterLeft", "rwFooterCenter", "rwCorner rwFooterRight"];

}

var rowClassNames = ["rwTitleRow", "rwContentRow", "rwStatusbarRow", "rwFooterRow"];

var index = 0;

for (var i = 0; i < 4; i++) {

var row = tableElement.insertRow(-1);

row.className = rowClassNames[i];

for (var j = 1; j <= 3; j++) {

var cell = row.insertCell(-1);

cell.innerHTML = " "; //"";

cell.className = classNames[index];

index++;

}

//Append title element

var titleCell = tableElement.rows[0].cells[1];

titleCell.innerHTML = "";

this._titleCell = titleCell;

//Append the top resizer

var topResizer = document.createElement('div');

topResizer.className = "rwTopResize";

topResizer.innerHTML = "";

this._topResizer = topResizer;

this._titleCell.appendChild(this._topResizer);

//Titlebar element - holds all other elements in the rwTitlebar

var titlebarTable = this._createDefaultTable();

titlebarTable.className = "rwTitlebarControls";

this._titlebarElement = titlebarTable;

this._titleCell.appendChild(this._titlebarElement);

//Follow 3 rwTitlebar elements - rwIcon(span), title (em), commandbuttons(ul)- the ul is created and maintained by set_behaviros method

//Window Icon

var windowIcon = this._getTitleIcon();

var iconCell = this._titlebarElement.rows[0].insertCell(-1);

iconCell.appendChild(windowIcon);

//Title text

var titleElement = this._getTitleElement();

var titleCell = this._titlebarElement.rows[0].insertCell(-1);

titleCell.appendChild(titleElement);

this.set_title(this._title);

//Set the behavior [including render available command buttons]

var commandCell = this._titlebarElement.rows[0].insertCell(-1);

//Setting nowrap would not work competely - the UL will still need to be sized

commandCell.noWrap = true;

commandCell.style.whiteSpace = "nowrap";

commandCell.appendChild(this._getTitleCommandButtonsHolder());

//this.set_behaviors(this._behaviors);

//Configure content cell

var contentCell = tableElement.rows[1].cells[1];

contentCell.vAlign = "top";

contentCell.innerHTML = ""; //Clear all existing content

this._contentCell = contentCell;

if (!(this._dockMode || this._isPredefined)) {

//add additional CSSClass to fix problem with background for some skins, e.g Black when not dockMode

Sys.UI.DomElement.addCssClass(this._contentCell, "rwExternalContent");

}

if (this._enableShadow && !$telerik.isIE6) {

//add additional CSSClass to show shadow if enabled

this._setShadowCSSClass(true);

}

//Name should match the server ID property! It is needed so that default browser 'target' mechanism works!

var name = this.get_name();

//Create rwStatusbar

var stastusbarTable = this._createDefaultTable();

stastusbarTable.style.width = "100%";

this._statusCell = tableElement.rows[2].cells[1];

this._statusCell.innerHTML = "";

this._statusCell.appendChild(stastusbarTable);

//Create rwStatusbar message cell and rwStatusbar resizer

if (isRightToLeft) {

this._createStatusbarResizer(stastusbarTable);

this._createStatusbarMessageCell(stastusbarTable);

}

else {

this._createStatusbarMessageCell(stastusbarTable);

this._createStatusbarResizer(stastusbarTable);

}

//Add the wrapper table to the popup element

this._popupElement.appendChild(this._tableElement);

//Add popup to the document

this._popupElement.style.display = 'none';

this._popupElement.style.position = 'absolute';

this._addWindowToDocument();

//Add rwTitlebar event handlers

this._registerTitlebarHandlers(true);

//Show/hide titlebars - it needs to be done here AND ins _show. Here - because a window can be shown with some animation. In _show - because the setting might be changed dynamically later using the API

this.set_visibleTitlebar(this._visibleTitlebar);

this.set_visibleStatusbar(this._visibleStatusbar);

//if in dock mode, do not create the IFRAME at all (removing it later causes memmory leaks)

//create a DIV element with the content instead and set it as a content element

if (this._dockMode) {

var contentElement = $get(this.get_id() + "_C");

if (contentElement && contentElement.innerHTML) {

contentElement.style.overflow = "auto";

contentElement.style.border = "0px";

this.set_contentElement(contentElement);

this.setWidthDockMode(this.get_width());

this.setHeightDockMode(this.get_height());

}

else {

//Create content IFRAME. Due to a bug in IE regarding setting the name attribute, the following ugly code needs to be used

var childFrame = ($telerik.isIE && !$telerik.isIE9) ?

document.createElement("<iframe name='" + name + "'>") :

document.createElement("iframe");

childFrame.name = name;

childFrame.src = "javascript:'<html></html>';";

childFrame.style.width = "100%";

childFrame.style.height = "100%";

childFrame.style.border = "0px"; //set to 0

childFrame.frameBorder = "0";

//Only under IE8 it is necessary to set display = "block" for the IFRAME - otherwise it will not occupy 100% of its parent element

if ($telerik.isIE8) {

childFrame.style.display = "block";

}

this._iframe = childFrame;

this._contentCell.appendChild(this._iframe);

}

if (!this._dockMode) {

//Create a back reference to parent RadWindow

this._createBackReference();

}

this._updateOpacity();

//Create the popup if it has not been created

if (!this._popupBehavior) {

//Set behaviors (move, resize,etc etc) - do it here, so that the IFRAME is created and can be passed to be skipped

//should be done only once!

this.set_behaviors(this._behaviors);

this._popupBehavior = $create(Telerik.Web.PopupBehavior, { 'id': (new Date() - 100)//set a unique id

+ 'PopupBehavior', 'parentElement': null, 'overlay': this._overlay, 'keepInScreenBounds': this._keepInScreenBounds

}, null, null, this._popupElement);

}

};

</script>

Regards,
Svetlina Anati
the Telerik team

answered on 01 Feb 2012, 02:27 PM

Hello Lydia,

I am afraid that we are out of assumption based only on the provided information, would you please provide more details about what exactly happens? Do you get a javascript error or not? If so, please provide a screenshot or the error message text. It will be also helpful if you can provide a video capture or live url where we can examine what is actually going on. Once we get a better understanding on what is actually going on on your side, we will do our best to help.

Kind regards,

Svetlina Anati
the Telerik team

answered on 02 Feb 2012, 02:47 AM

Radopen.jpg

Hi,
Here's what happened.
I have a button UpdateRemarks in my page where when clicking it, it will open a new radWindow (that contains another url).
Pls see my attached sample page.
In IE9, the windows does not appear at all and there is no javascript error or anything, it simply reloads the page and do nothing.
So any idea how to fix this?
Thanking you in advance.

answered on 03 Feb 2012, 05:02 PM

Hello Lydia,

Please, test with the below snippet (there is a small modification marked in yellow):

var $T = Telerik.Web.UI;

$T.RadWindow.prototype._createUI = function () {

//Dynamic rendering of the window

if (!this._popupElement) {

var windowID = this.get_id();

var wrapperID = 'RadWindowWrapper_' + windowID;

var isRightToLeft = this._isWindowRightToLeft();

var rootDiv = document.createElement('div');

rootDiv.id = wrapperID;

rootDiv.className = this._getFullSkinName();

var cssClass = this.get_cssClass(); //get CssClass property value

if (cssClass) Sys.UI.DomElement.addCssClass(rootDiv, cssClass);

if (isRightToLeft) {

Sys.UI.DomElement.addCssClass(rootDiv, "RadWindow_rtl");

}

if (!this._visibleTitlebar) {

Sys.UI.DomElement.addCssClass(rootDiv, 'rwNoTitleBar');

}

rootDiv.style.width = this._width;

rootDiv.style.height = this._height;

rootDiv.setAttribute('unselectable', 'on');

this._popupElement = rootDiv;

var tableElement = document.createElement('table');

tableElement.cellSpacing = 0;

tableElement.cellPadding = 0;

//set the size through additional CSSClass to prevent inheritance when content template is used

Sys.UI.DomElement.addCssClass(tableElement, "rwTable");

this._tableElement = tableElement;

//Create the table cells of the window

var classNames = [];

// In the case of direction=rtl, the cells of a table are automatically switched. That is why we need to switch the

// order in whick we pass the cells to the ResizeExtender.

if (isRightToLeft) {

classNames = ["rwCorner rwTopRight", "rwTitlebar", "rwCorner rwTopLeft",

"rwCorner rwBodyRight", "rwWindowContent", "rwCorner rwBodyLeft",

"rwCorner rwBodyRight", "rwStatusbar", "rwCorner rwBodyLeft",

"rwCorner rwFooterRight", "rwFooterCenter", "rwCorner rwFooterLeft"];

}

else {

classNames = ["rwCorner rwTopLeft", "rwTitlebar", "rwCorner rwTopRight",

"rwCorner rwBodyLeft", "rwWindowContent", "rwCorner rwBodyRight",

"rwCorner rwBodyLeft", "rwStatusbar", "rwCorner rwBodyRight",

"rwCorner rwFooterLeft", "rwFooterCenter", "rwCorner rwFooterRight"];

}

var rowClassNames = ["rwTitleRow", "rwContentRow", "rwStatusbarRow", "rwFooterRow"];

var index = 0;

for (var i = 0; i < 4; i++) {

var row = tableElement.insertRow(-1);

row.className = rowClassNames[i];

for (var j = 1; j <= 3; j++) {

var cell = row.insertCell(-1);

cell.innerHTML = " "; //"";

cell.className = classNames[index];

index++;

}

//Append title element

var titleCell = tableElement.rows[0].cells[1];

titleCell.innerHTML = "";

this._titleCell = titleCell;

//Append the top resizer

var topResizer = document.createElement('div');

topResizer.className = "rwTopResize";

topResizer.innerHTML = "";

this._topResizer = topResizer;

this._titleCell.appendChild(this._topResizer);

//Titlebar element - holds all other elements in the rwTitlebar

var titlebarTable = this._createDefaultTable();

titlebarTable.className = "rwTitlebarControls";

this._titlebarElement = titlebarTable;

this._titleCell.appendChild(this._titlebarElement);

//Follow 3 rwTitlebar elements - rwIcon(span), title (em), commandbuttons(ul)- the ul is created and maintained by set_behaviros method

//Window Icon

var windowIcon = this._getTitleIcon();

var iconCell = this._titlebarElement.rows[0].insertCell(-1);

iconCell.appendChild(windowIcon);

//Title text

var titleElement = this._getTitleElement();

var titleCell = this._titlebarElement.rows[0].insertCell(-1);

titleCell.appendChild(titleElement);

this.set_title(this._title);

//Set the behavior [including render available command buttons]

var commandCell = this._titlebarElement.rows[0].insertCell(-1);

//Setting nowrap would not work competely - the UL will still need to be sized

commandCell.noWrap = true;

commandCell.style.whiteSpace = "nowrap";

commandCell.appendChild(this._getTitleCommandButtonsHolder());

//this.set_behaviors(this._behaviors);

//Configure content cell

var contentCell = tableElement.rows[1].cells[1];

contentCell.vAlign = "top";

contentCell.innerHTML = ""; //Clear all existing content

this._contentCell = contentCell;

if (!(this._dockMode || this._isPredefined)) {

//add additional CSSClass to fix problem with background for some skins, e.g Black when not dockMode

Sys.UI.DomElement.addCssClass(this._contentCell, "rwExternalContent");

}

if (this._enableShadow && !$telerik.isIE6) {

//add additional CSSClass to show shadow if enabled

this._setShadowCSSClass(true);

}

//Name should match the server ID property! It is needed so that default browser 'target' mechanism works!

var name = this.get_name();

//Create rwStatusbar

var stastusbarTable = this._createDefaultTable();

stastusbarTable.style.width = "100%";

this._statusCell = tableElement.rows[2].cells[1];

this._statusCell.innerHTML = "";

this._statusCell.appendChild(stastusbarTable);

//Create rwStatusbar message cell and rwStatusbar resizer

if (isRightToLeft) {

this._createStatusbarResizer(stastusbarTable);

this._createStatusbarMessageCell(stastusbarTable);

}

else {

this._createStatusbarMessageCell(stastusbarTable);

this._createStatusbarResizer(stastusbarTable);

}

//Add the wrapper table to the popup element

this._popupElement.appendChild(this._tableElement);

//Add popup to the document

this._popupElement.style.display = 'none';

this._popupElement.style.position = 'absolute';

this._addWindowToDocument();

//Add rwTitlebar event handlers

this._registerTitlebarHandlers(true);

//Show/hide titlebars - it needs to be done here AND ins _show. Here - because a window can be shown with some animation. In _show - because the setting might be changed dynamically later using the API

this.set_visibleTitlebar(this._visibleTitlebar);

this.set_visibleStatusbar(this._visibleStatusbar);

//if in dock mode, do not create the IFRAME at all (removing it later causes memmory leaks)

//create a DIV element with the content instead and set it as a content element

if (this._dockMode) {

var contentElement = $get(this.get_id() + "_C");

if (contentElement && contentElement.innerHTML) {

contentElement.style.overflow = "auto";

contentElement.style.border = "0px";

this.set_contentElement(contentElement);

this.setWidthDockMode(this.get_width());

this.setHeightDockMode(this.get_height());

}

else {

//Create content IFRAME. Due to a bug in IE regarding setting the name attribute, the following ugly code needs to be used

var childFrame = ($telerik.isIE && Sys.Browser.version < 9) ?

document.createElement("<iframe name='" + name + "'>") :

document.createElement("iframe");

childFrame.name = name;

childFrame.src = "javascript:'<html></html>';";

childFrame.style.width = "100%";

childFrame.style.height = "100%";

childFrame.style.border = "0px"; //set to 0

childFrame.frameBorder = "0";

//Only under IE8 it is necessary to set display = "block" for the IFRAME - otherwise it will not occupy 100% of its parent element

if ($telerik.isIE8) {

childFrame.style.display = "block";

}

this._iframe = childFrame;

this._contentCell.appendChild(this._iframe);

}

if (!this._dockMode) {

//Create a back reference to parent RadWindow

this._createBackReference();

}

this._updateOpacity();

//Create the popup if it has not been created

if (!this._popupBehavior) {

//Set behaviors (move, resize,etc etc) - do it here, so that the IFRAME is created and can be passed to be skipped

//should be done only once!

this.set_behaviors(this._behaviors);

this._popupBehavior = $create(Telerik.Web.PopupBehavior, { 'id': (new Date() - 100)//set a unique id

+ 'PopupBehavior', 'parentElement': null, 'overlay': this._overlay, 'keepInScreenBounds': this._keepInScreenBounds

}, null, null, this._popupElement);

}

};

</script>

Note, that we strongly recommend to upgrade to a later version which officially supports IE9 because other problems might occur since other fixes are also applied and it is not possible to provide overrides to every method which has changed in the last over 2 years.

All the best,
Svetlina Anati
the Telerik team