|
[index.tsx]
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ FirstName: "Ram", LastName: "Kumar", Name: "AJAI", Country: "India" }
];
this.state = { name: "name", family: "family" };
this.headertext = [{ text: "Tab1", iconCss: "e-twitter" }];
}
tabContent = (data, data1) => {
return (
<React.Fragment>
{console.log("--->tabContent1: Name=", this.state.name)}
<p>Grid control is rendered inside Tab Component</p>
<div>
<GridComponent dataSource={this.data} width="auto">
<ColumnsDirective>
<ColumnDirective
field="FirstName"
headerText="First Name"
isPrimaryKey={true}
width="110"
/>
<ColumnDirective
field="LastName"
headerText="Last Name"
width="110"
/>
<ColumnDirective field="Title" headerText="Name" width="150" />
<ColumnDirective
field="Country"
headerText="Country"
width="110"
/>
</ColumnsDirective>
<Inject services={[DetailRow]} />
</GridComponent>
<p>{data.text}</p> // state value changed here when update the state value in button click action
<p>{data.textVal}</p> // state value changed here when update the state value in button click action
<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 });
};
ShowTabs = () => {
return (
<TabComponent
enablePersistence="true"
heightAdjustMode="Auto"
id="defaultTab" >
<TabItemsDirective>
<TabItemDirective
presentation={true}
header={this.headertext[0]}
content={{
template: this.tabContent,
data: { text: this.state.name, textval: this.state.family } //Pass the state values in data property in tab component
}}
/>
{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 />
{this.ShowTabs()}
</div>
</div>
);
}
}
render(<App />, document.getElementById("root")); | 
