columns

specifies the configuration of grid 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
});

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
  • 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"
    • 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 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
• footer - (array) an array of objects with footer rows configuration. Each footer object may include:
  • text - (string|number) the text of a header
  • colspan - (number) the number of columns in a colspan
  • rowspan - (number) the number of rows in a rowspan
  • 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 footer: "avg" | "sum" | "max" | "min"
    • some other string
• maxWidth - (number) the maximal width to be set for a column
• minWidth - (number) the minimal width to be set for a column
• 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)
• resizable - (boolean) defines whether a column can be resized
• type - (string) the type of a column: "string"|"number"|"boolean"|"any"|"date"
• dateFormat - (string) defines the format of dates (type:"date")
• editorType - (string) the type of an editor used in a column: "input"|"select"|"datePicker"|"checkbox"|"combobox"
• 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)
• hidden - (boolean) defines whether a column is hidden
• 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

Back to top