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

Preserve state on any action

Hi,

I am trying to make onclick event on treeview node and update state accordingly. But screen got wipe out or blank. 

Please let me know how to preserve state on any click event.

Thanks,
Sonam Diwate


17 Replies

CI Christopher Issac Sunder K Syncfusion Team March 11, 2019 09:00 AM UTC

Hi Sonam, 

Thank you for contacting Syncfusion support. 

We check your reported query – “Preserve state on click event in TreeView”. The TreeView component has nodeClick event which is triggered when a node is clicked successfully and the corresponding state is maintained. You can use this event to achieve your requirement. Please check below code snippet, 

render: function () { 
    return ( 
        <EJ.TreeView id="treeView" fields={fields} nodeClick={this.onClick}> 
        </EJ.TreeView> 
    ); 
} 
 
//TreeView nodeClick event function 
onClick: function (e) { 
    alert("Node of id " + e.id + "is clicked successfully"); 
} 

We have prepared a sample for your reference. Please find it below, 


Thanks, 
Christo


SD Sonam Diwate March 11, 2019 09:39 AM UTC

Thanks for quick reply.
I am facing issue while rendering treeview after getting data in props through service call. As a initial state treeview object is created first, but i am getting data from service after that. So how to pass nodetemplate and field data on componentDidMount or any other event to load treeview again.


CI Christopher Issac Sunder K Syncfusion Team March 12, 2019 10:17 AM UTC

Hi Sonam, 

Thanks for the update. 

We have understood your requirement of updating the TreeView model data in the componentDidMount method of the react life cycle. To achieve your requirement, you can dynamically update the value of the fields property of the TreeView once the data is received from the service call in componentDidMount property. Please, check out the below sample to achieve your requirement. 


Please let us know if you need any further assistance. 

Thanks, 
Christo


SD Sonam Diwate March 12, 2019 12:46 PM UTC

One more thing I want to itegrate is to I want to ristrict drag and drop/select for few child nodes in Treeview component.


CI Christopher Issac Sunder K Syncfusion Team March 13, 2019 06:39 AM UTC

Hi Sonam, 

We checked your requirement – “To restrict drag and drop and selection for a few child nodes”. TreeView component has support to restrict dropping nodes at children’s level or sibling’s level by using allowDropChild and allowDropSibling properties respectively. You can use this if you need to restrict dropping nodes for the entire TreeView. 

If you need to restrict drag and drop for particular nodes alone, it can be achieved in application level by cancelling the drag/drop operation in the TreeView nodeDragStart and nodeDragStop events. Please check the below code snippet, 

render: function() { 
    return ( 
        <div id="treeview-default"> 
            <h2>Treeview</h2> 
            <EJ.TreeView 
                id="treeView" 
                fields={fields} 
                template="#treeTemplate" 
                allowDragAndDrop={true} 
                nodeDragStop={this.onDragStop} 
                nodeDragStart={this.onDragStart} 
            /> 
        </div> 
    ); 
}, 
 
//Event triggered on node drag start 
onDragStart: function (e) { 
    //Checks if the dragged node has parent id ‘7’ 
    if (e.parentElementData.id === "7") { 
        //Cancels the drag operation 
        e.cancel = true; 
    } 
}, 
 
//Event triggered on node drag stop 
onDragStop: function (e) { 
    //Checks if the dropped node location has parent id ‘7’ 
    if (e.targetElementData.parentId === "7") { 
        //Cancels the drop operation 
        e.cancel = true; 
    } 
}, 

In the above code, we have restricted drag and drop operations for node which has parent id – “7”

For restricting selection for particular nodes, it can be achieved in application level by cancelling the selection operation in the TreeView beforeSelect event. Please check the below code snippet, 

render: function() { 
    return ( 
        <div id="treeview-default"> 
            <h2>Treeview</h2> 
            <EJ.TreeView 
                id="treeView" 
                fields={fields} 
                template="#treeTemplate" 
                beforeSelect={this.beforeSelect} 
            /> 
        </div> 
    ); 
}, 
 
//Event triggered before selecting a node 
beforeSelect: function (e) { 
    //Checks if the selected node’s parent id is ‘7’ 
    if (e.nodeDetails.parentId === "7") { 
        //Cancels the selection operation 
        e.cancel = true; 
    } 
}, 

We have modified the previously provided sample based on the above queries. Please find it below, 


Note: There were some corrections in the sample we had previously provided. We have modified it in the above sample. So, please use this for your previous requirement also. 
 
Let us know if you have any concerns. 

Thanks, 



SD Sonam Diwate March 13, 2019 01:03 PM UTC

This helps me a lot.

one more issue I am facing.

render() {
      const { fields } = this.props;
        return (
        <React.Fragment>
          {fields.dataSource.map(item=> <p>{item.name}</p>)}
          <TreeViewComponent
          fields={fields}
          nodeTemplate={this.renderTreeViewNodes}
          />
      </React.Fragment>
      );
    }

in this code normal ({fields.dataSource.map(item=> <p>{item.name}</p>)}) data is getting rendered on screen after the service call, means rendered is getting called as data changes in this.props.fields but when it came to  <TreeViewComponent it does not render again.





SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team March 15, 2019 03:55 AM UTC

Hi Sonam, 
  
We have validated your query with EJ TreeView and we are able to reproduce the reported issue at our end. We are currently analyzing about the cause of the issue with high priority. We will update you the further status of this issue in three business days on 20 March 2019. 
  
We appreciate your patience until then. 
  
Regards, 
Shameer Ali Baig S. 



CI Christopher Issac Sunder K Syncfusion Team March 20, 2019 11:33 AM UTC

Hi Sonam, 

Thanks for your patience. 

