Kendo UI Tabstrip content collision issue

2 posts, 0 answers
  1. David
    David avatar
    1 posts
    Member since:
    Apr 2013

    Posted 31 Mar 2013 Link to this post

    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?

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top