StackedColumnDirective

12 Sep 20258 minutes to read

e-stacked-column directive represent the stacked column of the Angular TreeGrid.
It must be contained in a StackedColumns component(e-stacked-columns).

<ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'>
  <e-columns>
    <e-column field='ID' width='100'></e-column>
    <e-column headerText='Details' width='100'>
      <e-stacked-columns>
        <e-stacked-column field='Name' width='140'></e-stacked-column>
      </e-stacked-columns>
    </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’