Skip to main content

Set Columns

A function used to set grid's columns in a workspace.

By default, a column is created for each field of a data source object, but in most cases, it is redundant. To specify a set of columns to be created in a grid, assign an array specifying these columns to the columns property.

Each object in it configures a single column. If a column does not need to be customized, this array may include the name of the field that provides data for this column.

Each grid column is represented in this array by an object containing column settings or by a data source field that this column is bound to.

Column properties define the behavior and appearance of a grid column.

{
    entity: "client",
    format: {
        type: "image",
        mapping: {
            id: "ClientId",
            name: "ClientName",
            hasImage: "ClientHasImage"
        },
        properties: {
            hideName: true,
            size: "small",
            forceImage: false
        }
    },
    caption: "Client",
    dataType: "string",
    dataField: "ClientName",
    alignment: "center",
    width: 50,
    allowEditing: false
}

entity​

Setting up the Entity property, the standard display will be used. If the cell display needs to be configured, the format property allows defining other default displays according to the selected type. According to the type to be presented in the column, image, link or text, some additional fields must be available in the data source.

Accepted Values: 'client' | 'company' | 'stage' | 'user' | 'team'

Basic Usage

{
  entity: "client";
}

format​

Formats the cell before it is displayed.

There are some standard formats available. By specifing its type the corresponding format will be displayed.

type​

Accepted Values: 'undefined' | 'image' | 'link' | 'document' | 'date' | 'currency' | 'read' | 'priority' | 'stage'

To setup the Image type, it is necessary that data source includes the entity:

  • Id
  • Name
  • HasImage

Basic Usage

{
    entity: "client",
    format: {
        type: "image"
    }
}

properties

Properties withing format property customize the behavior and appearance of a default display.

{
    entity: "client",
    format: {
        type: "image",
        properties: {
            hideName: true,
            size: "small"
        }
}
hideName:

To hide the client name from the column and keep only the client image, set this property as true.

size:

To define the size of the image.

Accepted Values: 'small' | 'medium' | 'large'

Example

img-box-shadow

img-box-shadow

caption​

Specifies a caption for the column.

dataType​

Casts column values to a specific data type

Accepted Values: 'string' | 'number' | 'date' | 'boolean' | 'object' | 'datetime'

dataField​

Binds the column to a field of the dataSource.

alignment​

Aligns the content of the column

Accepted Values: undefined | 'center' | 'left' | 'right'

width​

Specifies the column's width in pixels or as a percentage. Ignored if it is less than minWidth.

Type: Number | String

The property supports the following types of values:

  • Number - The column's width in pixels.
  • String - A CSS-accepted column width measurement (for example, "55px", "80%" and "auto") except relative units such as em, ch, vh, etc.

allowEditing​

A flag to allow column editing

required​

Makes a column required to fill

Type: Boolean

{
    dataField: "example",
    required: true
}

img-box-shadow

showZeroes​

show or hide the zeroes values

Type: Boolean

 {
        dataField: "From0To60",
        visible: true,
        dataType: "number",
        alignment: "right",
        format: {
            type: "fixedPoint",
            precision: 2,
        },
        showZeroes: false
}

img-box-shadow

img-box-shadow

Customize the column header's

by default the background color is grey and the label has the the default style of the system.

Type: object

{
    dataField: "People",
    alignment: "center",
    header: {
        color: "green",
        label: {
            color: "white",
            font: {
                size: "25px",
                family: "Times New Roman"
            }
        }
    }
}

img-box-shadow

img-box-shadow

color​

Change the background color of the Header.

Type: string

Accepted Values: name of the color, HEX code, RGB code

label​

Customize the label of the column.

Type: object

color​

Change the color of the text.

Type: string

Accepted Values: name of the color, HEX code, RGB code

font​

Change the font's size and family.

Type: string

  • size: the value must be in pixels
  • family: font's family name

caretPosition​

When setting the property, it will set the cursor in a certain position. By representing the cursor with a | , please check the example below:

  • editorOptions: {caretPosition: 0} the cursor will be placed in the position 0 = |00:00
  • editorOptions: {caretPosition: 1} the cursor will be placed in the position 1 = 0|0:00
{...
    editorOptions: {
        caretPosition: 1
    }
}

img-box-shadow