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

RadTab With Close Button

3 Answers 80 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Kent
Top achievements
Rank 1
Kent asked on 27 Mar 2013, 12:06 AM
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);
            }

3 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 27 Mar 2013, 07:45 AM
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
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.
0
Mahesh
Top achievements
Rank 1
answered on 31 Oct 2013, 01:45 PM
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?
0
Kent
Top achievements
Rank 1
answered on 31 Oct 2013, 03:40 PM
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;
}
Tags
TabStrip
Asked by
Kent
Top achievements
Rank 1
Answers by
Kate
Telerik team
Mahesh
Top achievements
Rank 1
Kent
Top achievements
Rank 1
Share this question
or