ColumnDirective API in Angular TreeGrid API component

e-column directive represent a column of the Angular TreeGrid. It must be contained in a TreeGrid component(ejs-treegrid).

<ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'>
  <e-columns>
   <e-column field='ID' width='100'></e-column>
   <e-column field='name' headerText='Name' width='100'></e-column>
  </e-columns>
</ejs-treegrid>

Properties

allowEditing

any

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

Defaults to true

allowFiltering

any

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

Defaults to true

allowReordering

any

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

Defaults to true

allowResizing

any

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

Defaults to true

allowSorting

any

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

Defaults to true

clipMode

any

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.

Defaults to Syncfusion.EJ2.Grids.ClipMode.Ellipsis

columns

any

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

Defaults to null

commands

any

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");

Defaults to null

customAttributes

any

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

Defaults to null

defaultValue

any

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

Defaults to null

disableHtmlEncode

any

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

Defaults to true

displayAsCheckBox

any

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

Defaults to false

edit

any

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

Defaults to {}

editTemplate

any

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

editType

any

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

Defaults to ‘stringedit’

field

any

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.

Defaults to ‘undefined’

filter

any

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

Defaults to null

filterBarTemplate

any

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');

Defaults to null

filterTemplate

any

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

format

any

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.

Defaults to null

formatter

any

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

Defaults to null

freeze

any

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

Defaults to Syncfusion.EJ2.Grids.FreezeDirection.None

headerTemplate

any

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

Defaults to null

headerText

any

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

Defaults to ‘undefined’

headerTextAlign

any

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

Defaults to null

hideAtMedia

any

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

Defaults to ‘undefined’

isFrozen

any

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

Defaults to false

isIdentity

any

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

Defaults to false

isPrimaryKey

any

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

Defaults to false

lockColumn

any

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

Defaults to false

maxWidth

any

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

Defaults to ‘undefined’

minWidth

any

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

Defaults to ‘undefined’

showCheckbox

any

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

Defaults to false

showColumnMenu

any

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

Defaults to true

showInColumnChooser

any

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

Defaults to true

sortComparer

any

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

Defaults to ‘undefined’

template

any

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

Defaults to null

textAlign

any

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

Defaults to Syncfusion.EJ2.Grids.TextAlign.Left

type

any

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

Defaults to null

uid

any

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

Defaults to ‘undefined’

validationRules

any

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

Defaults to null

valueAccessor

any

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

Defaults to null

visible

any

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

Defaults to true

width

any

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

Defaults to ‘undefined’