Pular para o conteúdo principal

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'

{
entity: "client"
}

Required on data source:

  • Id
  • Name
  • HasImage (if type is image)

format

Formats the cell before it is displayed.

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

mapping

If the data source does not mapping to the defaults fields name, it can be mapped by using the mapping property:

{
caption: "Requesters",
dataType: "string",
dataField: "RequestersNames",
visible: false,
alignment: "center",
width: 150,
entity: "team",
format: {
mapping: {
id: "RequestersIds",
name: "RequestersNames",
hasImage: "RequestersHasImage"
}
}
}

img-box-shadow

img-box-shadow

type

Accepted Values: 'undefined' | 'image' | 'link' | 'document' | 'date'

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

  • Id
  • Name
  • HasImage
{
entity: "client",
format: {
type: "image"
}
}

size

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

To define the size of the image it should be set the size property.

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

properties

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

In the following example, to hide the client name from the column and keep only the client image, hideName property should be set as true.

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

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