My requirement is to fetch data from store and populate it using fixed data table and against each row i need to place an edit button. After clicking on the edit button, i need to display row data on a modal box with editable option after upating the fields and finally clicking on save button in the modal box the data needs to get updated in the database and fixed data table also needs to update as well.
I have worked till now on displaying the store data using fixed data table with editable option for each row. But stucked at after updating the record in database how to update the fixed data table row only without refreshing the entire table.
Below is my code and have no idea whether it is the right way to do or not
var TestModal = React.createClass({
propTypes: {
title : React.PropTypes.any,
rank : React.PropTypes.any,
year : React.PropTypes.any
},
getInitialState: function() {
return {
title: this.props.title,
rank: this.props.rank,
year: this.props.year
};
},
handleSubmit: function(e) {
e.preventDefault();
var title = this.refs.title.getValue().trim().toUpperCase();
var rank = this.refs.rank.getValue().trim().toUpperCase();
var year = this.refs.year.getValue().trim().toUpperCase();
var title_json= JSON.stringify({title: title});
var rank_json= JSON.stringify({rank: rank});
var year_json= JSON.stringify({year: year});
//alert(title_json);
//alert(rank_json);
//alert(year_json);
this.props.onCommentSubmit(title_json,rank_json,year_json);
this.props.onRequestHide;
return;
},
validationTest: function() {
var length = this.state.test.length;
if (length > 10) return 'success';
else if (length > 5) return 'warning';
else if (length > 0) {
return 'error';
}
},
render: function() {
return (
<Modal {...this.props} className="testModal" bsStyle="primary" title='Edit Details' animation={false}>
<form className="testModal" onSubmit={this.handleSubmit} >
<div className="modal-body">
<p><Input type="text" defaultValue={this.state.title} ref="title" className="form-control" required/></p>
<p><Input type="text" defaultValue={this.state.rank} ref="rank" className="form-control" required/></p>
<p><Input type="text" defaultValue={this.state.year} ref="year" className="form-control" required/></p>
</div>
<div className="modal-footer">
<ButtonGroup>
<Button className="btn btn-default" onClick={this.props.onRequestHide} data-dismiss="modal" active>Close</Button>
<Button bsStyle="primary" className="btn btn-default" type="submit" disabled={this.state.isSubmitting}>Save</Button>
</ButtonGroup>
</div>
</form>
</Modal>
);
}
});
var Trigger = React.createClass({
propTypes: {
title : React.PropTypes.any,
rank : React.PropTypes.any,
year : React.PropTypes.any
},
handleCommentSubmit: function(title_json,rank_json,year_json) {
alert("handleCommentSubmit:"+title_json);
alert("handleCommentSubmit:"+rank_json);
alert("handleCommentSubmit:"+year_json);
//code to send updated fields to server and refresh the fixed data table row
},
render: function() {
return (
<ModalTrigger modal={<TestModal onCommentSubmit={this.handleCommentSubmit} title={this.props.title} rank={this.props.rank} year={this.props.year}/>} >
<Button bsStyle="primary" bsSize="medium">Edit</Button>
</ModalTrigger>
);
}
});
var usersList = React.createClass({
getInitialState() {
alert("DashboardComponent::getInitialState");
return {
rows: []
};
},
componentDidMount: function() {
alert("DashboardComponent::componentDidMount");
DashboardServerActionCreators.receiveData();
},
componentWillMount() {
alert("DashboardComponent::componentWillUnmount");
dashboardStore.addChangeListener(this._onChange);
},
componentWillUnmount: function () {
alert("DashboardComponent::componentWillUnmount");
dashboardStore.removeChangeListener(this._onChange);
},
_onChange: function() {
alert("DashboardComponent::onChange");
this.setState({
rows: dashboardStore.getUsersList()
});
},
_renderButton(cellData, cellDataKey, rowData, rowIndex){
var title=(JSON.stringify(rowData.title)).replace(/\"/g, "");
var rank=(JSON.stringify(rowData.rank)).replace(/\"/g, "");
var year=(JSON.stringify(rowData.year)).replace(/\"/g, "");
return <Trigger onCommentSubmit={this.handleCommentSubmit} title={title} rank={rank} year={year}/>
},
_rowGetter(rowIndex) {
return this.state.rows[rowIndex];
},
render() {
return (
<div>
<Table
height={500}
rowHeight={40}
rowGetter={this._rowGetter}
rowsCount={this.state.rows.length}
width={630}
maxHeight={450}
headerHeight={40}>
<Column
label="ID"
width={200}
dataKey="_id"
/>
<Column
label="Name"
width={150}
dataKey="title"
/>
<Column
label="Rank"
width={100}
dataKey="rank"
/>
<Column
label="Year"
width={80}
dataKey="year"
/>
<Column
label="Click"
width={80}
cellRenderer= {this._renderButton}
/>
</Table>
</div>
);
}
});
