Tabstrip with buttons in tab (x for close etc.)

[Lee Saunders]

I have a tabstrip that I am loading with some buttons (x for close etc.) in the tab, not the content area.

I need to be able to determine if the tab that contains the button that was clicked is the currently selected tab (because, I need to access the content of that tab for one of the button's functionality) and I would like to jump out of the javascript if the tab is not the currently selected one.

Here is the complete code I'm using to build my tabs.

    function loadTab(name, id, url, pinned) {

        debugger;

        if (name == "Log Out") {
            window.location(url);
            return;
        }
        //special case for logout redirect.  
        //replace puts the url in page history so the user cannot use the back button to navigate back to the application without logging in
        if (name == "Log Out") {
            window.location.replace(url);
            return;
        }
        
        var $item = $("#" + id).parents('li');

        if ($item.length != 0) {
            tabStrip.select($item);
        } else {
            var html = "<span id='" + id + "' class='k-button k-button-icon'>" +
                "<span class='fa fa-times fa-small fa-button'></span>" +
                "</span>" +
                "<span id='" + id + "-pin' class='k-button k-button-icon'>" +
                "<span class='fa fa-thumb-tack fa-rotate-90 fa-small fa-button'></span>" +
                "</span>" +
                "<span id='" + id + "-window' class='k-button k-button-icon'>" +
                "<span class='fa fa-caret-right fa-regular-lift fa-button'></span>" +
                "</span>";

            $.ajax({
                url: url,
                type: 'get',
                success: function (data) {
                    // Wrap the tab content's HTML with a div that has a style display:relative 
                    //so that ew can use wait dialogs.
                    var divData = "<div class='connect-tab-wait-dialog-wrapper'>" + data + "</div>";
                    
                    tabStrip.append(
                    {
                        encoded: false,
                        id: id,
                        text: name + html,
                        content: divData
                        
                    });
                    
                    $("#" + id).click(function() {
                            connect.shell.removeTab(this);
                    });

                    if (pinned === 'True') {
                        $("#" + id + "-pin").children("span").toggleClass("fa-rotate-90");
                    }

                    //The pin on the tab is used to set the app up to be automatically loaded on startup
                    //so when toggled, the event will make an ajax call to add/remove the app from the 
                    //OSD_USERS_APPLICATIONS_PINNED database table.
                    $("#" + id + "-pin").click(function () {
                        connect.shell.togglePin(this, id);
                    });
            
                    $("#" + id + "-window").click(function() {
                        connect.shell.loadWindow(this);
                    });
            
                    $item = $("#" + id).parents('li');

                    expandContentDivs($tabStripElement.children(".k-content").last());

                    tabStrip.select($item);
                },
                error: function (x, e) {

                    if (x.status == 404) {
                        connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>404 - Not Found</div>", null, false);
                    }
                    else if (x.status == 401) {
                        connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>401- Unauthorized</div>", null, false);
                    }
                    else if (x.status == 402) {
                        connect.modal.displayModalDialog("modal-8", "<div onclick='connect.modal.cancelModalDialog()'>403 - Access Denied</div>", null, false);
                    }
                }
            });

            // Update the application use count so that the "Favorites" widget shows their most used applications
            $.ajax({
                url: 'Home/UpdateApplicationUseCount',
                type: 'POST',
                data: JSON.stringify({ applicationPk: id }),
                contentType: 'application/json;',
                success: function (result) {
                    if (result === true) {
                        
                    }
                },
                error: function () {
                }
            });
        }        
    }

The loadWindow function takes the content of the tab and pops it out into its own window.  When the tab is not the current tab, it gets the content from the wrong tab.

I tried setting the selected tab first, but that did not seem to work.

    function loadWindow(me) {
        tabStrip.select($(me).parents('li'));

        var innerHtml = $(tabStrip.contentHolder(tabStrip.select().index())).html(),
            win = window.open(),
            outerHtml = $.ajax({
                    type: "GET",
                    url: 'Home/Wrapper',
                    async: false,
                }).responseText;
        
        outerHtml = outerHtml.replace('[innerHTML]', innerHtml);
        
        win.document.open();
        win.document.write(outerHtml);

        try {
            win.document.close();
        } catch(e) {
            alert(e);
        }

        removeTab(me);
    }



 

[Petur Subev]

Hello Lee,

To understand which element is currently actively displayed you can use the select method.

http://docs.telerik.com/kendo-ui/api/web/tabstrip#methods-select

Here it is in action:

http://dojo.telerik.com/@pesho/oDuKE

Kind Regards,
Petur Subev
Telerik