Skip to main content

How to use a custom formatter in GridView?

In order to set a custom formatter in a grid you need to:

  1. Set a column type to "custom".
  2. Add a custom formatter to the customFormatter field, describing the column as a function: f({row, value, column}){ ... };.

Function parameters:

  • row - row.
  • value - value of the current column.
  • column - description of the current column from the model.

The function should return a row or a React-component.

In order to create a React-component we recommend to use the DWKitApp.API.createElement function. Initialization should better be done in the init event.

Example of the link column usage:

var gridModelRewriter = function (model) {
model.columns[1].customFormatter = function (p) {
var url = "form/DocumentEdit/" + p.row.Id;
return DWKitApp.API.createElement("a", {href: url}, p.value);
return model;
DWKitApp.API.rewriteControlModel("grid", gridModelRewriter);