how to bind TextBoxComponent to current row Selected Table

[mohsen]

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]

 

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. 

 

Sample: https://stackblitz.com/edit/react-3ngtcw-uwwh27?file=index.js 

 

 

Please let us know if you need further assistance. 

 

Regards, 

Arun P.