Kendo edit template array

Question

I have following kendo example with a custom edit template:

In the example there is a custom edit template, so when you double click on the calendar to make a new event this will show with the custom fields.

There is a custom field for "Contacts" which has an array as data source.

This data source is an array I get from the server (takes 1-2 seconds to get). The fact that the edit template is prepared with tags makes it not possible to simply create in my success (or done) handler of the ajax call that gets the data.

The only way I see is to have the data ready at page load so that the template picks it up.

I want however to either create the template whenever my data load is done or add my data to it after it is loaded.

To simulate the time the server takes for the data to load I use setTimeout of 1 sec, that way the edit template does not pick up the data.

To recreate:

1. double click on the calendar to create an event
2. notice that the contact field is empty (because data is not ready at page load)

Any help appreciated

Answer 1

This has nothing to do with the async delay. Your kontaktdata array is local to the anonymous function you pass to setTimeout , so it simply doesn't exist in the context the template is evaluated in.

Your data has to either be defined on the data model itself or in the global context.

The other problem is that the data structure itself has to exist - either a kendo.data.DataSource or an array, and you need to update it with new data if you want an existing view to be aware of that new data. If you simply replace it, the edit template has no way of picking that up immediately (if you open a new edit dialog, it will also work, of course).

So if you do this, for example, it will work:

var kontaktdata = [];
setTimeout(function(){    
     kontaktdata.push.apply(kontaktdata, [
         { text: "Demo B Client", value: 1 },
         { text: "Martin", value: 2 },
         { text: "Herbert", value: 3 }]);
}, 4000);