ColumnDirective

12 Sep 20254 minutes to read

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

<ejs-gantt [dataSource]='data' allowSelection='true' allowSorting='true'>
  <e-columns>
   <e-column field='ID' width='150'></e-column>
   <e-column field='taskName' headerText='Task Name' width='200'></e-column>
  </e-columns>
</ejs-gantt>

Properties

allowEditing any

If allowEditing set to false, then it disables editing of a particular column.
By default all columns are editable.

Defaults to true

allowFiltering any

If allowFiltering set to false, then it disables filtering option and filter bar element of a particular column.
By default all columns are filterable.

Defaults to true

allowReordering any

If allowReordering set to false, then it disables reorder of a particular column.
By default all columns can be reorder.

Defaults to true

allowResizing any

If allowResizing is set to false, it disables resize option of a particular column.
By default all the columns can be resized.

Defaults to true

allowSorting any

If allowSorting set to false, then it disables sorting option of a particular column.
By default all columns are sortable.

Defaults to true

clipMode any

Defines the overflow mode for cell content. The available modes are:

  • Clip - Truncates the cell content when it overflows its area.
  • Ellipsis - Displays an ellipsis when the cell content overflows its area.
  • EllipsisWithTooltip - Displays an ellipsis when the cell content overflows its area, and shows a tooltip on hover over the ellipsis.

Defaults to Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip

customAttributes any

The CSS styles and attributes of the content cells of a particular column can be customized.

Defaults to null

disableHtmlEncode any

If disableHtmlEncode is set to true, it disables HTML encoding for the content of specific column.

Defaults to false

displayAsCheckBox any

If displayAsCheckBox is set to true, it displays the column value as a check box instead of Boolean value.

Defaults to false

edit any

Defines the IEditCell object to customize default edit cell.

Defaults to {}

editType any

Defines the type of component used for editing the field.

Defaults to ‘stringedit’

field any

Defines the field name of column which is mapped with mapping name of DataSource.
The field name must be a valid JavaScript identifier,
the first character must be an alphabet and should not contain spaces and special characters.

Defaults to null

filter any

It is used to customize the default filter options for a specific columns.

  • ui - to render custom component for specific column. It has following functions:
  • ui.create - It is used for creating custom components.
  • ui.read - It is used for read the value from the component.
  • ui.write - It is used to apply component model as dynamically.

Defaults to null

format any

It is used to change display value with the given format and does not affect the original data.
Gets the format from the user which can be standard or custom
number
and date formats.

Defaults to null

formatter any

Defines the method which is used to achieve custom formatting from an external function.
This function triggers before rendering of each cell.

Defaults to null

headerTemplate any

Defines the header template as string or HTML element ID which is used to add customized element in the column header.

Defaults to null

headerText any

Defines the header text of column which is used to display in column header.
If headerText is not defined, then field name value will be assigned to header text.

Defaults to null

headerTextAlign any

Define the alignment of column header which is used to align the text of column header.

Defaults to Syncfusion.EJ2.Grids.TextAlign.Left

hideAtMedia any

Column visibility can change based on Media Queries.
hideAtMedia accepts only valid Media Queries.

Defaults to null

isPrimaryKey any

If isPrimaryKey is set to true, considers this column as the primary key constraint.

Defaults to false

maxWidth any

Defines the maximum width of the column in pixel or percentage, which will restrict resizing beyond this pixel or percentage.

Defaults to null

minWidth any

Defines the minimum width of the column in pixels or percentage.

Defaults to null

sortComparer any

Defines the sort comparer property.

Defaults to null

template any

Defines the column template that renders customized element in each cell of the column.
It accepts either template string or HTML element ID.

Defaults to null

textAlign any

Defines the alignment of the column in both header and content cells.

Defaults to Syncfusion.EJ2.Grids.TextAlign.Left

type any

To define column type.

validationRules any

Defines validation rules for data before creating or updating records.
The rules are used to ensure that data meets specific criteria before it is saved or updated.

Defaults to null

valueAccessor any

Defines the method used to apply custom cell values from external function and display this on each cell rendered.

Defaults to null

visible any

If visible is set to false, hides the particular column. By default, columns are displayed.

Defaults to true

width any

Defines the width of the column in pixels or percentage.

Defaults to null