Callback for MVVM binding in Kendo?

Question

I get a flash of unstyled content when I initially load the page, it seems until Kendo.bind(element, viewModel) takes time to process the HTML to scan, parse, manipulate, etc.

It would be nice if the kendo object had page lifecycle events so I can subscribe to it for example, but it doesn't seem like there's something for that. Is there a way I can hide the container element or load a progress bar, then fade in when Kendo is done changing the page? Any help or advise would be greatly appreciated.

Answer 1

I assume that the 'scan, parse, manipulate' slow down that you mentioned is in fact until your page loads the scripts and actually reaches the code that performs the actual binding.

kendo.bind(container, viewModel)

So you can initially display some kind of loading animation icon and just before kendo.bind you should hide it.

Answer 2

You could also do this:

<div id="myViewModelId" data-bind="visible: getIsSectionVisible" style="display: none">

</div>

On your viewModel, getIsSectionVisible would return false till you are ready and then true when you want the section visible.