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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

142331 Jan 29,2019 03:32 AM UTC Feb 4,2019 09:10 AM UTC Vue 5
loading
Tags: Treeview
Jzy
Asked On January 29, 2019 03:38 AM UTC

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 [Syncfusion]
Replied On January 30, 2019 10:47 AM UTC

 
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. 
 
 
Regards, 
  
Deepa L. 


Jzy
Replied On January 31, 2019 08:38 AM UTC

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 [Syncfusion]
Replied On February 1, 2019 12:27 PM UTC

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


Jzy
Replied On February 2, 2019 09:02 AM UTC

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 [Syncfusion]
Replied On February 4, 2019 09:10 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon