How can I declare a Hierarchical Grid using MVVM?

[Bill]

How can I do this with using the declarative syntax:

http://demos.kendoui.com/web/grid/hierarchy.html

More precisely, I don't know how to bind to the detailInit event.

[Alexander Valchev]

Hi Bill,

All Kendo widgets can be configured via data attributes. Building a hierarchical grid declaratively is supported too, however please have in mind that:

• detailInit event should not be bound through the events binding but via data-attribute:
  
  

  <div id="grid"
      data-role="grid"
      data-sortable="true"
      data-pageable="true"
      data-height="450"
      data-detail-init="viewModel.detailInit"
      data-columns='[....]'
      data-bind="source: dataSource, events: { dataBound: dataBound }"></div>

  
  
  
• detail template will not be bound to the View-Model automatically. In other words please initialize the detailed grid via JavaScript code at the detailInit event. Alternatively you may bind the detail template to the View-Model manually at the detailInit event.
  
  

For convenience I prepared a small example. I hope this will help.

Regards,
Alexander Valchev
the Telerik team

[Bill]

Ah I see!

The missing sauce for me was that I used:

data-detail-init="detailInit"

rather than "viewModel.detailInit".

How do I know when to reference viewModel? It seems the data-bind attribute automatically search for the properties under the viewModel object.

[Alexander Valchev]

Hello Bill,

This is correct, when data-bind is used the framework will search for the corresponding property inside the View-Model object. The other data attributes are used for defining the configuration options of the widget and by default are not considered to be part of the View-Model. As an example:

var viewModel = kendo.observable({
    mySource: new kendo.data.DataSource({ ... })
});

data-bind="source: mySource" //bind dataSource
data-source="viewModel.mySource" //set dataSource

All the best,
Alexander Valchev
the Telerik team