Grid Model and Columns

The model of a Grid control is an instance of a class, that implements the GridModel interface and contains the following key information:

• the data, displayed by the grid
• grid columns configuration data

The ArrayModel class uses an array of objects as a backing store, and an array of GridColumn instances as columns configuration data. Additionally, the name of the unique key field should be specified via the keyField parameter in the constructor. It will serve as a primary key to ensure proper functionality when sorting is applied to the grid.

The GridColumn class comprises the information that should be defined for all grid columns:

• the name of the of the field, displayed in the column
• the data type of the field
• and additional properties, that allow customization of the column appearance and behavior, such as caption and sortable.

The data types, that can be specified for a column are String, Integer, RealNumber, Date, DateTime, Currency, Image and Lookup. A special type of column is the CommandType. Command columns do not display data, but an HTML element, that triggers a command action on some event.

The code below shows how to setup a Grid's model:

JavaScript

var data = [
{
    "ID": 1,
    "Name": "Alabama"
}, 
{
    "ID": 2,
    "Name": "Alaska"
}, 
{
    "ID": 3,
    "Name": "Arizona"
}];var column0 = new dv.GridColumn("ID");
column0.dataType = dv.IntegerType;
column0.editable = false;var column1 = new dv.GridColumn("Name");
column1.dataType = dv.StringType;grid.model = new dv.ArrayModel(data, [column0, column1], "ID");

The metaData property of the GridColumn class provides a dictionary, which can store additional configuration data for that column, like lookup list for the LookupType, commands list for the CommandType and customEditor options for the Date, DateTime and Image types, as well as Intl formatting options and locales. Column metaData is also accessible
through the model's columnMetaData(columnIndex) method. Some examples of metaData usage:

JavaScript

// a list of commands is expected to be provided for the CommandType column
var column0 = new dv.GridColumn();
column0.dataType = dv.CommandType;
column0.metaData.set("commands", [ConfirmDeleteCommand, EditCommand, SaveCommand, CancelCommand]);
...
// metaData of a Lookup column should contain either a 'keyValues' property of type Map or a 'values' property of type Array.
var column3 = new dv.GridColumn("state");
column3.dataType = dv.LookupType;
column3.caption = "State";
column3.metaData.set("values", states.map(s => [s["Name"]]));
...
// setting a 'customEditor' property in the metaData indicates that a data-type specific control from the MindFusion.Common.UI package will be used as an inplace editor for the column.
// The value object contains a dictionary of property names and values for the said control.
var column4 = new dv.GridColumn("registered");
column4.dataType = dv.DateType;
column4.caption = "Date";
column4.metaData.set("customEditor", {
    "autoComplete": true,
    "allowEmptyInput": true
});
...
// setting a 'format' property, containing Intl locales and options for a CurrencyType column
grid.model.columnMetaData(2).set("format", {
   locales: "de",
   options: { currency: "EUR" }
});