Grid Column Templates and Widgets not bound

[Falafel Support]

I have a grid that has a few column templates defined.  Some are using data-bind="click: clickHandler" and some have custom and kendo widgets within them.  When I use a DataSource making a remote data call, it seems like the kendo.bind() is not being applied to the rows in the column.

JS Fiddle example here which has an "Action" column with a simple data-bind click handler that will not fire:
http://jsfiddle.net/jeastburn/VgtDM/

I found I can call kendo.bind() on the dataBound Grid event, but this feels like a hack and I lose the ability to have data-bind events pass the row data rather than my top-level Observable object I use in the bind() call..

[Petur Subev]

Hello,

Indeed you need to use the dataBound event of the Grid, otherway the elements are still not created and when kendo.bind traverses the DOM it wont bind any of these rows.

Kind Regards,
Petur Subev
Telerik

[Falafel Support]

Is there any way to call kendo.bind() in the dataBound event so that each row is bound to the data source row?  The only was I was able to get this to work is to call kendo.bind($('#grid'), viewModel) which binds each row to the top-level viewModel object.
I need to be able to bind each row to the individual data item that the other columns are bound to.

In my updated JSFiddle, I am calling kendo.bind() in the dataBound event and the "clicked" alert now displays, but the "e" object in the templateClicked function is the viewModel, not the row:
http://jsfiddle.net/jeastburn/VgtDM/38/

Thanks.

[Petur Subev]

Hello,

You cannot bind one piece of Html simultaneously to two or more ViewModels. You can bind the row (tr element) to the corresponding dataItem that the Grid uses, however binding to the top viewModel will be lost.

Here is a small demonstration

http://jsfiddle.net/VgtDM/39/

It shows a text-binding, the dataBound event is again used.

Kind Regards,
Petur Subev
Telerik

[Joshua]

I am not sure if there is a better way to do this, but the problem i am finding is that it calls databound again for each row so the loop causes it to be exponential.

 

Is there a work around for that?

 

I adjusted the sample to show the binding: http://jsfiddle.net/2wx5su6g/

[Ivan Danchev]

Joshua,

Calling the kendo.bind() method for the Grid's rows is the proper way of passing the data to the template. And while kendo.bind() is called for every row, the Grid's "dataBound" event handler fires only once: https://dojo.telerik.com/UPuhAWOW So in the example in question: 3 calls to kendo.bind() (since there are 3 rows), which do not affect the "dataBound" event - it fires once.

Regards,
Ivan Danchev
Progress Telerik