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
    });
}

Answer 1

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);
}