Treeview edit textBox is not created when fields are updated from vuex

[Jzy]

Hi I am using Treeview component and vuex to create one tree structure.

computed part is:

    computed: {

      ...mapState({

        tree_detail: state => state.suiteTree.tree_detail

      }),

      fields () {

        return {dataSource: this.tree_detail,  id: 'id', parentID: 'pid', text: 'title', hasChildren: 'hasChild', htmlAttributes: 'hasAttribute',  selected: 'isSelected'}

      }

    }

and I am using context menu to process node operations like the example given by https://ej2.syncfusion.com/vue/documentation/treeview/how-to/process-the-tree-node-operations-using-context-menu/#process-the-tree-node-operations-using-context-menu:

      menuclick: function(args) {

        var treevalidate = document.getElementById('treeview').ej2_instances[0];

        var targetNodeId = treevalidate.selectedNodes[0];

        var targetNode = treevalidate.getNode(targetNodeId)

        var treeData = treevalidate.treeData[0];

        if (args.item.text === "add new case") {

            let new_case_id = undefined;

            this.$store.dispatch('getNewCaseId', {suite_id: treeData.id}).then(response => {

              new_case_id = response.data.new_case_id

              treevalidate.beginEdit(new_case_id);

            }, error => {

              this.$Message.info('get new case id error');

            })

        }

}

When I click `add new case`, the async request returns update data with one new node, and I can see the tree is updated with new node, however,  treevalidate.beginEdit(new_case_id) wouldn't create a edit textbox on the new node.

I also tried this way:

       var newNode = treevalidate.getNode(new_case_id)

       treevalidate.beginEdit(newNode)

It doesn't work, it seems newNode is empty like {id: "", text: "", parentID: "", selected: "", expanded: "", …}

[Deepa Loganathan]

 

Hi Jzy, 

 

 

We checked your reported issue "Edit textbox not created on tree node on using beginEdit method" in your mentioned scenario but unfortunately could not reproduce it from our side. Could you please ensure if proper tree id is returned from your async_request and passed in beginEdit method?  

 

 

For your reference, we have prepared a sample in your reported scenario. In this sample, on clicking `add new case` context menu button, new node is added, and editing is enabled for this node. Please find sample below. 

 

 

Sample: https://codesandbox.io/s/wo53pkz5x8 

 

 

If issue is still not resolved, please get back to us with more details of the issue, so that we can help you further. 

 

 

Regards, 

  

Deepa L. 

[Jzy]

Hi Deepa,

Thank you so much for your help. 

I made some changes on the example you gave, I still saw the same problem. Please reproduce it on the example below:

example link: https://codesandbox.io/s/8806ylm0r2

You can see I use this.tree_detail for dataSource field instead of data which is defined locally.  So when one new case is added, tree data actually varied according to  this.tree_detail, and the edit textbox is not created.

BTW, do you provide a method that selects one node manually?

Thanks,

Jzy

[Silambarasan I]

Hi Jzy, 

 

Query #1 "Edit textbox not created while using beginEdit method" 

 

In our TreeView component, we have provided support to update tree datasource dynamically by using the fields property which you can use to modify the datasource. Your reported issue is occurring as the tree datasource is not updated properly. Please use this approach or addNodes method as given in our previous update to achieve your requirement.  

 

Also, you can enable editing of the node on databound event. Please check below code block to update tree datasource dynamically, 

 

 

this.$refs.tree.fields = {
dataSource: this.state.tree_detail,//Here this.state.tree_detail is updated datasource
id: "id",
text: "name",
parentID: "pid",
hasChildren: "hasChild"
};
onDataBound: function(args) {
this.$refs.tree.$el.ej2_instances0.beginEdit(this.$store.state.new_case_id);
}, 

 

 

 

Query #2 "Selecting tree node manually"

 

We suspect your requirement is to select the tree node programmatically without user interaction and it can be achievable by using selectedNodes property. 

 

For your reference, we have modified the provided sample. In that, we have added new node on clicking 'add new case' from context menu and also, enabled editing for it. We have selected node of id "04" using selectedNodes property in the databound event. 

 

Sample:
https://codesandbox.io/s/7ko7vmvwlx 

 

 

Could you please check the above solution and get back to us if you require further assistance on this? 

 

Regards, 

Silambarasan 

[Jzy]

Hi Silambarasan,

Thank you so much for your help! It did solve my problem! You helped me a lot, I really appreciate it.

Thanks,

Jzy

[Silambarasan I]

Hi Jzy, 

 

Thanks for your update. We are happy to hear that your requirement has been achieved. 

Please get back to us if you need any further assistance. 

 

Regards, 

Silambarasan