After adding new tds to Radwindow Titlebar

2 posts, 0 answers
  1. Rahul
    Rahul avatar
    2 posts
    Member since:
    Dec 2014

    Posted 02 Jan 2015 Link to this post

    I'm using a radwindow to open a popup, now there was requirement to add new links in the titlebar. From what I found, I used this javascript snippet:-
    HereI'm inserting two new TDs just before default close button. The TD before that is what contains an TD>> EM for title text of radwindow.
    function openPopUpWindow(Url, name) {
        var win = window.radopen(Url, name);
        winRad1 = win;
        var TitleBar = win.GetTitlebar();
        var parent = TitleBar.parentNode;
        var oUL = parent.getElementsByTagName('TR')[0];  
        secondTD = oUL.getElementsByTagName('TD')[1];
        innerEm = oUL.getElementsByTagName('EM')[0];   // This is where I want to change width
        innerEm.id = 'TitleRadEM';                   // Assign an ID to it; Can't chnage it's width here as before load it's empty
        elementThis = innerEm;
        win.add_pageLoad(OnClientPageLoad12);
        win.add_activate(OnClientActivate12);
        win.add_resizeEnd(OnClientResizeEnd12);
        if (!(oUL.firstChild.id == "helplink")) {
            var oLI = document.createElement("TD");
            oLI.id = "helplink"
            oLI.style.cssText = 'width:22px;';
            var Em = document.createElement("EM");
            var EmClose = document.createElement("EM");
            var A = document.createElement("A");
            oLI.appendChild(Em);
            A.className = "helplinclass";
            A.href = "https://support.xyzxyzxyz.com/";
            A.target = "_blank";
            A.title = "Help";
            A.id = 'HelpLink';
            A.innerHTML = 'Help';
            Em.appendChild(A);
            oUL.insertBefore(oLI, oUL.lastChild);
            var oLI2 = document.createElement("TD");
            oLI2.style.cssText = 'width:22px;';
            oLI2.appendChild(EmClose);
            EmClose.unselectable = 'on';
            EmClose.innerHTML = '  Close';
            EmClose.style["font-size"] = "10pt";
            EmClose.style.cssText = 'font-size:10pt; padding-right:-1px;';
            oUL.insertBefore(oLI2, oUL.lastChild);
            win._updateTitleWidth();
        }
        win.center();
        win.autoSize(false); // tried with true and without this as well
    }
    function OnClientPageLoad12() {
        var windowR = GetRadWindowManager();
        if (winRad1 != null) {
            var win = winRad1;
            var TitleBar = win.GetTitlebar();
            var parent = TitleBar.parentNode;
            var oUL = parent.getElementsByTagName('TR')[0];
            secondTD = oUL.getElementsByTagName('TD')[1];
            innerEm = oUL.getElementsByTagName('EM')[0];
            innerEm.style.cssText = 'width:850px;';
            win._updateTitleWidth();
        }
     
    }
     
    function OnClientActivate12() {
        document.getElementById('TitleRadEM').style.cssText = 'width:850px;';
        elementThis.style.cssText = 'width:850px;';
    }


    The problem is that as the rad window is loaded the UI gets a bit distorted at right hand side of radwindow.
    As I've inserted a new elements (2 tds); original width changes and this causes the width to overflow at RHS. Now to correct this I tried changing width of title TD (containing the text just before the Help link) of the titlebar but this is not working. 
    I bind a loadevent as well activate event in the above code:-
    Therefore I try to reduce the width of TD containing the title text so that new links can be accomodated. To achieve this I biI bind a loadevent as well activate event in the above code:-
    In OnClientPageLoad12 at first the width is adjusted and then after telerk's js is executed it again get's distorted.
    In OnClientActivate12: the width is adjusted just the right way but I've to click on radwindow to activate it.

    FYI: I've used both approaches, that is accessing element through document.getElementby and from radwindowmanager.


    Please help me to move in the right direction.
  2. Rahul
    Rahul avatar
    2 posts
    Member since:
    Dec 2014

    Posted 02 Jan 2015 Link to this post

    Here's the radwindow screenshot with Help and Close. Notice the non-round edges at RHS due to addition of Help and Close.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top