This is a migrated thread and some comments may be shown as answers.

Grid Column Templates and Widgets not bound

5 Answers 246 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Falafel Support
Top achievements
Rank 1
Falafel Support asked on 27 Nov 2013, 03:05 PM
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..

5 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 29 Nov 2013, 09:05 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Falafel Support
Top achievements
Rank 1
answered on 29 Nov 2013, 02:23 PM
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.
0
Accepted
Petur Subev
Telerik team
answered on 03 Dec 2013, 02:53 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joshua
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 09 Dec 2020, 12:44 AM

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/

0
Ivan Danchev
Telerik team
answered on 10 Dec 2020, 10:55 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Falafel Support
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Falafel Support
Top achievements
Rank 1
Joshua
Top achievements
Rank 2
Iron
Veteran
Iron
Ivan Danchev
Telerik team
Share this question
or