Load JQuery after Kendo UI Scheduler done loading?

Question

Hej nerds :)

I have a page with to elements - a Dropdownlist and a kendoUI Scheduler. something like:

<div class="SchedulerHeader">
    <p> <label>Current View: </label>
      <select id"views">
        <option value="agenda">Agenda</option>
        <option value="day">Day</option>
        <option value="month">Month</option>
        <option value="week">Week</option>
        <option value="workWeek">Work Week</option>
     </select>
   </p>
</div>
 @(Html.Kendo().Scheduler<myNameSpace.viewModel>().Name("myScheduler") #more options#

<script>
$(function() {

    var scheduler = $("#myScheduler").data("kendoScheduler");
    $("#views").kendoDropDownList({
        value: scheduler.view(),
        change: function () {
            scheduler.view(this.value());
        }
    });
});
</script>

My problem is that the js is load before the scheduler is done loading - which mean that my dropdownlist init value dosnt match the scheduler's view value. I can change the schedulers view by changing the value in the dropdownlist so the binding is ok. When I debug at pageload I see that the "value: scheduler.view()" is 'null'.

So my question is: how can I make sure that the js is loaded after the scheduler, without use of timers and without writing the scheduler in js ?

Merry Christimas :)

Answer 1

Thx for the answer.

My solution to my problem - was to Subscribe to the databound event of kendo UI scheduler. which look like this and set the value of the dropDownList to 'scheduler.view().name

<div class="SchedulerHeader">
<p> <label>Current View: </label>
  <select id"views">
    <option value="agenda">Agenda</option>
    <option value="day">Day</option>
    <option value="month">Month</option>
    <option value="week">Week</option>
    <option value="workWeek">Work Week</option>
 </select>
</p>
</div>
@(Html.Kendo().Scheduler<myNameSpace.viewModel>().Name("myScheduler") #more options#
 .Events(events => events.Databound("onLoad"))

<script>
 function onLoad(e){

var scheduler = $("#myScheduler").data("kendoScheduler");
$("#views").kendoDropDownList({
    value: scheduler.view()**.name**,
    change: function () {
        scheduler.view(this.value());
    }
});
})
</script>

Thanks for the answers - Merry Christmas

Answer 2

use callback:

Ref: http://www.w3schools.com/jquery/jquery_callback.asp

var scheduler = $("#myScheduler").data("kendoScheduler", function() {
    $("#views").kendoDropDownList({
        value: scheduler.view(),
        change: function () {
            scheduler.view(this.value());
        }
    });
});

Answer 3

I think RequireJS could be useful for you (http://requirejs.org/).

It allows you to define your JS files/plugins in a specific order and much more. I let you have a look at it, hope it helps.