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

After adding new tds to Radwindow Titlebar

1 Answer 44 Views
Window
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 02 Jan 2015, 09:51 AM
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.

1 Answer, 1 is accepted

Sort by
0
Rahul
Top achievements
Rank 1
answered on 02 Jan 2015, 09:53 AM
Here's the radwindow screenshot with Help and Close. Notice the non-round edges at RHS due to addition of Help and Close.
Tags
Window
Asked by
Rahul
Top achievements
Rank 1
Answers by
Rahul
Top achievements
Rank 1
Share this question
or