source binding not working inside eventTemplate

[Shane]

How do I debug a source binding that isn't working?

I know i have an ObservableArray that I know exists and has data because if I for loop over it then data shows up

 

//works
<script id="tripEventTemplate" type="text/x-kendo-template">

 # for(var i=0; i < Waypoints.length; i++){ #
            <div style="color:#:Waypoints[i].FontColor #;margin-bottom:10px;background-color:#:Waypoints[i].BackgroundColor #">
                <div>
                    <div>#= Waypoints[i].description #</div>
                </div>
            </div>
            # } #

 

//But if I try to use a template for the array then it doesn't work

<script id="tripEventTemplate" type="text/x-kendo-template">
            <div data-template="tripWaypointCalendarTemplate"
                 data-bind="source: Waypoints">
            </div>

 

 

<script id="tripWaypointCalendarTemplate" type="text/x-kendo-template">
        <div style="color:#:FontColor #;margin-bottom:10px;background-color:#:BackgroundColor #">
            <div>
                <div>#:description #</div>
            </div>
        </div>
    </script>

[Tyler]

Here is how I do this with my scheduler. 

I have a custom editor template,

<script id="editor_template" type="text/x-kendo-template">

    <!--All my elements with data-binds and junk-->

</script>

 

In my edit event of the scheduler, I then do:

//Destroy any existing external editor that is open so a new one can be opened.
var externalEditor = $('#externalEditor');
kendo.destroy(externalEditor);
//Clear out the HTML of the external editor that was just destroyed
externalEditor.html('');

var editorTemplate = kendo.template($('#editor_template').html());

externalEditor.html(editorTemplate({}));
kendo.bind(externalEditor, currentEvent);

 

Whether or not you need to destroy it, I don't know. I need to destroy and recreate and rebind every time the editor is opened.

[Shane]

Hey Tyler thank you for the reply

I actually have the editor template binding and it does work for binding to the same list of objects I can't get the calendar view to bind to. Where I'm having an issue is the template for the scheduler calendar itself. So I have a custom template specified for "eventTemplate" and inside that template I'm trying to bind to a list that's part of my data object and it just doesn't want to bind.  I wish there was some sort of error or something that I could tap into that said like "source binding not working cause of reasons"

 

Your code is very helpful though for some other things I was trying to figure out :-)

[Tyler]

What does your observable code and binding code look like?

[Plamen]

Hi,

Would you please try to isolate the code in a sample dojo so we could inspect it and be more helpful?

Regards,
Plamen
Progress Telerik

[Shane]

Hey Tyler,

The binding is just in my original post my observable code is pretty unexciting.... I just supply a read function to the data source

read: (e) => {
$.ajax({
url: this.getReadUrl() ,
dataType: readDataSource.dataType,
method: readDataSource.type
}).done((data) => {
e.success(data);

 

My data is a JSON object with an array

 

 

[Shane]

Will do!!

I guess the core of my question though is how I can I debug bindings that aren't behaving how I want them to myself? I'm coming from Knockout land where I'm used to getting an error when a binding isn't correct but here in Kendo I have no idea what to do if a binding isn't working other than just try random things until something works.

 

If I have a binding that I should think is working
<div data-template="tripWaypointCalendarTemplate"
                 data-bind="source: Waypoints">
            </div>

And nothing happens is there some where in the core I can break point? or some logging I can turn on? or other? In general it'd just be nice to know a good fast way to get to the root of these things myself.

In the mean time I'll work on getting a dojo sample together

[Plamen]

Hello,

In such scenario I would recommend you refer to this help topic where a similar cases are explained with Kendo MVVM. 

As for the question about debugging - the non minified source files for Kendo UI are available with the commercial license distribution of the product. Another way to achieve it is to refer directly to the opensource repository . For the MVVM binding you will have to look in the kendo.binder.js file.

Hope this information will be helpful.

Regards,
Plamen
Progress Telerik

[Tyler]

Based on your original post, something like this will work if Waypoints is a global variable, which I am assuming it is:

<script id="tripEventTemplate" type="text/x-kendo-template">
 # for(var i=0; i < Waypoints.length; i++){ #
            <div style="color:#:Waypoints[i].FontColor #;margin-bottom:10px;background-color:#:Waypoints[i].BackgroundColor #">
                <div>
                    <div>#= Waypoints[i].description #</div>
                </div>
            </div>
            # } #

 

So, just doing:

<script id="tripEventTemplate" type="text/x-kendo-template">
            <div data-template="tripWaypointCalendarTemplate"
                 data-bind="source: Waypoints">
            </div>

 

Is not going to bind it. I think you also have issues where the <div> you are trying to bind it has no data-type, so there is nothing specifying which widget it will be (if it is to be a widget).

In your code, you would need to set up an observable like this:

var newObserv = kendo.observable({
    Waypoints: arrayOfWaypoints

});

//Get html of your template

var templateHtml = kendo.template($('#tripEventTemplate').html());

$('#some-content-holder-div').html(templateHtml({}));

kendo.bind($('#some-content-holder-div'), newObserv);

 

The thing in your template you are wanting to have a source of 'Waypoints' will be populated with Waypoints.