1. Home
  2. Forum
  3. Vue
  4. Refresh treeView after data source changed

Refresh treeView after data source changed

Hi syncfusion!

I am implementing undo redo feature on tree view that support actions: move node, remove node, add node.... I have created UndoRedoManager that supports these actions.

function assign(target, source) {
    target = target || {};

    if (Array.isArray(target)) {
        target.length = 0
    }

    for (var prop in source) {
        if (typeof source[prop] === 'object') {
            //do a deep copy of the object recursively
            target[prop] = assign(target[prop], source[prop]);
        } else {
            target[prop] = source[prop];
        }
    }

    return target;
}

function UndoRedoManager(workObject) {
    const states = [];
    let currentState = 0;

    states.push(JSON.stringify(workObject));

    function save() {
        // saving a new state invalidates the redo state
        if (currentState < states.length - 1) {
            states.splice(currentState + 1)
        }

        states.push(JSON.stringify(workObject));
        currentState++;
    }

    function undo() {
        if (!canUndo()) {
            return;
        }

        currentState--;
        let state = JSON.parse(states[currentState])
        assign(workObject, state)
    }

    function redo() {
        if (!canRedo()) {
            return;
        }

        currentState++
        let state = JSON.parse(states[currentState])
        assign(workObject, state)
    }

    function clear() {
        states.length = 0;
        states.push(JSON.stringify(workObject));
        currentState = 0;
    }

    function canUndo() {
        return currentState > 0;
    }

    function canRedo() {
        return currentState < states.length - 1;
    }

    return {
        save: save,
        undo: undo,
        redo: redo,
        clear: clear,
        canUndo: canUndo,
        canRedo: canRedo
    };
}

Tree view have data source reference to nodes property. And i created an instance of UndoRedoManager as following:

const m = UndoRedoManager(nodes)

I pass data source of tree view to UndoRedoManager instance

After call m.undo() to undo tree view nodes, how can i refresh tree view when data source is changed?

5 Replies
MK Muthukrishnan Kandasamy Syncfusion Team December 8, 2020 01:26 PM UTC

 
Hi Kha Chan, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your requirement in Syncfusion Vue TreeView component. We can update the TreeView data source dynamically. We don’t need to call the refresh method once we update the tree data source by updating with entire fields property. Please refer to the below code block. 
 
  methods: { 
    changeData: function () { 
      debugger; 
      this.fields = { 
        dataSource: newData, 
        id: "id", 
        parentID: "pid", 
        text: "name", 
        hasChildren: "hasChild", 
      }; 
    }, 
  }, 
 
 
We have prepared sample for your convenience, please refer to the below link for the sample. 
 
 
Please refer to the below links to know more about Vue TreeView component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 
 


KC Kha Chan Thanh December 9, 2020 05:20 PM UTC

Your example changed data source reference. In my case, data source reference does not change, only change nodes in data source

this.nodeFields = { id: 'id', parentID: 'parentId', text: 'name', hasChildren: 'hasChildren', htmlAttributes: 'htmlAttributes', dataSource: this.flatSchemaNodes }

After undo or redo nodes, only nodes count and its property changed, data source reference does not change.

I cannot change data source reference because UndoRedoManger is working on it and all changed states of data source is managed by UndoRedoManger

  this.$undoRedoManager = new UndoRedoManager(this.flatSchemaNodes, false)





SP Sowmiya Padmanaban Syncfusion Team December 10, 2020 09:42 AM UTC

Hi Kha Chan Thanh,  
 
In your shared code block, you have updated the TreeView data in the variable declared in the datasource property using UndoRedoManager. But TreeView has no two-way binding support for Datasource property. 
 
So, your changed data source value will not reflect in TreeView component. To resolve your issue, you need to again assign the datasource variable in filed settings of TreeView component. 
 
Please, refer the below code snippet. 
 
  this.fields = { 
        dataSource: localData, 
        id: "id", 
        parentID: "pid", 
        text: "name", 
        hasChildren: "hasChild", 
      }; 
 
Please refer the sample link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


KC Kha Chan Thanh December 11, 2020 06:20 AM UTC

Thanks Muthukrishnan Kandasamy and Sowmiya Padmanaban very much

SP Sowmiya Padmanaban Syncfusion Team December 11, 2020 08:29 AM UTC

Hi Kha Chan Thanh,  
  
We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.P 


Loader.
Up arrow icon