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

tabs doesnt refresh when elements changes

Thread ID:

Created:

Updated:

Platform:

Replies:

146332 Jul 31,2019 05:21 PM UTC Aug 12,2019 06:13 AM UTC React - EJ 2 3
loading
Tags: Tab
Albert
Asked On July 31, 2019 05:21 PM UTC

I have a tab control with few pages and it is showing the values that are set in state variables, whenever I change values by setstate, I expect that the values in the tabs get updated but unfortunately it doesnt happen.

I even set  enablePersistence="true" but had no effect.

if I put input field in the form, by clicking the buttons, it will be refreshed but not the one in tab control.

your advices would be appreciated.

here is the code:


// --------------------------------------------------------------------------------------
export default class FormDataBinding extends Component {
  constructor() {
    super(...arguments);
    this.state = { name: "name", family: "family" };

    this.headertext = [
      { text: "Twitter", iconCss: "e-twitter" },
    ];
  }
  // --------------------------------------------------------------------------------------
  tabContent1 = () => {
    return (
      <React.Fragment>
        {console.log("--->tabContent1: Name=", this.state.name)}
        <p>thes controls are inside Tab Component</p>
        <div>
          {/* it's not working because it's inside tabComponent */}
          <input
            type="text"
            value={this.state.name}
            key="nameKey1"
            id="nameId1"
            style={{ width: "500px" }}
          ></input>
          <br />
          <input
            type="text"
            value={this.state.family}
            key="familyID1"
            id="familyKey1"
            style={{ width: "500px" }}
          ></input>
          <button onClick={this.btnClick.bind(this)}>click hear</button>
        </div>
      </React.Fragment>
    );
  };
  // --------------------------------------------------------------------------------------
  btnClick = () => {
    var newName = "name :" + new Date().toTimeString();
    var familyName = "family : " + new Date().toTimeString();

    this.setState({ name: newName });
    this.setState({ family: familyName });
    this.UpdateStateInstantly(newName);
    this.ShowTabs();
  };
  // --------------------------------------------------------------------------------------
  ShowTabs = () => {
    return (
      <TabComponent
        enablePersistence="true"
        heightAdjustMode="Auto"
        id="defaultTab"
      >
        <TabItemsDirective>
          {console.log("ShowTabs1")}
          {/* ------------< Tab1 >------------- */}
          <TabItemDirective
            presentation={true}
            header={this.headertext[0]}
            
            content={this.tabContent1}
          />
          {console.log("ShowTabs2")}

        </TabItemsDirective>
      </TabComponent>
    );
  };
  // --------------------------------------------------------------------------------------
  render() {
    return (
      <div className="control-pane">
        <div className="control-section tab-control-section">
          {/*-------------------*/}
          <button onClick={this.btnClick.bind(this)}>click here</button>
          <br />
          {/* //-----------------------------------< Tabs >--------------------- */}
          {this.ShowTabs()}
          {/* //--------------------------------------------------------------- */}
        </div>
      </div>
    );
  }
}




Arun Palaniyandi [Syncfusion]
Replied On August 1, 2019 11:25 AM UTC

Hi Albert, 

Greetings from Syncfusion.  

We have achieved your requirement using the custom data in template in the content property. We have passed template and data to Tab content for retrieving setState changes. This issue reason is because the setstate is not immediately mutate inside the Tab content template.  Kindly refer to the following code.  
  
tabContent1 = (data, data1) => { 
    return ( 
      <React.Fragment> 
        <p>thes controls are inside Tab Component</p> 
        <div> 
          {/* it's not working because it's inside  tabComponent */} 
          <input 
            type="text" 
            value={data.text} 
            key="nameKey1" 
            id="nameId1" 
            style={{ width: "500px" }} 
          /> 
          <br /> 
          <input 
            type="text" 
            value={data1.textval} 
            key="familyID1" 
            id="familyKey1" 
            style={{ width: "500px" }} 
          /> 
 
          <button onClick={this.btnClick.bind(this)}>click hear</button> 
        </div> 
      </React.Fragment> 
    ); 
  }; 
  // -------------------------------------------------------------------------------------- 
  btnClick = () => { 
    debugger; 
    var newName = "name :" + new Date().toTimeString(); 
    var familyName = "family : " + new Date().toTimeString(); 
 
    this.setState({ name: newName }); 
    this.setState({ family: familyName }); 
    //this.UpdateStateInstantly(newName); 
    // this.ShowTabs(); // no need to call this method again 
 
  }; 
  // -------------------------------------------------------------------------------------- 
  ShowTabs = () => { 
    return ( 
      <TabComponent 
        ref={tab => (this.tab = tab)} 
        enablePersistence="true" 
        heightAdjustMode="Auto" 
        id="defaultTab" 
      > 
        <TabItemsDirective> 
          {console.log("ShowTabs1")} 
          {/* ------------< Tab1 >------------- */} 
          <TabItemDirective 
            presentation={true} 
            header={this.headertext[0]} 
            content={{ 
              template: this.tabContent1, 
              data: { text: this.state.name, textval: this.state.family } 
            }} 
          /> 
          {console.log("ShowTabs2")} 
        </TabItemsDirective> 
      </TabComponent> 
    ); 
  }; 
  
  
We have attached the below sample for your reference. 
 
 
Please let us know if you need further assistance. 

Regards, 
Arun P. 
 


Albert
Replied On August 9, 2019 06:53 PM UTC

Thanks for your Answer,

You solved my problem.

Can you please let me know where we can find these details about the components as I couldnt find them in your Documents and also API Docs.


Thanks

Karthigeyan Krishnamurthi [Syncfusion]
Replied On August 12, 2019 06:13 AM UTC

Hi Albert,

 

We are happy that our solution resolved your issue.

 

We have not documented our previous solution case and have the below UG. We will check and document it as soon as possible.

https://ej2.syncfusion.com/react/documentation/tab/how-to/render-other-components-in-tab-using-template/

 

Regards,

Karthi


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