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

How can I declare a Hierarchical Grid using MVVM?

3 Answers 390 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Bill asked on 17 Jan 2013, 07:53 PM
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.

3 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 18 Jan 2013, 05:53 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bill
Top achievements
Rank 1
answered on 18 Jan 2013, 07:27 PM
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.
0
Alexander Valchev
Telerik team
answered on 22 Jan 2013, 08:53 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Bill
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Bill
Top achievements
Rank 1
Share this question
or