Kendo layouts not rendering widgets without setTimeout

Question

I upgraded the kendo library to the 2014Q1 framework which had a few nice features that they were adding, however when I did that it broke any widget (grid, tabStrip, select lists, etc.) from rendering at all. I tracked it down to the layout/view not being able to activate the widget without being wrapped in a setTimeout set to 0. Am I missing something key here or did I build this thing in an invalid way?

http://jsfiddle.net/upmFf/

The basic idea of the problem I am having is below (remove the comments and it works):

var router = new kendo.Router();
var mainLayout = new kendo.Layout($('#mainLayout').html());
var view = new kendo.View('sample', {
     wrap: false,
     model: kendo.observable({}),
     init: function() {
          // setTimeout(function(){
              $("#datepicker").kendoDatePicker();
          // }, 0);
     }
 });

 mainLayout.render('#container');

 router.route('/', function() {
     mainLayout.showIn('#app', view);
 });

 router.start();

Answer 1

Admittedly, I don't fully understand it, but hope this helps.

Basically when you try to init the #datepicker, the view elements have not been inserted into the DOM yet. You can put a breakpoint inside the init function, when it hits, check the DOM and you will see that the #app is an empty div, and #datepicker does not exist yet (at least not on the DOM).

kendo.Layout.showIn seems to need to exit in order for the view to finish rendering, but when it initializes the view's elements, it thinks the render is done and init is triggered incorrectly ahead of time. The setTimeout works because it runs the kendoDatePicker initialization asynch, the view is able to finish rendering before the timeout function.

Workarounds...

Trigger the view rendering from the view object itself:

var view = new kendo.View('sample', {
    init: function() {
        $("#datepicker").kendoDatePicker();
    }
});
router.route('/', function() {
    view.render('#app');
});

Select and find the datepicker from the view object itself:

var view = new kendo.View('sample', {
    init: function() {
        view.element.find("#datepicker").kendoDatePicker();        
    }
});
router.route('/', function() {
    mainLayout.showIn('#app', view);
});

Near the bottom of this thread is where I got the idea for the 2nd option. Maybe someone else can come around and give a better explanation of whats going on.