We have validated your reported issue in EJ TreeView and confirmed it as a defect in EJ TreeView. The fix for the issue will be included in our upcoming Volume 1 2019 SP1 release which is expected to rolled out in the end of April, 2019.  

Please let us know whether you need the fix before the release so that we can provide you the patch at the earliest. 

Thanks, 
Christo 



SD Sonam Diwate March 20, 2019 12:03 PM UTC

Yes I will required this patch. As my client is planning to buy so we need to showcase them. 

Regards,
Sonam Diwate


CI Christopher Issac Sunder K Syncfusion Team March 21, 2019 12:39 PM UTC

Hi Sonam Diwate, 

Thanks for the update. 

We are currently working on fixing the issue. We will get back to you with the patch on 26 March, 2019.  

We appreciate your patience until then. 

Thanks, 
Christo 



CI Christopher Issac Sunder K Syncfusion Team March 26, 2019 10:44 AM UTC

Hi Sonam Diwate, 

Thank you for being patient. 

Please find the patch to resolve the reported issue in EJ TreeView. 
  
Disclaimer:  
Please note that we have created this patch for version 16.4.0.42 specifically to resolve the following issue reported in this forum. (143200)  
If you have received other patches for the same version for other products, please apply all patches in the order received.  

As mentioned earlier, the fix for the issue will be included in our upcoming Volume 1 2019 SP1 release which is expected to rolled out in the end of April, 2019.  

Thanks, 
Christo 



SD Sonam Diwate March 26, 2019 12:16 PM UTC

Thank you for the update.

Can you please guide me to use this patch file. We are using below versions

"@syncfusion/ej2-navigations": "16.4.54" 
"@syncfusion/ej2-react-navigations": "16.4.54",

Regards,
Sonam Diwate



CI Christopher Issac Sunder K Syncfusion Team March 27, 2019 11:52 AM UTC

Hi Sonam, 

Sorry for the inconvenience caused. 

As you have created the incident on ReactJS without highlighting EJ2 TreeView, initially. We have provided our updates with EJ1 TreeView. Also, the samples which we provided in our previous samples and patch update are based on EJ 1 TreeView. 
But, from your last update, we found that you are using our EJ2 TreeView control. And your expected requirement is working properly without any issue in our EJ2 TreeView. And you don't need to apply our patch file in the EJ2 packages. 

We have prepared a simple sample to demo demonstrate the expected functionality in EJ2 TreeView. 

In the above sample, we are updating the dataSource dynamically on componentDidMount() method. We suggest you update the data source for Treeview by updating its fields property and it is the proper implementation. 

Please let us know if you need any further assistance. 

Thanks,
Christo 




SD Sonam Diwate March 27, 2019 04:30 PM UTC

This is not going to work.
Below are the highlights:
1. Data is not coming from static json.
2. we are making service call to get data.
3. Then we are manipulating data structure as per treeview component structure.
4. we are changing data object in getDerivedStateFromProps.
4. componentDidMount will execute first before getting the data.

Please provide example with data which is coming from api.

Please use below URL to get Data:
https://static-json-server.herokuapp.com/workactivities

One more thing in this POC is that if we add custom template using nodeTemplate={this.treeviewNode} the template does not work properly


CI Christopher Issac Sunder K Syncfusion Team March 28, 2019 12:41 PM UTC

Hi Sonam, 

We analyzed your requirement and prepared a sample by fetching the data using API call. If you need to load data from a remote endpoint, componentDidMount is a good place to instantiate the network request. Please refer the following link https://reactjs.org/docs/react-component.html#componentdidmount . 

Also we can able to add custom template by providing it as a string template. Please find the corresponding code snippet. 

this.nodeTemplate = '<div>' + '<div class="treeName">${jobname}</div>' + '<div class="emailAddress">${type}</div>' 
'</div>'; 


Please check the above sample and get back to us if you need any further assistance. Also please provide us following details if the provided sample does not meet your requirement. 
  1. Whether you are changing treeview’s data object in getDerivedStateFromProps method?
  2. In what way you are manipulating data structure as per treeview component structure?

Thanks,
Christo 



SD Sonam Diwate March 31, 2019 01:47 PM UTC

Adding template in string is working for me. But there are so many challenges to integrate functionalities like:
1. Binding functions in tree view detail structure
2. Accordion View in tree view. 
3. select only parent element and Drag and Drop in scheduler to create event.
4. Multiselect parent elements and Drag and Drop in scheduler to create event.
5. Multiselect and create group and then drag and drop to scheduler.

All these are the initial requirement which required so much configuration.

Is there any way to convert accordion component in to drag and drop, grouping etc...
Can you create simple POC with drag and drop functionality in to scheduler.
     - It should be simple DIV and has draggable and dropable funtionality in to scheduler.
     - scheduler should accept the object and start rendering event as per data provided by DIV object.
     


Regards,
Sonam Diwate


CI Christopher Issac Sunder K Syncfusion Team April 2, 2019 01:40 PM UTC

Hi Sonam, 

We have validated your requirement and prepared a sample based on that. The sample contains the following functionalities 
  1. We have restrict the child node selection in the nodeSelecting event, so that you can select only parent element and and enable drag and drop for it. Also we have disable the checkbox for the childNodes for restricting the selection
  2. You can select any number of nodes by selecting the checkbox.
  3. We configured the treeview to look like an accordion using cssClass.
  4. You can multiselect parent elements and drag and drop it to the scheduler
  5. You can drag and drop the treeview parent node into scheduler by filtering the draggednode in the dragStopevent of treeview and pass the event data as object in the addEvent of scheduler.

Since there is no option to provide drag and drop in accordion , we have customized the treeview as accordion. 

Please check the sample and get back to us if you need any further assistance or have any concerns. 

Thanks, 
Christo 


Loader.
Live Chat Icon For mobile
Up arrow icon