RadTab With Close Button

[Kent]

I found some code online that does most of what I want.

Im using something like this:

The 2 issues im having...
1) The delete button image sits to high and left on the tab.  Is there a way to format where this sits within the createcloseimage() or attachcloseimage() functions?

2) The deletetab() function will remove the tab but not the window associated with is.  The win variable get assigned the associated window but the removeWindow call doesn't seem to be working.

My call:
//create a new tab
                        var tab = new Telerik.Web.UI.RadTab();
                        //set the text of the tab
                        tab.set_text(itemText);
                        oWnd.correspondingTab = tab;
                        //add the tab to the tabstrip
                        tabStrip.get_tabs().add(tab);
                        AttachCloseImage(tab, "Images/close-md.png");
                        tabStrip.repaint();
                        tab.correspondingWnd = oWnd;
                        //tab.set_imageUrl(item.get_imageUrl());
                        tabStrip.commitChanges();

                        //Select this tab
                        tab.select();

           function CreateCloseImage(closeImageUrl) {
                var closeImage = document.createElement("img");
                closeImage.src = closeImageUrl;
                closeImage.border = "0";
                //closeImage.alt = "";
                return closeImage;
            }

            function AttachCloseImage(tab, closeImageUrl) {
                var closeImage = CreateCloseImage(closeImageUrl);
                closeImage.AssociatedTab = tab;
                closeImage.onclick = function (e) {
                    if (!e) e = event;
                    if (!e.target) e = e.srcElement;

                    deleteTab(tab);

                    e.cancelBubble = true;
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    }

                    return false;
                }
                tab.get_innerWrapElement().appendChild(closeImage);
            }

            function deleteTab(tab) {
                var win;
                if (tab) {
                    win = tab.correspondingWnd;
                    tabStrip.trackChanges();
                    tabStrip.get_tabs().remove(tab);
                    tabStrip.commitChanges();
                    if (tabStrip._selectedIndex == -1) {
                        EnableDisableToolbarButtons();
                    }
                }
                //remove the corresponding window from the manager
                manager.removeWindow(win);
            }

[Kate]

Hi Kent,

Please take a look at our on-line demo here, where you can find a runnable example demonstrating the behavior that you are currently trying to accomplish.

Regards,
Kate
the Telerik team

[Mahesh]

I want tot provide the functionality of closing the tabs which are created dynamically by clicking on the close button. So far i am not able to find any solution. Can anyone help?

[Kent]

Took me awhile to get it working the way I wanted.  Here is my javascript.

//opening the window
function openNewWindow(sender, args) {
    var item = args.get_item();
    //var itemUrl = item.get_value();
    var itemUrl = item.get_attributes().getAttribute("Url");
    //var itemText = item.get_text();
    var itemText = item.get_value();
    var oWnd;

    if (itemUrl) {
        oWnd = manager.getWindowByName(itemText);
        if (oWnd) {
            // do we need to activate the existing window?
            OnClientActivate(oWnd);
            EnableDisableToolbarButtons(oWnd.get_contentFrame().contentWindow.document);
            //return false;
        }
        else {
            // check # of tabs open
            if (manager.GetWindows().length >= maxTabs) {
               alert("You may only have " + maxTabs + " tabs open at once.");
                return false;
            }
            oWnd = radopen(itemUrl, null);
            oWnd.set_name(itemText);
            oWnd.maximize();
            oWnd.center();
            oWnd.set_visibleStatusbar(false);
            tabStrip.trackChanges();
            //create a new tab
            var tab = new Telerik.Web.UI.RadTab();
            //set the text of the tab
            tab.set_text(itemText);
            oWnd.correspondingTab = tab;
            //add the tab to the tabstrip
            tabStrip.get_tabs().add(tab);
            AttachCloseImage(tab, "Images/close-md.png");
            tabStrip.repaint();
            tab.correspondingWnd = oWnd;
            //tab.set_imageUrl(item.get_imageUrl());
            tabStrip.commitChanges();

            //Select this tab
            tab.select();
        }
    }
}

function CreateCloseImage(closeImageUrl) {
    var closeImage = document.createElement("img");
    closeImage.src = closeImageUrl;
    closeImage.border = "0";
    //closeImage.alt = "";
    return closeImage;
}

function AttachCloseImage(tab, closeImageUrl) {
    var closeImage = CreateCloseImage(closeImageUrl);
    closeImage.AssociatedTab = tab;
    closeImage.onclick = function (e) {
        if (!e) e = event;
        if (!e.target) e = e.srcElement;

        deleteTab(tab);

        e.cancelBubble = true;
        if (e.stopPropagation) {
            e.stopPropagation();
        }

        return false;
    }
    tab.get_innerWrapElement().appendChild(closeImage);
}

function deleteTab(tab) {
    var win;
    if (tab) {
        win = tab.correspondingWnd;
        var tabToSelect = tab.get_nextTab();
        if (!tabToSelect)
            tabToSelect = tab.get_previousTab();

        tabStrip.get_tabs().remove(tab);
        if (tabToSelect)
            tabToSelect.set_selected(true);
        if (tabStrip._selectedIndex == -1) {
            EnableDisableToolbarButtons();
        }
    }
    //remove the corresponding window from the manager
    manager.removeWindow(win);
    win.close();
}

function OnClientCommand(sender, args) {
    //because we don't want to show the minimized RadWindow, we hide it after minimizing
    //and raise the _Maximized flag (used in OnClientTabSelected)
    if (args.get_commandName() == "Minimize") {
        if (sender.isMaximized()) {
            sender._Maximized = true;
        }

        sender.hide();
        //raise the _toMinimize flag (used in OnClientActivate)
        sender._toMinimize = true;
        var tab = sender.correspondingTab;
        if (tab) {
            tab.set_selected(false);
        }
    }
}

function OnClientTabSelected(sender, args) {
    //get a reference to the corresponding window
    var win = args.get_tab().correspondingWnd;

    if (!win) return;
    EnableDisableToolbarButtons(win.get_contentFrame().contentWindow.document);
    if (!win.isVisible()) {
        win.show();
        win.restore();
        //if the window was maximized before client minimizes it, we need to restore
        //its maximized state
        if (win._Maximized) {
            win.maximize();
            win._Maximized = null;
        }
    }
    //ensure that the currently active RadWindow will have the highest z-Index.
    var popupElem = win.get_popupElement();
    var oldZindex = parseInt(popupElem.style.zIndex);
    var styleZIndex = win.get_stylezindex();
    var newZIndex = (styleZIndex) ? styleZIndex : Telerik.Web.UI.RadWindowUtils.get_newZindex(oldZindex);
    popupElem.style.zIndex = "" + newZIndex;
    win.setActive(true);
    //highlights corresponding panel item
    //var panelItem = panel.findItemByAttribute("Value", args.get_tab().get_text());
    //if (panelItem) {
    //    panelItem.focus();
    //}
}

function OnClientActivate(sender, args) {
    var tab = sender.correspondingTab;
    if (tab && !sender._toMinimize) {
        tab.set_selected(true);
    }
    //EnableDisableToolbarButtons(sender.get_contentFrame().contentWindow.document);
    sender._toMinimize = false;
}