Using hierarchical datasource with MVVM

[P]

Hello,

I am trying to get working hierarchical datasource with MVVM. My data could be described like this: there are documents, documents have sections, sections have questions. By clicking on document I want to fetch sections data of that document, and by clicking on section, I want to fetch questions data of that section. After data is fetched, I want my views to be updated automatically thanks to MVVM.

This is how I descripe hierarchical datasources in code:

var questionsDataSource = {
transport: {
read: {
url: "questions",
dataType: "json"
}
},
schema: {
data: "questions",
model: {
id: 'ID',
hasChildren: false
}
},
change: function(e){
var rootModel = this.parent().parent().parent();
this.parent().parent().parent().set("questions", this.view()); // if I manually set data here, the ordering works
},
sort: {
field: 'order',
dir: 'asc'
}
};

var sectionsDataSource = {
transport: {
read: {
url: "sections",
dataType: "json"
}
},
schema: {
data: "sections",
model: {
id: 'ID',
children: questionsDataSource,
hasChildren: 'hasChildren',
}
},
change: function(e){
var rootModel = this.parent().parent().parent();
this.parent().parent().parent().set("sections", this.data()); // here I assign active sections that would be shown in view
},
};

var documentsDataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "documents",
dataType: "json"
}
},
schema: {
data: "documents",
model: {
id: "ID",
hasChildren: true,
children: sectionsDataSource
}
},
change: function(e){
this.parent().set("documents", this.view());
},
sort: {
field: 'ID',
dir: 'asc'
},
});


var viewModel = kendo.observable({

dataSource: documentsDataSource,

documents: [],

sections: [],

questions: [],

// other data and methods

});


kendo.bind($("#view-model"), viewModel);

documentsDataSource.fetch(function () {
// load first document
// var node = documentsDataSource.at(0); // sorting does not work
var node = documentsDataSource.view()[0]; // sorting works

// load sections
node.load();
});

I have much more code but for the beginning tmabe that'll be enough.

First question - is such nesting of datasources the right way?

Second question: how in view to show the sections that was lastly loaded, that means, active sections? What I do now is on sections dataSource change event asign this.view() data to additional "sections" property in kendo.observable({}) model and bind my view to this property. But thats feel like additional job, as using MVVM changes in datasource should directly reflect in view. Is there a better way?

Third question: when questions data is fetched, it is not sorted by "order" property. Only if I manually set "questions" to be equal to this.view() on change event in questionDataSource, it gets ordered. So MVVM gets no meaning if I need to manually update my data on change event. What am I doing wrong?

[Daniel]

Hello,

Straight to your questions:

1. The nesting is correct for a HierarchicalDataSource. However, since it seems that the data is not displayed in a hierarchy in your scenario, you could also use three separate dataSource added ti the root level of the viewModel.
2. Currently the source binding does not support binding to a dataSource since it is not an array. We plan to include this functionality for the next official release. For now, you should either use your current approach and set the dataSource data to the array to which the element is bound to or use a widget like the listview or the treeview if you wish to show the data in a hierarchy.
3. The sorted, paged, etc. data is kept in the view and thus it should be used to get the sorted data. The at method returns the item at the specified index from the initial data.

Regards,
Daniel
Telerik

[P]

Thank you for the answer.