Order of itemchange event firing

4 posts, 0 answers
  1. Scott
    Scott avatar
    5 posts
    Member since:
    Jul 2008

    Posted 15 May 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 17 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Scott
    Scott avatar
    5 posts
    Member since:
    Jul 2008

    Posted 17 May 2013 Link to this post

    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?
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 20 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top