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

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 set to false, it disables resize option of a particular column.

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 cell content’s overflow mode. The available modes are also it will display tooltip while hover on ellipsis applied cell.

Defaults to Syncfusion.EJ2.Grids.ClipMode.Ellipsis

columns

any

Used to render multiple header rows(stacked headers) on TreeGrid header.

Defaults to null

commands

any

commands provides an option to display command buttons in every cell. The available built-in command buttons are

• Edit - Edit the record.
• Delete - Delete the record.
• Save - Save the record.

• Cancel - Cancel the edit state. 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

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

Defaults to null

defaultValue

any

Defines default values for the component when adding a new record to the TreeGrid.

Defaults to null

disableHtmlEncode

any

If disableHtmlEncode is set to true, it encodes the HTML of the header and content cells.

Defaults to true

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 {}

editTemplate

any

Defines the cell edit template that used as editor for a particular column. It accepts either template string or HTML element ID.

editType

any

Defines the type of component for editing.

Defaults to ‘stringedit’

field

any

Defines the field name of column which is mapped with mapping name of DataSource. The bounded columns can be sort, filter etc., 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 ‘undefined’

filter

any

Defines the filter options to customize filtering for the particular column. @default null

filterBarTemplate

any

The filterBarTemplate is used to add a custom component instead of default input component for filter bar. It have create and read functions.

• create: It is used for creating custom components.

• read: It is used to perform custom filter action.

  <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

Defines the filter template/UI that is used as filter for a particular column. It accepts either template string or HTML element ID.

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

freeze

any

Defines which side the column need to freeze

Defaults to Syncfusion.EJ2.Grids.FreezeDirection.None

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 ‘undefined’

headerTextAlign

any

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

Defaults to null

hideAtMedia

any

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

Defaults to ‘undefined’

isFrozen

any

You can use this property to freeze selected columns in grid.

Defaults to false

isIdentity

any

If isIdentity is set to true, then this column is considered as identity column.

Defaults to false

isPrimaryKey

any

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

Defaults to false

lockColumn

any

If lockColumn set to true, then it disables Reordering of a particular column. The locked column will be moved to first position.

Defaults to false

maxWidth

any

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

Defaults to ‘undefined’

minWidth

any

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

Defaults to ‘undefined’

showCheckbox

any

If showCheckbox set to true, then the checkboxes will be displayed in particular column.

Defaults to false

showColumnMenu

any

If showColumnMenu set to false, then it disable the column menu of a particular column. By default column menu will show for all columns

Defaults to true

showInColumnChooser

any

If showInColumnChooser set to false, then hide the particular column in column chooser. By default all columns are displayed in column Chooser.

Defaults to true

sortComparer

any

Defines the sort comparer property.

Defaults to ‘undefined’

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

Defines the data type of the column.

Defaults to null

uid

any

Gets the unique identifier value of the column. It is used to get the object.

Defaults to ‘undefined’

validationRules

any

Defines rules to validate data before creating and updating.

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 ‘undefined’