Order of itemchange event firing

[Scott]

I am trying to create a UI where I have a tree view on the left, and an edit form on the right that corresponds to the item selected in the tree view.  I have attached my test page - it is stand alone.  I am binding the edit form from the observableHierarchy change event.  My problem is that when I have made a field edit in the form, and then select another item from the treeview, the itemchange events for the *selection* event are fired BEFORE the itemchange for the field data change.  This causes me to re-bind the form BEFORE the field edit has been fired -- thereby losing the edit.  If I click away from the form, all is well.  Binding to the treeview select event does not help, as it fires before any of the observableHierarchy change events. 
 
Can you suggest a better alternative to creating the desired UI?   Is there some way to force the viewmodel update from within the select event?

Thanks,
Scott

[Alexander Valchev]

Hello Scott,

Instead of using the change event of the Hierarchical observable, I recommend you to use the select event of the TreeView.

onSelect: function (e) {
    var treeview = e.sender,
        model = treeview.dataItem(e.node);

    kendo.bind("#categoryForm", model);
},

<div class="showBorder" name="treeview" data-role="treeview"
     data-drag-and-drop="true"
     data-text-field="Name"
     data-bind="source: CategoryNodes, events: { select: onSelect }">
</div>

For your convenience I updated the sample page. I hope this approach will fit in your scenario.

Kind regards,
Alexander Valchev
the Telerik team

[Scott]

I originally was using the treeview select event, but I have the same problem that the itemchange event for the node selection is firing BEFORE the itemchange for the field data change.  This is causing me to rebind the details form BEFORE any potential form entries have been processed - and the changes therefor do not make it to the view model.  I doubt I can get the order of events to change, but I thought there might be a way to force the form changes to be written to the viewmodel.  If not, can you suggest another way to implement this UI?

[Alexander Valchev]

Hi Scott,

I suggest you to make a "selectedNode" field in the ViewModel and bind the "categoryForm" inputs to it.
At the select event of the TreeView, you may update the selectedNode.

For example:

var viewModel = kendo.observable({
    Name: "My Category Group",
    Description: "A new category group",
    CategoryNodes: obsHier,
    selectedNode: { Name: "", Description: "" },
    onSelect: function (e) {
        var treeview = e.sender,
            model = treeview.dataItem(e.node);

        this.set("selectedNode", model);
    }
});

kendo.bind($("#wrapper"), viewModel);

For your convenience I updated the sample. Please check it and let me know if this solution fits in your scenario.

Kind regards,
Alexander Valchev
the Telerik team