ColumnModel

10 Oct 20257 minutes to read

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.