Kendo UI Tabstrip MVC - .data(“kendoTabStrip”) is undefined initially
Question
Code:
var orderDetailsTabStrip = $('#OrderDetailsTabs').data("kendoTabStrip");
orderDetailsTabStrip.select(tabIndexToSelect);
Having an issue when attempting to reference the kendo ui tabstrip during doc ready or if I just put the call in a script block at the bottom of the page. I get an Error:
Cannot call method 'select' of undefined
If I wrap the call to the function with this code in a setTimeout for any time >= 500ms, it works. So it seems the issue is that some Kendo functions need to finish first during page load before I can reference the tabstrip?
This works:
setTimeout(function () { selectOrderDetailTab() }, 500);
I don't like this as not sure really what this needs to wait on and if 500ms is always going to work. Obviously I can push that delay up higher to insure it always works, but at the expense of slow performance to the user. Is there some sort of Kendo event that indicates when it is done doing its thing that I can use as a trigger to then call my function?
1 answers
solution1
1 2013-10-31 18:55:07
if you are using the the mvc helpers you need to make sure that your code above, getting the widget instance, occurs AFTER the inserted script tag from the helper.
the helper inserts a script tag into the page that runs code on document ready. Since each document ready handler fires in the order it was bound you need to make sure that your code is:
- inside of it's own
$(document).ready()function - your
$(document).ready()function is bound after the kendo generated one
practically this usually means that you need to run your code after the body tag, unless you are using the .Deferred() helper option, in which case it needs to occure after the WriteScripts commmand
<body>
//kendo inserts your widget
<div id="#OrderDetailsTabs"></div>
<script>
//this is the equivillent to $(document).ready()
jQuery(function() {
$('#OrderDetailsTabs').kendoTabStrip({ options: "goHere" });
} );
</script>
</body>
<script>
$(document).ready(function(){
var orderDetailsTabStrip = $('#OrderDetailsTabs').data("kendoTabStrip");
orderDetailsTabStrip.select(tabIndexToSelect);
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.