columns
specifies the configuration of grid columns
array columns;
Example
var grid = new dhx.Grid("grid_container", {
columns: [
{ width: 100, id: "a", header: [{ text: "#" }] },
{ width: 100, id: "b", header: [{ text: "Title" }] },
{ width: 200, id: "c", header: [{ text: "Name" }] },
{ width: 200, id: "d", header: [{ text: "Address" }] }
],
data: dataset
});
Details
Each column object may contain a set of properties described below:
id |
(string|number) mandatory, the id of a column |
width |
(number) the width of a column |
header |
(array) mandatory, an array of objects with header rows configuration. Each header object may include:
- text - (string|number) the text of a header
- align - (string) aligns data in the header: "left"|"center"|"right"
- colspan - (number) the number of columns in a colspan
- rowspan - (number) the number of rows in a rowspan
Related sample: Grid. Header Spans
- css - (any) styling to be applied to a header
- content - (string) additional content of a header, which can be:
- a filter: "inputFilter" | "selectFilter" | "comboFilter"
- one of the methods that process values in a column and show result in the header: "avg" | "sum" | "max" | "min" | "count"
- some other string
- filterConfig - (object) optional, a configuration object for "comboFilter". It can contain a set of properties:
- filter - (function) sets a custom function for filtering Combo Box options
- readonly - (boolean) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input)
- template - (function) sets a template of displaying options in the popup list
- placeholder - (string) sets a placeholder in the input of ComboBox
- virtual - (boolean) enables dynamic loading of data on scrolling the list of options
|
htmlEnable |
(boolean) if set to true, specifies the HTML content (inner HTML) of a column. If set to false, the content of the column cells will be displayed as a string value Related sample: Grid. Html In Data |
footer |
(array) an array of objects with footer rows configuration. Each footer object may include:
- text - (string|number) the text of a footer
Related sample: Grid. Grid With Footer
- css - (any) styling to be applied to a footer
- content - (string) additional content of a footer, which can be:
- a filter: "inputFilter" | "selectFilter" | "comboFilter"
- one of the methods that process values in a column and show result in the footer: "avg" | "sum" | "max" | "min" | "count"
- some other string
- filterConfig - (object) optional, a configuration object for "comboFilter". It can contain a set of properties:
- filter - (function) sets a custom function for filtering Combo Box options
- readonly - (boolean) makes ComboBox readonly (it is only possible to select options from the list, without entering words in the input)
- template - (function) sets a template of displaying options in the popup list
- placeholder - (string) sets a placeholder in the input of ComboBox
- virtual - (boolean) enables dynamic loading of data on scrolling the list of options
|
maxWidth |
(number) the maximal width to be set for a column Related sample: Grid. Max Width |
minWidth |
(number) the minimal width to be set for a column Related sample: Grid. Min Width |
mark |
(object|function) returns a template for marking a cell(s)
- as an object contains min and max properties, to apply desired CSS classes to cells with minimal|maximal values in a column
- as a function takes several parameters:
- cell - (string) the value of a cell
- columnCells - (array) an array of all cell values in the specified column
- row - (object) an object with all cells in a row
- col - (object) the config of a column (see the columns config) Related sample: Grid. Mark Cells
|
resizable |
(boolean) defines whether a column can be resized |
type |
(string) the type of a column. The type sets the alignment of the content and defines the type of the editor used in the column:
- "string" (by default) - aligns data to the left side and applies the "input"/"textarea" editor
- "number" - aligns data to the right side and applies the "input" editor
- "boolean" - aligns data to the left side and applies the "checkbox" editor
- "percent" - aligns data to the left side and applies the "input" editor
- "date" - aligns data to the left side and applies the "datePicker" editor
|
format |
(string) defines the format for the content of the column's cells |
editorType |
(string) the type of an editor used in a column: "input"|"select"|"datePicker"|"checkbox"|"combobox"|"textarea" |
options |
(array) a set of options to be displayed in the editor of a cell (editorType: "select"|"combobox") |
template |
(function) returns a template with content for a cell(s). Takes 3 parameters:
- cellValue - (any) the value of a cell
- row - (object) an object with all cells in a row
- col - (object) the config of a column (see the columns config)
Related sample: Grid. Cell Templates
|
hidden |
(boolean) defines whether a column is hidden Related sample: Grid. Hidden Columns |
draggable |
(boolean) defines whether a column is draggable |
editable |
(boolean) defines whether a column is editable |
sortable |
(boolean) defines whether a column is sortable |
adjust |
(boolean|string) defines whether the width of a column is automatically adjusted to its content |
autoWidth |
(boolean) enables/disables the ability of a column to adjust its size to the size of Grid |
align |
(string) aligns data in a column: "left" | "center" | "right" |
tooltip |
(boolean) enables a tooltip on hovering over the content of a column, true by default |
tooltipTemplate |
(function) returns a template for the content of the tooltip. Takes 3 parameters:
- value - (any) the value of a cell
- row - (object) an object with all cells in a row
- col - (object) the config of a column (see the columns config)
|
See also
Back to top