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:
You can override the function that creates the window to the current one and it will be displayed, but there are many different browser-specific issues that have been fixed in the latest release and they will persist.
Please note that if you upgrade you will need to remove this override in order to avoid a breaking change:
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);
}
};
You should put this script on the page which has the radWindow declared on it.
Please note that we do not recommend using this override, as it may conflict newer versions and may result in other issues.
Another possible approach is to force your pages to be loaded in IE8 Compatibility mode by adding the following meta tag in your page: