RadTab With Close Button

4 posts, 0 answers
  1. Kent
    Kent avatar
    26 posts
    Member since:
    Dec 2010

    Posted 26 Mar 2013 Link to this post

    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);
                }
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 Mar 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mahesh
    Mahesh avatar
    1 posts
    Member since:
    Oct 2013

    Posted 31 Oct 2013 Link to this post

    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?
  5. Kent
    Kent avatar
    26 posts
    Member since:
    Dec 2010

    Posted 31 Oct 2013 Link to this post

    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;
    }
Back to Top