Grid Column Templates and Widgets not bound

6 posts, 1 answers
  1. Falafel Support
    Falafel Support avatar
    24 posts
    Member since:
    Sep 2009

    Posted 27 Nov 2013 Link to this post

    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..
  2.
  3. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 29 Nov 2013 Link to this post

    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!
  5. Falafel Support
    Falafel Support avatar
    24 posts
    Member since:
    Sep 2009

    Posted 29 Nov 2013 Link to this post

    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.
  7. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 03 Dec 2013 Link to this post

    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!
  9. Joshua
    Joshua avatar
    85 posts
    Member since:
    May 2012

    Posted 08 Dec 2020 in reply to Petur Subev Link to this post

    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/

  11. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2187 posts

    Posted 10 Dec 2020 Link to this post

    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/.

Back to Top