Skip to main content

TreeGrid column properties

id(string|number) the id of a column
width(number) the width of a column. The minimum with of the column is 20 px.
The property is ignored if the adjust property is used.
header(array) 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" | "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
      - multiselection - (boolean) enables selection of multiple 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
  • customFilter - (function) optional, a custom function for extended filtering. It takes two parameters:
      - item - (any) a data item the value of which should be compared
      - input - (string) the value of the option selected in the filter

    and returns true/false to specify whether the data item should be displayed in the treegrid after filtering
  • headerSort - (boolean) enables/disables sorting by clicking the header
  • sortAs - (function) a function that defines the type to sort data as (e.g. string, number, date, etc.)

Related Sample: TreeGrid. Header spans
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: TreeGrid. 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
  • 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
  • customFilter - (function) optional, a custom function for extended filtering. It takes two parameters:
      - item - (any) a data item the value of which should be compared
      - input - (string) the value of the option selected in the filter

    and returns true/false to specify whether the data item should be displayed in the grid after filtering
maxWidth(number) the maximal width to be set for a column

Related Sample: TreeGrid. Columns max width
minWidth(number) the minimum width to be set for a column. The minimum width of a column is 20px.

Related Sample: TreeGrid. Columns 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)
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"|"combobox"|"textarea"|"multiselect"
editorConfig(object) an object with configuration settings of the column's editor. It can include the following property:
  • newOptions - (boolean) allows end users to add new values into the list of combobox options from UI (editorType: "combobox"). The new options will also appear in the drop-down list of the header/footer filters (content: "selectFilter" | "comboFilter").

Related Sample: TreeGrid. Rich example with templates and different editors
options(array) a set of options to be displayed in the editor of a cell (editorType: "select"|"combobox"|"multiselect")
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

  • The property has a priority over the autoWidth property if it is specified either for the treegrid or for the column, and over the width property of the column.
  • The width the columns will be adjusted to also depends on the values of the minWidth/maxWidth properties if they are set for a column.
    • autoWidth(boolean) enables/disables the ability of a column to adjust its size to the size of TreeGrid

    Also note:
  • If autoWidth is set for a column, the width of the column is calculated on the base of the sizes of the container of the treegrid and the values of the minWidth/maxWidth properties if they are set for the column.
  • The property is ignored if the adjust property is used.
  • If the width property is specified in the configuration object of a column, the autoWidth property won't work for this column.
    • 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)