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

how to bind TextBoxComponent to current row Selected Table

Thread ID:

Created:

Updated:

Platform:

Replies:

146261 Jul 29,2019 08:11 AM UTC Aug 1,2019 12:01 PM UTC React - EJ 2 1
loading
Tags: Tab
mohsen
Asked On July 29, 2019 08:11 AM UTC

jsx  :
<TabComponent
heightAdjustMode="Auto"
id="businessTabContent"
>
<TabItemsDirective>
<TabItemDirective
header={
this.state.headerText[0]
}
content={
this.state.tabContent[0]
}
/>
</TabItemsDirective>
</TabComponent>

in this tabContent I have a form and some textBoxComponent and out of TabComponent i have a GridComponent when click on row i
want show current data in textBoxComponent .
but That one textBoxComponent inside tabComponent not works

i use a html input for test out of tabComponent in this case works

Arun Palaniyandi [Syncfusion]
Replied On August 1, 2019 12:01 PM UTC

 
Hi Mohsen, 
 
Greetings from Syncfusion.  
 
We have achieved your requirement using the custom data  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.   
 
 
export class Default extends SampleBase { 
  state = { count: 0} 
 
  handleIncrement = () => { 
    this.setState({ count: this.state.count + 1}) 
  } 
 
  handleDecrement = () => { 
    this.setState({ count: this.state.count - 1}) 
  } 
 
  template1(data) { 
    return ( 
      <TextBoxComponent placeholder="First Name" floatLabelType="Auto" value={data.text} /> 
    ); 
  } 
  headertext = [{ text: "Rome" }, { text: "Paris" }, { text: "London" }]; 
  render() { 
    return (<div className='control-pane'> 
      <div className='control-section input-content-wrapper'> 
 
        <div className="row custom-margin custom-padding-5"> 
          <TabComponent ref={(tab) => { this.tabObj = tab }} showCloseButton={true} heightAdjustMode='None' height={320}> 
            <TabItemsDirective> 
              <TabItemDirective header={this.headertext[0]} 
                content={{ 
                  template: this.template1, 
                  data: { text: this.state.count } 
                }} /> 
            </TabItemsDirective> 
          </TabComponent> 
          <div className="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 
            <input type="text" id="text1" value={this.state.count} /> 
          </div> 
          <button onClick={this.handleIncrement}>Increment by 1</button> 
          <button onClick={this.handleDecrement}>Decrement by 1</button> 
        </div> 
      </div> 
    </div>); 
  } 
 
 
 
  
We have attached the below sample for your reference. 
 
 
 
Please let us know if you need further assistance. 
 
Regards, 
Arun P. 


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