SlickGrid is a data grid used to display tabular information is a user and programmer friendly way. In recent months I have become possibly too familiar with SlickGrid and although it can be annoying on occasion, I have to admit it is a well written and executed Javascript library.
How SlickGrid handles data
SlickGrid makes use of a data provider called the DataView and the grid itself, called the DataGrid. The DataView is responsible for holding the data for all the cells in the table, it is possible to implement your own DataView as long as you make certain methods available via a public api. Both the DataView and the DataGrid provide events that can be used to trigger updates of the data, column information or any other aspect of either view or grid.
The editor used for a particular cell is defined in the definition of the column that cell is in, here is an example making use of validation, an editor, and a formatter to manipulate and display the data in each cell.
Structure of an Editor
A SlickGrid editor is a function that implements certain methods in order to provide a way of editing data stored in the grid and passing that information back to the data view. The methods that it must make publicly available are:
- destroy – Remove all DOM elements, events and data created by the constructor
- focus – Used to set input focus
- isValueChanged – Returns a boolean if the value has been changed by the editor
- serializeValue – Returns a serialized version of the data from the editor
- loadValue – Updates the value of the input or any other field after the editor is initialised
- applyValue – Sets the value in the grid data once the editor has been destroyed
- validate – Validate user input using any method wanted, returns and object with valid: boolean and msg: string
There are a few optional methods you can implement as well:
- show – Triggered when a cell being edited is scrolled into view
- hide – Triggered when a cell being edited scrolls out of view
- position – Triggered when scrolling the grid
As long as you pass a constructor function that implements the required methods you have created a SlickGrid editor
The most basic editor
The most basic of editors is one that just provides a form input for information to be entered and stored in the view and grid when exiting the field. This is pretty much lifted straight from the SlickGrid in built editor file.
Exposing the editor
To be used in SlickGrid an editor needs to be exposed globally under the window object, to do this you need to first create your editor constructors then extend them to the window.Slick.Editors object.
Using a base constructor
Through experience I have found that using a constructor as a base and extending other editors from that is a great way to write editors for SlickGrid. Firstly you need to write your base editor, it needs to implement all of the required methods as prototypes that can be overwritten by individual editors. Firstly lets create the base editor constructor and extend Slick.Editors with it.
Now we have this in place we can set the prototypes for the BaseEditor constructor like this. I have not included the full methods for ease of reading, unless they are required, you can assume that it implements them in the same way as the basic editor above.
The next step is to create our first editor, a simple text editor that will render an input field in the cell. When doing this we will extend the functionality of the BaseEditor constructor so we have a solid base to start from. Notice that as our BaseEditor implements a basic text editor we really don’t need to be a lot, other than set arguments and run the init() method.
More than an input
So really we want to do a little more than just show an input field, otherwise what is the point in using inheritance and prototyping to get the job done. Firstly we need to alter our init() prototype method, it needs to run a setup method if it is available, allowing us to do any extra initialisation we might want.
We can now write something a little more useful, lets start with a date picker making use of thebootstrap datepicker plugin. First we need to create the new constructor DatePickerEditor then specify our setup method, we also need to overwrite the destroy method as our datepicker will need to manually be destroyed.
If you want to use this datepicker we would then set it in the column definition.
The finished product
And now the finished product, a base constructor for SlickGrid editors plus a DatePicker and Text editor.