While working with the DataGrid that comes with jQuery EasyUI, you may at some point find yourself needing to perform CRUD operations on a record that includes a Boolean field.  You think to yourself “Great, I know the DataGrid comes with a Checkbox editor built into it!”.  Upon implementing the Checkbox editor in your grid and binding it to the appropriate field, however, you find that the Checkbox remains unchecked when the row enters edit mode, even if the value of that field was ‘true’.  The built-in Checkbox editor in the EasyUI DataGrid is made to accommodate a variety of options, which has the unfortunate side effect of not binding the ‘checked’ attribute of the Checkbox element properly to a Boolean value.  Luckily, it’s quite easy to extend the DataGrid’s editors to include a ‘working’ Checkbox.  Begin by adding a JavaScript file to your solution with the name ‘datagrid-editors.js’, and make sure to add a reference to this file in areas where you are working with the DataGrid.

Begin your extension of the DataGrid’s editors with the following code:



The second argument is the object containing the added DataGrid editors.  Each editor is comprised of at least three functions:  ‘init’, ‘getValue’, and ‘setValue’.

The ‘init’ function is responsible for creating the element that will be rendered and appending it to the container, in this case the row in the DataGrid.

The ‘getValue’ function returns the value of the element (and any modifications that should be made to the value before it is returned).

The ‘setValue’ function sets the value of the element and modifies the element and/or value as needed by the situation.

The whole file should look like this by now:

You can then reference your new editor from your DataGrid like so:

Additional editors can be added to this JavaScript to accommodate a variety of scenarios when working with the DataGrid.

Like this post? Share it!