First, let’s create a form for adding new records to our grid.
Inside the constructor we’ve defined the form prop and bound the onFormChange and handleSubmit methods.
The value of form is an instance of UIKernel.Form.
Here, we’ve called this.form.init and this.form.addChangeListener.
addChangeListener adds a listener for update event.
init initializes a form. It takes in one argument - an object with settings.
The fields property defines form fields.
The model property defines the form model. To create the form model, we’ve called UIKernel.Adapters.Grid.ToFormCreate
with grid model and an object of default field values as arguments.
submitAll: true means that all form fields will be validated.
partialErrorChecking: true means that the form fields will be validated in response to user input.
Note that the form uses the validation rules we’ve specified before.
Inside componentWillUnmount we’ve removed an event listener by calling this.form.removeChangeListener.
The onFormChange method is called when form data changes.
handleSubmit calls the this.form.submit method which sends data to our model.
On successful submission, the callback from MainComponent is invoked.
All inputs have the onChange, onFocus, and onBlur props with callbacks set.
this.form.updateField updates the field value.
this.form.clearError clears the field error mark.
this.form.validateForm validates the form.
Using the ternary operator, we dynamically add classes to our elements.
The ternary operator allows us to specify two different classes, one if a function returns true and one for false.
this.state.fields['<field-name>'].errors holds an array of validation errors for the form field ‘<field-name>’.
this.state.fields['<field-name>'].errors === null if there is no errors in the form field ‘<field-name>’.
this.state.fields['<field-name>'].isChanged indicates if the form field ‘<field-name>’ has been changed.
Now let’s open the main.css file and add there the following code:
Next up, let’s modify MainComponent.
Here, we’ve defined the highlightNewRecord and updateCreateFormState methods and changed the render method.
highlightNewRecord is called after successful submitting of CreateForm. It highlights new records.
updateCreateFormState is called when CreateForm data changes. It updates this.state.createFormState.
Finally, let’s modify the model.js file:
Using UIKernel, we’ve built an editable grid which has sorting, filtering and pagination without too much work.
The capabilities of UIKernel go beyond what we’ve seen here. Check out more examples here.