problem opening radwindow serverside

15 posts, 0 answers
  1. mww
    mww avatar
    257 posts
    Member since:
    Sep 2012

    Posted 05 May 2011 Link to this post

    Im trying to open a radwindow serverside using this code

    RadWindow newWindow = new RadWindow();
    newWindow.NavigateUrl = "RegistrationSent.aspx";
    newWindow.Top = Unit.Pixel(22);
    newWindow.VisibleOnPageLoad = true;
    newWindow.Left = Unit.Pixel(0);
    RadWindowManager1.Windows.Add(newWindow); 

    when it runs, im getting a javascript error

    Microsoft JScript runtime error: DOM Exception: INVALID_CHARACTER_ERR (5)

    on this line

    var _b4=($telerik.isIE)?document.createElement("<iframe name='"+_b3+"'>"):document.createElement("iframe");


    im using Q1 2009 controls and IE9

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 06 May 2011 Link to this post

    Hi mww,

     This problem used to occur in an older version - from Q1 2011 we officially support IE9 and if you upgrade to it or a later version, everything will work fine.

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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mww
    mww avatar
    257 posts
    Member since:
    Sep 2012

    Posted 07 May 2011 Link to this post

    unfortunately thats not an option at the moment as your controls are too expensive.  Is there a workaround for the version Im currently using ?
  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 09 May 2011 Link to this post

    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.

  6. James
    James avatar
    1 posts
    Member since:
    Jun 2011

    Posted 28 Jun 2011 Link to this post

    I had the same problem and fixed it by forcing compatibility view for my site.
  7. Levent
    Levent avatar
    3 posts
    Member since:
    Apr 2011

    Posted 16 Aug 2011 Link to this post

    Hi,
    I have the same problem and I copy your code to my user control and I got that error:

    SCRIPT438: Object doesn't support property or method 'get_cssClass' 
    home.aspx, line 145 character 18

    Have any idea?
    Thanks.

    Levent KAYA
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 17 Aug 2011 Link to this post

    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

    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.

  9. Levent
    Levent avatar
    3 posts
    Member since:
    Apr 2011

    Posted 17 Aug 2011 Link to this post

    Dear Marin,

    As you noticed in your reply I have added your solution in my ascx and top of my codes. Now I understand my mistake.

    I found another solution for the problem.

    I added to my masterpages that code:

    <meta http-equiv="X-UA-Compatible" content="IE=8"/>

    It makes browser to render in IE 8 mode.

    Also you can add an entry to web.config for entire application.

    Thanks.
  10. João Dias
    João Dias avatar
    3 posts
    Member since:
    Oct 2009

    Posted 21 Sep 2011 Link to this post

    Hi,

    What can i do if with your override function

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

    Telerik.isIE9 is undefined

    Thanks,

    Urbano Machado
  11. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 22 Sep 2011 Link to this post

    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
  12. Ted
    Ted avatar
    2 posts
    Member since:
    Jun 2014

    Posted 11 Jun 2014 in reply to Marin Bratanov Link to this post

    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








  13. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 19 Jun 2014 in reply to Marin Bratanov Link to this post

    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 
  14. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Jun 2014 in reply to Asutosh Link to this post

    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.
  15. Asutosh
    Asutosh avatar
    130 posts
    Member since:
    Sep 2013

    Posted 20 Jun 2014 in reply to Shinu Link to this post

    the issue is we are creating a responsive website and we have to give width in percentage only . everything else in your code is similar to what we have done. 
  16. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Jun 2014 in reply to Asutosh Link to this post

    Hi Asutosh,

    Please have a look into this forum thread which discuss about the same scenario.

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017