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

problem opening radwindow serverside

14 Answers 434 Views

Window

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

14 Answers, 1 is accepted

answered on 09 May 2011, 03:47 PM

Hi Mark,

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:

//Pre-IE9 code:

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

//IE9 code:

document.createElement("iframe");

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:

<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>

All the best,
Marin
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 17 Aug 2011, 09:54 AM

Hello Levent,

This override should be placed in the main page and should be at the end of the form to ensure it will override any other script the RadWindow will output. Therefore it should not be placed in a user control, as it usually renders somewhere in the middle of the page.

Without any more information on your exact setup and the version that you are using I am not sure what else might be causing this issue and, if you are unable to get it working after moving the code to the end of the form, I would advise that you open a support ticked and send us more detailed information on your configuration along with a simple project that isolates your issue.

Greetings,
Marin
the Telerik team

answered on 21 Sep 2011, 04:06 PM

Sem-T-tulo.png

Hi,

What can i do if with your override function

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

Telerik.isIE9 is undefined

Thanks,

Urbano Machado

answered on 22 Sep 2011, 01:37 PM

Hi João,

I see that the last version you have downloaded is Q2 2009. This is two years old now and many things have changed in the code. Please note that this override cannot work in all cases, as it depends on other pieces of code that are more recent than the version you are using. For such an old version the best approach is to upgrade to the latest (Q2 2011 SP1 at the time of writing). The second-best approach is to use the meta tag that invokes the compatibility mode, from the previous post.

Greetings,
Marin
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 11 Jun 2014, 08:06 PM

Hi,

I had the same issue as João with IE9 being undefined, so I added a function at the beginning to get the version from the user agent string:

function isIE() {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
} Then I replaced that particular line with the following code:
var childFrame = ($telerik.isIE && !(isIE() == 9)) ? I did have to comment out a couple lines, but ultimately, it worked for my purposes!

Thanks to Martin for the override!
-Ted

answered on 20 Jun 2014, 04:32 AM

firsttime.png

secondtime.png

hi
i am opening radwindow from client side
i have rad grid in that radwindow
first time when i open my rad window grid is showing small in size and after closing that rad window i open second time grid showing full in rad window
i have attached image of first and second time
give me solution of that

answered on 20 Jun 2014, 09:55 AM

Hi Asutosh,

Please have a look into the sample code snippet which works fine at my end. Please provide your code if it doesn't help.

ASPX:

<telerik:RadWindow ID="rwindowGridOrders" runat="server" Width="700px" Height="500px">

<ContentTemplate>

<telerik:RadGrid ID="rgridOrders" runat="server" DataSourceID="sqldsOrders">

</telerik:RadGrid>

</ContentTemplate>

</telerik:RadWindow>

<telerik:RadButton ID="rbtnOpenWindow" runat="server" Text="OpenWnindow" AutoPostBack="false"

OnClientClicked="openWindow">

</telerik:RadButton>

JavaScript:

function openWindow(sender, args) {

var window = $find("<%=rwindowGridOrders.ClientID%>");

window.show();

}

Thanks,
Shinu.