ColumnModel API in JavaScript TreeGrid API control

Interface for a TreeGrid class Column

Properties

allowEditing

boolean

Controls whether editing is permitted for the column. By default, all columns are editable.

allowFiltering

boolean

Controls whether the column supports filtering. If set to false, users cannot filter data by this column.

allowReordering

boolean

Enables or disables the reordering of this column via drag-and-drop. Allows for dynamic column adjustments.

allowResizing

boolean

Determines if this column can be resized. If false, the column size is fixed.

allowSorting

boolean

Specifies whether sorting is enabled for this column. Set to false to prevent sort actions.

clipMode

ClipMode

Determines how overflow content is handled within a cell. Options include:

• Clip: Truncates the content.
• Ellipsis: Shows ellipsis for overflow.
• EllipsisWithTooltip: Shows ellipsis and tooltip on hover.

columns

Column[] | string[] | ColumnModel[]

Allows for the creation of stacked headers by using multiple rows in the grid’s header.

commands

CommandModel[]

Provides built-in command button options for cells. Options include Edit, Delete, Save, and Cancel. Custom command button implementations are possible. The following code example implements the custom command column.

<style type="text/css" class="cssStyles">
.details-icon:before
{
   content:"\e74d";
}
</style>
<div id="TreeGrid"></div>

var gridObj = new TreeGrid({
datasource: window.gridData,
columns : [
 { field: 'CustomerID', headerText: 'Customer ID' },
 { field: 'CustomerName', headerText: 'Customer Name' },
 {commands: [{buttonOption:{content: 'Details', click: onClick, cssClass: details-icon}}], headerText: 'Customer Details'}
]
gridObj.appendTo("#TreeGrid");

customAttributes

{ : }

Enables the addition of CSS styles and attributes for the content cells in a particular column.

defaultValue

string

Sets default values when new records are added to the TreeGrid involving this column.

disableHtmlEncode

boolean

If set to true, the HTML content within header and content cells is encoded to prevent injection attacks.

displayAsCheckBox

boolean

Displays the column value as a checkbox instead of a Boolean value when set to true.

edit

IEditCell

Allows customizing the default edit cell through the IEditCell object for more control over editing.

editTemplate

string | Function

Provides a template for editing cells in this column, supporting either a template string or an HTML element ID.

editType

string

Specifies the component type used for editing cells within this column.

field

string

Specifies the field name in the data source to which the column is bound. This field is used for operations like sorting and filtering. The field name must be a valid JavaScript identifier, beginning with a letter and avoiding spaces and special characters.

filter

IFilter

Customizes filter options for the column, enabling specialized filtering functionality.

filterBarTemplate

IFilterUI

Allows for a custom component within the filter bar, facilitating advanced filter interfaces. Includes create and read functions for custom component management.

<div id="TreeGrid"></div>

let gridObj: TreeGrid = new TreeGrid({
dataSource: filterData,
columns: [
  { field: 'OrderID', headerText: 'Order ID' },
  {
     field: 'EmployeeID', filterBarTemplate: {
        create: (args: { element: Element, column: Column }) => {
             let input: HTMLInputElement = document.createElement('input');
             input.id = 'EmployeeID';
             input.type = 'text';
             return input;
        },
        write: (args: { element: Element, column: Column }) => {
            args.element.addEventListener('input', args.column.filterBarTemplate.read as EventListener);
        },
        read: (args: { element: HTMLInputElement, columnIndex: number, column: Column }) => {
            gridObj.filterByColumn(args.element.id, 'equal', args.element.value);
       }
    }
}],
  allowFiltering: true
});
gridObj.appendTo('#TreeGrid');

filterTemplate

string | Function

Specifies a custom template or UI for filtering within this column, utilizing either string templates or HTML element IDs.

format

string | NumberFormatOptions | DateFormatOptions

Formats the displayed value of the column without affecting the underlying data. Supports standard and custom formats for numbers and dates. References for number and date formats.

formatter

Object | ITreeGridCellFormatter | Function

Allows for custom cell content formatting using an external method, executed prior to rendering.

freeze

freezeDirection

Determines which side (left, right, or center) the column should be frozen on.

headerTemplate

string | Function

Customizes the header content with a template, defined as a string or an HTML element ID.

headerText

string

Specifies the text displayed in the column header. If omitted, the field value is used as the header text.

headerTextAlign

TextAlign

Aligns the text in the column header. By default, the alignment corresponds to other content alignments.

hideAtMedia

string

Adjusts column visibility based on Media Queries. Accepts valid CSS media query strings for responsive adjustments.

isFrozen

boolean

Allows the column to be frozen, keeping it stationary while scrolling horizontally through the grid.

isIdentity

boolean

Identifies the column as an identity column in database terms, if set to true.

isPrimaryKey

boolean

Identifies the column as a primary key if set to true, enforcing uniqueness.

lockColumn

boolean

Prevents column reordering when set to true, locking the column into a set position.

maxWidth

string | number

Defines the maximum allowable width of the column in pixels or as a percentage, preventing resizing beyond this limit.

minWidth

string | number

Determines the minimum width of the column in pixels or percentage. This ensures the column does not shrink below this size.

showCheckbox

boolean

Displays checkboxes in the column when enabled, allowing for selections and certain operations.

showColumnMenu

boolean

Decides if the column menu should be available, providing options for column customization.

showInColumnChooser

boolean

Determines whether the column should appear in the Column Chooser. Set to false to exclude it.

sortComparer

SortComparer | string

Provides a custom sort comparer property to control how sorting is handled for this column’s data.

template

string | Function

Customizes the rendering of cell content using either a template string or HTML element ID.

textAlign

TextAlign

Specifies the horizontal alignment for the column content and header. Options include alignment to the left, center, or right.

type

string

Defines the type of data stored in the column, which may be string, number, date, or other types.

uid

string

Retrieves the unique identifier for the column. This UID is used internally to reference and manipulate the column.

validationRules

Object

Establishes validation rules to ensure data integrity during creation and updates.

valueAccessor

ValueAccessor | string

Applies custom cell values using an external function, allowing for dynamic display adjustments.

visible

boolean

Toggles the visibility of the column. Set to false to hide the column from view. Columns are visible by default.

width

string | number

Sets the column’s width in pixels or as a percentage. This defines how the column will occupy space in the grid.