Template data- attributes not setting up when using change: handler of datasource

[Michael]

This has had me searching high and low for a solution, and killed several hours, looking in all the wrong places.

Following one of the examples, I had a dataSource setup similar to this:

d =  new kendo.data.DataSource(
            { 
                transport: {
                    read: {
                        dataType: "json",
                        url: "json/favorites.json"
                    }
                },
                schema: {
                    type: "json",
                    data: "[0].menu",
                    model: {
                        fields: {
                            name: {},
                            note: {},
                            price: {}
                        }
                    }
                },
                change: {function(e){
                       var template = kendo.template($('#favorites-template').html());
                             $('#favorites-list').html(kendo.render(template, dataSource.view()));
                       }
                }
           });

d.read()


Hopefully I'm missing something, however, the template renders successfully, but unobtrusive javascript features (e.g.  data attribures like data-tap etc. that call a handler) fail to work as expected.

If I do it another way... (here, within an init block for the list I want to populate.)

e.view.element.find("#favorites-list").kendoMobileListView({
        template : $('#favorites-template').html(),
        dataSource: new kendo.data.DataSource(
            { 
                transport: {
                    read: {
                        dataType: "json",
                        url: "json/favorites.json"
                    }
                },
                schema: {
                    type: "json",
                    data: "[0].menu",
                    model: {
                        fields: {
                            name: {},
                            note: {},
                            price: {}
                        }
                    }}})
             });

​


The UJS / data- attributes, data-tap etc. call their handlers correctly.

Now that I've fixed the problem, my only concern is for other people getting caught in the same problem. I didn't probe deep enough to figure out why this failed in a change handler, but I assume that no extra "tidying up" (i.e. binding to the newly rendered handler attributes) is done and a datasource change handler, is a bit loose. Whereas using template.datasource apparently takes good care of you.

For now I'm not sure about further ramifications, but it's still early days for me with Kendoui (about 5 days exposure so far.)

All the best,
Jason
(@fishvision) 

By the way, the main reason why I'm posting this is because in the API docs, this example:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: "orders.json"
    }
    change: function(e) {
       // create a template instance
       var template = kendo.template($("#template").html());
       // render a view by passing the data to a template
       kendo.render(template, dataSource.view());
    }
});

I think the example here should explain that dataSource.view(); would be provided by a data- attribute on the view, I assume that way data- attributes in the templates would work as expect (right? - untested.)

[Petur Subev]

Hello Michael,

Could you please clarify your question?  Or what exactly you are trying to achieve - so we can give some advice if possible.

Kind Regards,
Petur Subev
the Telerik team

[Michael]

Hi Petur, 

If you read through, you'll see I fixed the problem, I wanted to highlight a gap in your docs that led to doing things "the wrong way" 

Regards,

Jason
Fishvision.