We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

computed part is:

    computed: {
        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
            }, 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)

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

5 Replies

DL Deepa Loganathan Syncfusion Team January 30, 2019 05:47 AM

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. 
If issue is still not resolved, please get back to us with more details of the issue, so that we can help you further. 
Deepa L. 

JZ Jzy January 31, 2019 03:38 AM

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?


SI Silambarasan I Syncfusion Team February 1, 2019 07:27 AM

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) {
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. 
Could you please check the above solution and get back to us if you require further assistance on this? 

JZ Jzy February 2, 2019 04:02 AM

Hi Silambarasan,

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


SI Silambarasan I Syncfusion Team February 4, 2019 04:10 AM

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. 

Live Chat Icon For mobile
Up arrow icon