source binding not working inside eventTemplate

9 posts, 0 answers
  1. Shane
    Shane avatar
    12 posts
    Member since:
    Dec 2017

    Posted 19 Feb Link to this post

    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>

  2. Tyler
    Tyler avatar
    68 posts
    Member since:
    Feb 2017

    Posted 20 Feb Link to this post

    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.

  3. Shane
    Shane avatar
    12 posts
    Member since:
    Dec 2017

    Posted 20 Feb in reply to Tyler Link to this post

    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 :-)

  4. Tyler
    Tyler avatar
    68 posts
    Member since:
    Feb 2017

    Posted 20 Feb in reply to Shane Link to this post

    What does your observable code and binding code look like?
  5. Plamen
    Admin
    Plamen avatar
    2906 posts

    Posted 21 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Shane
    Shane avatar
    12 posts
    Member since:
    Dec 2017

    Posted 21 Feb in reply to Tyler Link to this post

    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

     

     

  7. Shane
    Shane avatar
    12 posts
    Member since:
    Dec 2017

    Posted 21 Feb in reply to Plamen Link to this post

    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

  8. Plamen
    Admin
    Plamen avatar
    2906 posts

    Posted 22 Feb Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Tyler
    Tyler avatar
    68 posts
    Member since:
    Feb 2017

    Posted 23 Feb in reply to Shane Link to this post

    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. 

Back to Top