Why widgets' events triggered before view completely rendered?

Question

Let say we have a view like this:

<script id="my-view" type="text/x-kendo-template">
    <div>
            <input data-text-field="name"
                   data-value-field="id"
                   data-role="dropdownlist"
                   data-bind="source:wellDataSource,events:{change:onWellChange,dataBound:onWellDataBound}" />
            <div data-role="tabstrip" data-bind="visible:isAnyWellExist">
            <ul class="bd-doc-navigation-tabstrip" data-freezable="false">
                <li class="k-state-active">Home</li>
                <li>Products</li>
                <li>About</li>
                <li>...</li>
            </ul>
    </div>
</script>

JS:

var _view = new kendo.View("my-view", { model: _viewModel});
_view.render("#container");

When I render the view I expect all the three widgets rendered and then events of them triggered but when the dropdownlist rendering finished it's databinding and databound events fires before the tabstrip and grid rendered. So I can't access the tabstrip and grid widgets in those events.

Why this happens? And is there any solution or workaround to be sure events happens after the view rendered totaly?

Answer 1

Kendo DropDownList has a DataSource, FYI the event DataBinding and DataBound automatically triggered when data has been collected from server.

Therefore to prevent it to do so you have to prevent the data initialization of DropDownList. You can change DropDownList AutoBind property to false, so it won't make a request to server when its in initialization phase. After page rendered completely you can trigger its DataSource to call read method.

Your code should be like this

<input data-text-field="name"
       data-value-field="id"
       data-role="dropdownlist"
       data-bind="source:wellDataSource,events: change:onWellChange,dataBound:onWellDataBound}"
       data-auto-bind="false" />

$(document).ready(function() {
     $("#dropdown").data().kendoDropDownList.dataSource.read();
});

Kendo DropDownList AutoBind Documentation