Kendo Tabstrip prevent duplicate tabs from opening

Question

I have a tabstrip which loads a page from URLContent.

I'd like to accomplish the following:

If a tab with the targetted URL is already open, instead of appending a new tab, select the existing tab.
If it's a new tab, append the tab dynamically and load it.

From the documentation, there seems to be no default way of handling this.

http://docs.kendoui.com/api/web/tabstrip

Also, I'd like to know if there are any ways to dynamically retrieve the ID/Name of the tab given it's tab index.

Here's how I'm initializing the Tabstrip:

<div class="mainContentTabStrip" style="width:100%;height:100%">
    <kendo:tabStrip name="mainVerticalTabStrip">
        <kendo:tabStrip-animation>
            <kendo:tabStrip-animation-open effects="fadeIn" />
        </kendo:tabStrip-animation>
    </kendo:tabStrip>       
</div>

And then to append a new tab:

function mainContentTreeView_onSelect(e) 
{
    var dataItem = $("#mainVerticalMenu").data("kendoTreeView").dataItem(e.node);

    var selectedNodeText = dataItem.text;
    var selectedNodeValue = dataItem.id;

    var mainVerticalTabStrip = $("#mainVerticalTabStrip").data("kendoTabStrip");
    mainVerticalTabStrip.append({
        text: selectedNodeText + 
            "  <img src='image/image/button_cancel.png' " + 
            "id='" + this.text(e.node) + "' " + 
            "name='" + this.text(e.node) + "' " + 
            "onclick='javascript:mainContentTreeView_delete()' " + 
            "onmouseover=" + this.text(e.node) + ".src='image/image/button_cancel_over.png' " +
            "onmouseout=" + this.text(e.node) + ".src='image/image/button_cancel.png' " +
            ">",
        encoded: false,
        contentUrl: "screen/" + selectedNodeValue,
        selected: true
    });
}

You can do it but you need to do it programmatically. How do you initialize the tabstrip using a DataSource or HTML `
Would be possible to show it in the question or in a JSFiddle? — OnaBai, Mar 26 '13 at 08:12
@OnaBai Actually, I was using the JSP wrapper ver to initialize it. I have edited the OP. — TtT23, Mar 26 '13 at 08:51

OnaBai · Accepted Answer · 2013-03-27T01:02:37.770

You need some programming... there is not such functionality out-of-the-box.

What I propose is keeping an associative array where key save the id of the tabstrips (or the url if you prefer) and as value the index of the tabstrip that opens that url.

When onSelect is fired in the tree, you check if we have that tab already created if so we just select it. If it is not created we add a new element to the associative array and append a new item to the tabstrip.

In the following implementation I have opted for saving as data associated to the HTML element that represents the TabStrip.

function mainContentTreeView_onSelect(e) {
    var mainTreeView = $("#mainVerticalMenu").data("kendoTreeView");
    var mainVerticalTabStrip = $("#mainVerticalTabStrip").data("kendoTabStrip");

    var dataItem = mainTreeView.dataItem(e.node);
    var selectedNodeText = dataItem.text;
    var selectedNodeValue = dataItem.id;

    var data = mainVerticalTabStrip.element.data("my-data") || [];
    if (!data[selectedNodeText]) {
        mainVerticalTabStrip.append({
            text: selectedNodeText +
                    "  <img src='image/image/button_cancel.png' " +
                    "id='" + this.text(e.node) + "' " +
                    "name='" + this.text(e.node) + "' " +
                    "onclick='javascript:mainContentTreeView_delete()' " +
                    "onmouseover=" + this.text(e.node) + ".src='image/image/button_cancel_over.png' " +
                    "onmouseout=" + this.text(e.node) + ".src='image/image/button_cancel.png' " +
                    ">",
            encoded: false,
            contentUrl: "screen/" + selectedNodeValue
        });
        data[selectedNodeText] = Object.keys(data).length + 1;
        mainVerticalTabStrip.element.data("my-data", data);
    }
    mainVerticalTabStrip.select(data[selectedNodeText] - 1);
}

Running example here: http://jsfiddle.net/OnaBai/czPFs/

EDIT: Since Object.index seems not be supported in IE8, here a different implementation not using it:

function mainContentTreeView_onSelect(e) {
    var mainTreeView = $("#mainVerticalMenu").data("kendoTreeView");
    var mainVerticalTabStrip = $("#mainVerticalTabStrip").data("kendoTabStrip");

    var dataItem = mainTreeView.dataItem(e.node);
    var selectedNodeText = dataItem.text;
    var selectedNodeValue = dataItem.id;

    var data = mainVerticalTabStrip.element.data("my-data") || { items: 0 };
    if (!data[selectedNodeText]) {
        mainVerticalTabStrip.append({
            text: selectedNodeText +
                    "  <img src='image/image/button_cancel.png' " +
                    "id='" + this.text(e.node) + "' " +
                    "name='" + this.text(e.node) + "' " +
                    "onclick='javascript:mainContentTreeView_delete()' " +
                    "onmouseover=" + this.text(e.node) + ".src='image/image/button_cancel_over.png' " +
                    "onmouseout=" + this.text(e.node) + ".src='image/image/button_cancel.png' " +
                    ">",
            encoded: false,
            contentUrl: "screen/" + selectedNodeValue
        });
        data[selectedNodeText] = ++data.items;
        mainVerticalTabStrip.element.data("my-data", data);
    }
    mainVerticalTabStrip.select(data[selectedNodeText] - 1);
}

I just checked the ECMAScript 5 Standards and it seems like Object.keys is not supported for IE8. Do you have any suggestions on the workaround for this? — TtT23, Mar 27 '13 at 00:30

Kendo Tabstrip prevent duplicate tabs from opening

1 Answers1