Redux actions tied to TreeView events cause weird behaviors

[James Pham]

Hi,

My app uses React + Redux and am using the React version of this EJ2 control.

I've confirmed that the TreeViewComponent and the Redux action, setExplorerSelectedId, work fine separately. However, when I link the Redux action to the TreeViewComponent's nodeClicked event, or any other event for that matter, I start to experience weird behaviors. For example, when I link the action to the nodeClicked event (see code below), I no longer can expand any tree nodes. Another example is if I link the action the nodeSelected event instead, I can expand the nodes, but as soon as I click on any of the nodes, all branches collapse immediately.

I've also confirmed that using another Tree component such as this, https://github.com/react-component/tree, does not exhibit the same behavior.

Please advise.

render() {

const { setExplorerSelectedId } = this.props.actions;

return (

<div className="app">

   <TreeViewComponent fields={this.fields} nodeClicked={setExplorerSelectedId}></TreeViewComponent>

</div>

);

}

[Ashokkumar Balasubramanian]

Hi James Pham,   

   

We checked your reported problem at our end. In our TreeView component, events are working properly in React + Redux application. We suspect that you are not provided the actions properly in your application. So, check this at your side to bind actions properly in TreeView component.   

   

For you reference, we have prepared a sample with Redux + React application. Please find the sample in below location.   

   

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/135905/ze/TreeView-Redux-1751105560   

   

If issue persists, please revert the sample with replication procedure.     

   

Regards,   

Ashokkumar B.   

[James Pham]

Hi Ashokkumar,

Thanks for the response. I was referring specifically to Redux Actions that was causing the weird TreeView behaviors. Attaching a standard function to the TreeView events work just fine, but not to Redux Actions. Please test it by linking a TreeView event to a Redux Action to reproduce the issue (see my example code snippet from the original post).

Let me know what you find. Thanks!

James

[Ashokkumar Balasubramanian]

Hi James Pham,   

   

We have checked your reported problem at our end and we are able to bind the Redux actions for TreeView nodeClicked event. Please check the below code block.   

   

render() {   

        const setExplorerSelectedId  = this.props.onClick;   

        debugger;   

        return (   

            <div className="app">   

                <TreeViewComponent id="tree" fields={this.fields} nodeClicked={setExplorerSelectedId}></TreeViewComponent>   

            </div>   

        );   

    }   

   

We have prepared a sample for this requirement, please check the sample in below location.   

   

Sample    

   

If we misunderstood your problem, please reproduce the issue in our provided sample and revert.   

   

Regards,   

Ashokkumar B.