Our grid already has sorting, pagination, and filtering. Now it’s time to make it editable.
First, let’s modify the grid columns by adding each of them the editor property.
columns.js:
const columns = {
name: {
name: 'First Name',
// ...
editor: function () {
return <input type="text" {...this.props}/>; // text editor
},
// ...
},
surname: {
name: 'Last Name',
// ...
editor: function () {
return <input type="text" {...this.props}/>;
},
// ...
},
phone: {
name: 'Phone',
// ...
editor: function () {
return <input type="text" {...this.props}/>;
},
// ...
},
age: {
name: 'Age',
// ...
editor: function () {
return <UIKernel.Editors.Number {...this.props}/>; // number editor
},
// ...
},
gender: {
name: 'Gender',
// ...
editor: function () {
return <UIKernel.Editors.Select // select editor
{...this.props}
options={[
[1, 'Male'],
[2, 'Female']
]}
/>;
},
// ...
};You may have noticed that all inputs as well as UIKernel.Editors.Select have some props passed to them via {...this.props}.
These props are passed through UIKernel.Grid. They include onChange, onFocus, onBlur, and value.
We’ll also need to validate our edited data. So let’s define some validation rules.
validation.js:
const validator = UIKernel.createValidator()
.field('name', UIKernel.Validators.regExp.notNull(/^\w{2,30}$/, 'Invalid first name.'))
.field('surname', UIKernel.Validators.regExp.notNull(/^\w{2,30}$/, 'Invalid last name.'))
.field('phone', UIKernel.Validators.regExp.notNull(/^(\d{3}-)?\d{2,10}$/, 'Invalid phone number.'))
.field('age', UIKernel.Validators.number.notNull(0, 120, 'Invalid age.'))
.field('gender', UIKernel.Validators.enum.notNull([1, 2], 'Invalid gender.'));Here, we’ve called UIKernel.createValidator to create a validator.
field is the method of validator which accepts two parameters: a column name and a validation function.
In this example, we’ve used only UIKernel.Validators.regExp. There are many more UIKernel validation functions, see them all here.
Now let’s modify our model.js file as follows:
const model = new UIKernel.Models.Grid.Collection({
// ...
validator
});The last task is to make it possible to discard and save the edited data.
So we’ll define the saveChanges and clearChanges methods in our MainComponent.
MainComponent.js:
// ...
saveChanges() {
this.grid.save()
.catch(() => {
alert('Error');
});
},
clearChanges() {
this.grid.clearAllChanges();
}Inside saveChanges we’ve called the save method to save changes.
Inside clearChanges we’ve called the clearAllChanges method to remove changes.
To make it all work, we also need to add the ref attribute to our grid and two buttons for calling the methods we’ve just created.
MainComponent.js:
// ...
<UIKernel.Grid
ref={(grid) => this.grid = grid}
model={this.state.model}
cols={columns}
viewCount={10}
/>
<div className="panel-footer">
<a className="btn btn-success" onClick={() => this.clearChanges()}>Clear</a>
{' '}
<a className="btn btn-primary" onClick={() => this.saveChanges()}>Save</a>
</div>
// ...Now our grid data is editable.