Kendo UI Tabstrip content collision issue

[David]

In my main page, I have a treeview that acts as a menu to the left and a tabstrip to the right which takes the whole screen. When a user clicks on a node on the treeview, it loads a local JSP page on the tabstrip as a tab.

I'm experiencing a weird issue when two tabs are loaded. When the user clicks on the first loaded tab, instead of clearing the already existing content from the second tab, it loads the existing content on top of the new content from the first tab, as you can see from the bottom screenshot.There are no problems when the tabs are opened individually.

http://img203.imageshack.us/img203/7053/asdfwfr.jpg

To avoid any id collisions on div, we made sure that all ids are uniquely named on all pages.

main.jsp
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;
   
   if (dataItem.parentNode() == null || dataItem.parentNode() == "undefined") 
   {
    $("#mainVerticalMenu").data("kendoTreeView").expand(e.node);
   }
   else 
   {
   var data = mainVerticalTabStrip.element.data("mainVerticalTabContent") || [];
   if (!data[selectedNodeText]) {
    mainVerticalTabStrip.append({
text: selectedNodeText + 
"  <img src='image/image/button_cancel.png' " + 
"height='10' width='10' " + 
"id='" + selectedNodeValue + "' " + 
"name='" + selectedNodeText + "' " + 
//"onclick='javascript:mainContentTreeView_delete()' " + 
//"onclick='mainVerticalTabStrip.remove($(this).closest(\"li\"))' " +
"onclick='javascript:mainContentTreeView_delete(" + selectedNodeText + ")' " +

//"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
       });
       Object.size = function(obj) {
       var size = 0, key;
       for (key in obj) {
           if (obj.hasOwnProperty(key)) size++;
       }
       return size;
   };
   data[selectedNodeText] = Object.size(data) + 1;
       mainVerticalTabStrip.element.data("mainVerticalTabContent", data);
   }
   mainVerticalTabStrip.select(data[selectedNodeText] - 1);
   
   // Expand 100%
   var mainVerticalTabStripElement = $("#mainVerticalTabStrip").kendoTabStrip();
   //var mainVerticalTabStripData = mainVerticalTabStripElement.data("kendoTabStrip");

var expandContentDivs = function(divs) {
   divs.height(mainVerticalTabStripElement.innerHeight() - mainVerticalTabStripElement.children(".k-tabstrip-items").outerHeight() - 16);
}
// 16px are substracted to compensate for content div vertical paddings and borders
var resizeAll = function() {
   expandContentDivs(mainVerticalTabStripElement.children(".k-content")); 
}
   
resizeAll();

$(window).resize(function(){
   resizeAll();
});
   }
   e.preventDefault();
}


Snippet of loaded page

<div id="SUBUL_02_TOP_MENU" class="configuration k-widget k-block" style="display: table;overflow-x: scroll;white-space: nowrap;">
<div class="SUBUL_02_MENU_FIRST_ROW">
<div id="SUBUL_02_IO_GB"
style="display: table-cell; vertical-align: middle">
<label style="margin-left: 0px;">주문구분</label>
<kendo:comboBox name="SUBUL_02_CB_IO_GB" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_CRDATE"
style="display: table-cell; vertical-align: middle; margin-left: 10px">
<label>조회일자</label>
<kendo:datePicker name="SUBUL_02_DATEPICKER_FROM" value="<%=new Date()%>"  change="onFromDateChange" culture="ko-KR"></kendo:datePicker>
-
<kendo:datePicker name="SUBUL_02_DATEPICKER_TO" value="<%=new Date()%>"  change="onToDateChange" culture="ko-KR"></kendo:datePicker>
</div>
<div id="SUBUL_02_CRDATE_TYPE"
style="display: table-cell; vertical-align: middle">
<input type="radio" name="SUBUL_02_CRDATE_RADIO_TYPE" value="CRDATE" checked="checked">주문일자<br>
<input type="radio" name="SUBUL_02_CRDATE_RADIO_TYPE" value="CHDATE">출고일자
</div>
<div id="SUBUL_02_DANGA"
style="display: table-cell; vertical-align: middle">
<label>단가구분</label>
<kendo:comboBox  name="SUBUL_02_CB_DANGA_GB" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_DELIVERY"
style="display: table-cell; vertical-align: middle">
<label>배송구분</label>
<kendo:comboBox name="SUBUL_02_CB_DELIVERY_GB" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_PROGRESS"
style="display: table-cell; vertical-align: middle">
<label>진행상태</label>
<kendo:comboBox name="SUBUL_02_CB_PROGRESS" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_ORDER_ORIGIN"
style="display: table-cell; vertical-align: middle">
<label>등록처</label>
<kendo:comboBox name="SUBUL_02_CB_ORDER_ORIGIN" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
</div>
<div class="SUBUL_02_MENU_SECOND_ROW">
<div id="SUBUL_02_BRAND"
style="display: table-cell; vertical-align: middle">
<label style="margin-left: 0px; margin-right: 13px">브랜드</label>
<kendo:comboBox name="SUBUL_02_CB_BRAND" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_LINE"
style="display: table-cell; vertical-align: middle">
<label>라인</label>
<kendo:comboBox name="SUBUL_02_CB_LINE" placeholder="전체" suggest="true"></kendo:comboBox>
</div>
<div id="SUBUL_02_SAP_CODE"
style="display: table-cell; vertical-align: middle">
<label>SAP 코드</label>
<input type="text" id="SUBUL_02_TB_SAP_CODE" class="k-textbox"></input>
</div>
<div id="SUBUL_02_PO_NUM"
style="display: table-cell; vertical-align: middle">
<label>PO NUM</label>
<input type="text" id="SUBUL_02_TB_PO_NO" class="k-textbox"></input>
</div>
<div id="SUBUL_02_DELIVERY_NO"
style="display: table-cell; vertical-align: middle">
<label>DELIVERY NO</label>
<input type="text" id="SUBUL_02_TB_DELIVERY_NO" class="k-textbox"></input>
</div>
<div id="SUBUL_02_TRAN_ID"
style="display: table-cell; vertical-align: middle">
<label>TRAN ID</label>
<input type="text" id="SUBUL_02_TB_TRAN_ID" class="k-textbox"></input>
</div>
<div id="SUBUL_02_SAP_NO"
style="display: table-cell; vertical-align: middle">
<label>SAP NO</label>
<input type="text" id="SUBUL_02_TB_SAP_NO" class="k-textbox"></input>
</div>
</div>
</div>


Is this a bug with tabstrip?

[Alexander Valchev]

Hi David,

I am afraid that the provided information is not sufficient in order to determine what exactly is going wrong. I was not able to reproduce the problem in this demo page. Could you please let me know how your scenario differs from the demo? I do not think that the TreeView widget, which you use for navigation is connected with the problem.

Alternatively could you please provide a small but runnable project which isolates the issue? In this way I would be able to understand better your exact scenario, investigate where the problem comes from and provide you with a concrete recommendations.

Thank you in advance for the cooperation. Looking forward to your reply.

Regards,
Alexander Valchev
the Telerik team