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?

Hi, I have a kendo dropdownlist in a div on my page and I am trying to create a hover effect where when the user hovers over that general area the list will fade in/out. The problem I have is that when a user clicks on the dropdown and then hovers over the list of items, the main dropdown box fades out. I understand this happens because the list is not within my defined 'hovering' area so the fade out gets triggered.

My question is how can I set it up so that even when a user hovers over the list portion the dropdown should still be showing.

<div class="video">
    <div class="headers" style="position:absolute;display:none;">
        <input id="tracks" data-bind="kendoDropDownList: tracks" />
    </div>
    <iframe id="VideoFrame" frameborder="0" width="100%" height="100%"></iframe>
</div>

$('.video', element).hover(function() {
       $(this).find('.headers').fadeToggle('fast');
});

Hello,

We have a (boolean) CheckBox column in Kendo UI Grid .  (Razor ASP.NET MVC4)
My question is, is it possible to apply filtering and/or sorting to a ClientTemplate 'column', 
Is there a sample available ?

Thanks
Thomas

Do you have an example load text or document from ajax?

I am working on a phonegap app in Icenium, but this question is really about Kendo UI Mobile.

My app has something like this:
"displayText" is bound to a div so that when it changes, the text in the div also changes.

Calling "revealText()" by itself works as expected (i.e. the div updates with displayText and then the sound is played).  However, if there are calls made immediately after revealText() (e.g. we make a call to addRowsToAListView()), then there is some lag on the refresh (i.e. the sound will play and *then* the div will update with displayText a second later).

I need the sound to play immediately *after* the displayText has actually updated.  I tried binding to the "change" event of the ObservableObject (http://docs.kendoui.com/api/framework/observableobject) and playing the sound in the handler, but it made no difference.  Is there a way to bind the the "refresh" of the ObservableObject to ensure that the sound is played after the text of the div has updated with displayText?  Or is there some other way to deal with this lag?

Thanks in advance.

I'm working with the layout example and seem to be missing something very basic.  If I run:

$(document).ready(function (){    
    var fooView = new kendo.View("<span>foo</span>");
    var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer>Footer</footer>");
    layout.render($("#app"));
    layout.showIn("#content", fooView);
});

I get  as expected:
Header
foo
Footer

What I can't figure out is the how to replace:
var fooView = new kendo.View("<span>foo</span>");

with an external file (i.e. foo.html that contains <span>foo</span>)

What is the syntax to load content from an external html file into the content section of a layout?

Thanks for your help.

Hi

I need to set up initial page number for kendo grid on my MVC Razor form. In previous telerik.mvc grid component I could do somethink like that:

But in Kendo, Pageablebuilder doesn't contains any more PageSize and PageTo functions.

"PageSize" I can set with DataSource binding, but what with "PageTo". Where can I set it in Kendo?

I tried to search but the search seems to search the entire forum and I couldn't limit it to just "mobile", so I'm trying my luck with a thread instead.

I'm currently using the trial version, since I'm new into PhoneGap. Not sure yet if I will go ahead with KendoUI Mobile or if I'll give jQuery Mobile a shot too. 

My problem right now is that I have a "div page" on which I want an onload event to fire, when that page is being pulled up.

Here's the div:

<div data-role="view" id="tabstrip-log" data-title="Activitylog" data-layout="mobile-tabstrip">
... some stuff here.
</div>

When I click the button in the tabstrip for #tabstrip-log, then the div above appears, and then I want to also call a function that downloads JSON data and puts it into the div in li's etc. I have that part down, with a manual button. I just want it so that the function is called automatically whenever #tabstrip-log loads.

I don't want the data loaded when the app is started, because then I can just attach it to <body onload="json()">, rather I only want that data pulled when that particular div is shown.

Any hints?

Thanks in advance.

currently my legend shows off the end of the graph, i need to save space and have it on top right corner

is this possible?

Is there a way to filter a grid column with several different values (ie more than two).
I had thought to possibly use the Filter Menu Customization (http://demos.kendoui.com/web/grid/filter-menu-customization.html) and use a MultiSelect with the datasource set to all of the values for that column.  It works, but for only one selected value (http://jsbin.com/egobul/10/edit  - the value column).
Is this possible, or am I better off moving the filter outside the grid  (http://jsbin.com/ameyam/2/edit)

Thanks.

Robin