Features
To define a client-side validation, conversion or renderer formatting we must define the function to be called on each parameter of the column field.
Validation functions
DataGridWebExample module
For editable column fields it's possible to specify which are the JavaScript functions that will run after editing the cells to check if the values are valid on client-side.
The functions will return a string to display on the cell, if nothing is returned that means the cell is valid and the row can be sent to the server.

Every function called has in the scope access to the following parameters:
    - panel: wijmo object,
    - row: index of the row,
    - column: index of the column,
    - cell: HTMLElement

In validation functions can be specified more parameters, the extra parameters will be added before the default ones.
E.g.:
    var maxLength = function(max, panel, row, column, cell) {
         // code here
    }

panel.cellType returns the type of cells that should be affected (wijmo.grid.CellType.Cell, wijmo.grid.CellType.ColumnHeader, ...)
E.g.:
    if (panel.cellType === wijmo.grid.CellType.Cell) {
        // Only for cells, excluding the grid header
         // Complete reference: console.table(wijmo.grid.CellType);
    }

 To get access to the value of the current cell:
    var value = panel.getCellData(row, column);
OSCellRenderer functions
DataGridWebExample module
For any column fields it's possible to specify which are the JavaScript functions that will run each time the grid is rendered.
The functions will return the value to replace the cell HTML, but not its value, the purpose is to be displayed a formatted value.

Every function called has in the scope access to the following parameters:
    - panel: wijmo object,
    - row: index of the row,
    - column: index of the column,
    - cell: HTMLElement

panel.cellType returns the type of cells that should be affected (wijmo.grid.CellType.Cell, wijmo.grid.CellType.ColumnHeader, ...)
E.g.:
    if (panel.cellType === wijmo.grid.CellType.Cell) {
        // Only for cells, excluding the grid header
         // Complete reference: console.table(wijmo.grid.CellType);
    }

 To get access to the value of the current cell:
    var value = panel.getCellData(row, column);
 
 To get the HTML of the current cell:
    var value = cell.innerHTML;

If nothing is returned on a function it's possible to perform other methods, for example, add classes:
     wijmo.addClass(cell, _className);
Conversion functions
DataGridWebExample module
For editable column fields it's possible to specify which are the JavaScript functions that will run after editing the cells to apply conversions.
The functions will return the value to replace the cell value, if the value is saved will be changed the field value on the Data Base (E.g.: toUpper('portugal') will return 'PORTUGAL').

Every function called has in the scope access to the following parameters:
    - panel: wijmo object,
    - row: index of the row,
    - column: index of the column,
    - cell: HTMLElement

panel.cellType returns the type of cells that should be affected (wijmo.grid.CellType.Cell, wijmo.grid.CellType.ColumnHeader, ...)
E.g.:
    if (panel.cellType === wijmo.grid.CellType.Cell) {
        // Only for cells, excluding the grid header
         // Complete reference: console.table(wijmo.grid.CellType);
    }

 To get access to the value of the current cell:
    var value = panel.getCellData(row, column);
Some behaviors that may not seem right can be result of the built-in features on the grid. The implemented behaviors have in consideration the user experience and if needed is possible to change the functions, it requires to redefine the JavaScript function with the desired changes.
Server validation
When have some client-side validations, send only the valid rows. Rows showing cell errors won't be sent to the server, however, when sending changed cells to the server, the valid rows will be sent if specified that the partial commit is allowed (default is true).
Remove new rows
Removing new created rows that were not yet sent to the server, will not append to the JavaScript array list of removed rows.
Loading
Show loading overlay when retrieving data from the server.
Empty state
Show empty state overlay when there are no rows. This is validated on the updatedView event and when hiding the loading overlay, to check if after loading there are results or if the empty state is to be shown.
Sorting
Sorting feature of native grid was customized to have three modes, Ascending, Descending and None. Also, was changed to have the ability of multiple sorting by Shift + Click on the columns.
TAB Navigation
There are two modes on navigating between cells using TAB key, one is navigating to the next cell no matter is editable or not and the other is to navigate only between the cells that are editable. The first one is possible by selecting one cell of the grid and click TAB key, the other is accessing a editable input, which can only be possible on an editable cell and then click TAB key.