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

TreeViewComponent error with nodeTemplate customComponent and Redux

Thread ID:

Created:

Updated:

Platform:

Replies:

149974 Dec 16,2019 06:00 PM UTC Dec 17,2019 08:55 AM UTC React - EJ 2 1
loading
Tags: Treeview
Porfirio Hernandez
Asked On December 16, 2019 06:02 PM UTC

Hi,

I'm working with TreeView using nodeTemplate function to indicate a customComponent, this custom component has more compoments that are connnected to redux store.
The customComponent works with no problem in others view/screens but when a try to use it in the TreeView with nodeTemplate, this fails, For example if a click Edit option that the edit component user redux appears the following error:

Uncaught Invariant Violation: Could not find "store" in the context of "Connect(CardInfoEditor)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(CardInfoEditor) in connect options.

Do you have an example with redux for treeView or any advice?

Note: The Redux store, is using in a internal component from the customComponet used with nodeTemplate.

getCardTemplate(data){        
  return (<ItemCard cardInfo={data} />);        
}

render() {
     return (
          <TreeViewComponent ref="refTreeView" id={'tree-column-'+this.state.column.id}
              fields={this.state.fields} nodeTemplate={this.getCardTemplate} />
          );
}

Examples:

class ItemCard extends React.Component {
     render() {
          return (
               <CardInfoEditor data={this.props.cardInfo} />
          );
     }
}

class CardInfoEditor extends React.Component {
     render() {

        return (
            <div>{this.props.data.title}div>
        ).
    }
}

export default withStyles(styles)(connect(nullnull)(CardInfoEditor));


Thanks

Keerthana Rajendran [Syncfusion]
Replied On December 17, 2019 08:55 AM UTC

Hi Porfirio, 
  
Thanks for contacting Syncfusion support. 
  
We have prepared a TreeView sample using React Redux with your shared code. In this sample we have rendered custom component using our nodeTemplate. Kindly refer to the below link for the sample. 
  
 
Refer to the following KB for more details on how to use react with redux. 
 
 
If we have misunderstood your requirement, please get back to us with complete code along with additional details on the difficulties you are facing while rendering TreeView using React Redux. This will be helpful for us to serve you better. 
  
Regards, 
Keerthana. 


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