@syncfusion/ej2-angular-treegrid 22.1.34 → 22.1.35

package/src/treegrid/stacked-column.directive.d.ts

@@ -0,0 +1,352 @@
+import { ViewContainerRef } from '@angular/core';
+import { ComplexBase, ArrayBase } from '@syncfusion/ej2-angular-base';
+import * as i0 from "@angular/core";
+/**
+ * `e-stacked-column` directive represent the stacked column of the Angular TreeGrid.
+ * It must be contained in a StackedColumns component(`e-stacked-columns`).
+ * ```html
+ * <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>
+ * ```
+ */
+export declare class StackedColumnDirective extends ComplexBase<StackedColumnDirective> {
+    private viewContainerRef;
+    directivePropList: any;
+    /**
+     * Defines the data type of the column.
+     * @default null
+     */
+    type: any;
+    /**
+     * If `allowEditing` set to false, then it disables editing of a particular column.
+     * By default all columns are editable.
+     * @default true
+     */
+    allowEditing: 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.
+     * @default true
+     */
+    allowFiltering: any;
+    /**
+     * If `allowReordering` set to false, then it disables reorder of a particular column.
+     * By default all columns can be reorder.
+     * @default true
+     */
+    allowReordering: any;
+    /**
+     * If `allowResizing` set to false, it disables resize option of a particular column.
+     * @default true
+     */
+    allowResizing: any;
+    /**
+     * If `allowSorting` set to false, then it disables sorting option of a particular column.
+     * By default all columns are sortable.
+     * @default true
+     */
+    allowSorting: any;
+    /**
+     * Defines the cell content's overflow mode. The available modes are
+     *
+     * also it will display tooltip while hover on ellipsis applied cell.
+     * @default Syncfusion.EJ2.Grids.ClipMode.Ellipsis
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Grids.ClipMode
+     */
+    clipMode: any;
+    /**
+     * Used to render multiple header rows(stacked headers) on TreeGrid header.
+     * @default null
+     */
+    columns: 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.
+     *```html
+     *<style type="text/css" class="cssStyles">
+     *.details-icon:before
+     *{
+     *   content:"\e74d";
+     *}
+     *</style>
+     *<div id="TreeGrid"></div>
+     *```
+     *```typescript
+     *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");
+     *```
+     *
+     * @default null
+     */
+    commands: any;
+    /**
+     * The CSS styles and attributes of the content cells of a particular column can be customized.
+     * @default null
+     */
+    customAttributes: any;
+    /**
+     * Defines default values for the component when adding a new record to the TreeGrid.
+     * @default null
+     */
+    defaultValue: any;
+    /**
+     * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.
+     * @default true
+     */
+    disableHtmlEncode: any;
+    /**
+     * If `displayAsCheckBox` is set to true, it displays the column value as a check box instead of Boolean value.
+     * @default false
+     */
+    displayAsCheckBox: any;
+    /**
+     * Defines the `IEditCell` object to customize default edit cell.
+     * @default {}
+     */
+    edit: any;
+    /**
+     * Defines the type of component for editing.
+     * @default 'stringedit'
+     */
+    editType: 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.
+     * @default 'undefined'
+     */
+    field: any;
+    /**
+     *  Defines the filter options to customize filtering for the particular column.
+     *
+     *  @default null
+     *
+     */
+    filter: 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.
+     *
+     * ```html
+     *<div id="TreeGrid"></div>
+     *```
+     *```typescript
+     *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');
+     *```
+     *
+     * @default null
+     */
+    filterBarTemplate: 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`](https://ej2.syncfusion.com/documentation/common/internationalization/#supported-format-string)
+     * and [`date`](https://ej2.syncfusion.com/documentation/common/internationalization/#supported-format-string-1) formats.
+     * @default null
+     * @asptype string
+     */
+    format: any;
+    /**
+     * Defines the method which is used to achieve custom formatting from an external function.
+     * This function triggers before rendering of each cell.
+     * @default null
+     */
+    formatter: any;
+    /**
+     * Defines which side the column need to freeze
+     * @default Syncfusion.EJ2.Grids.FreezeDirection.None
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Grids.FreezeDirection
+     */
+    freeze: 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.
+     * @default 'undefined'
+     */
+    headerText: any;
+    /**
+     * Define the alignment of column header which is used to align the text of column header.
+     * @default null
+     * @aspdefaultvalueignore
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Grids.TextAlign
+     */
+    headerTextAlign: any;
+    /**
+     * Column visibility can change based on [`Media Queries`](http://cssmediaqueries.com/what-are-css-media-queries.html).
+     * `hideAtMedia` accepts only valid Media Queries.
+     * @default 'undefined'
+     */
+    hideAtMedia: any;
+    /**
+     * You can use this property to freeze selected columns in grid.
+     * @default false
+     */
+    isFrozen: any;
+    /**
+     * If `isIdentity` is set to true, then this column is considered as identity column.
+     * @default false
+     */
+    isIdentity: any;
+    /**
+     * If `isPrimaryKey` is set to true, considers this column as the primary key constraint.
+     * @default false
+     */
+    isPrimaryKey: any;
+    /**
+     * If `lockColumn` set to true, then it disables Reordering of a particular column.
+     * The locked column will be moved to first position.
+     * @default false
+     */
+    lockColumn: any;
+    /**
+     * Defines the maximum width of the column in pixels or percentage, which will restrict resizing beyond this pixels or percentage.
+     * @default 'undefined'
+     */
+    maxWidth: any;
+    /**
+     * Defines the minimum width of the column in pixels or percentage.
+     * @default 'undefined'
+     */
+    minWidth: any;
+    /**
+     * If `showCheckbox` set to true, then the checkboxes will be displayed in particular column.
+     * @default false
+     */
+    showCheckbox: 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
+     * @default true
+     */
+    showColumnMenu: any;
+    /**
+     * If `showInColumnChooser` set to false, then hide the particular column in column chooser.
+     *  By default all columns are displayed in column Chooser.
+     * @default true
+     */
+    showInColumnChooser: any;
+    /**
+     * Defines the sort comparer property.
+     * @default 'undefined'
+     */
+    sortComparer: any;
+    /**
+     * Defines the alignment of the column in both header and content cells.
+     * @default Syncfusion.EJ2.Grids.TextAlign.Left
+     * @isenumeration true
+     * @asptype Syncfusion.EJ2.Grids.TextAlign
+     */
+    textAlign: any;
+    /**
+     * Gets the unique identifier value of the column. It is used to get the object.
+     * @default 'undefined'
+     */
+    uid: any;
+    /**
+     * Defines rules to validate data before creating and updating.
+     * @default null
+     */
+    validationRules: any;
+    /**
+     * Defines the method used to apply custom cell values from external function and display this on each cell rendered.
+     * @default null
+     */
+    valueAccessor: any;
+    /**
+     * If `visible` is set to false, hides the particular column. By default, columns are displayed.
+     * @default true
+     */
+    visible: any;
+    /**
+     * Defines the width of the column in pixels or percentage.
+     * @default 'undefined'
+     */
+    width: any;
+    /**
+     * Defines the column template that renders customized element in each cell of the column.
+     * It accepts either [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or HTML element ID.
+     * @default null
+     * @asptype string
+     */
+    template: any;
+    /**
+     * Defines the header template as string or HTML element ID which is used to add customized element in the column header.
+     * @default null
+     * @asptype string
+     */
+    headerTemplate: any;
+    filter_itemTemplate: any;
+    /**
+     * Defines the filter template/UI that is used as filter for a particular column.
+     * It accepts either template string or HTML element ID.
+     * @aspignore
+     */
+    filterTemplate: any;
+    commandsTemplate: any;
+    /**
+     * Defines the cell edit template that used as editor for a particular column.
+     * It accepts either template string or HTML element ID.
+     * @aspignore
+     */
+    editTemplate: any;
+    constructor(viewContainerRef: ViewContainerRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<StackedColumnDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<StackedColumnDirective, "ejs-treegrid>e-columns>e-column>e-stacked-columns>e-stacked-column", never, { "allowEditing": "allowEditing"; "allowFiltering": "allowFiltering"; "allowReordering": "allowReordering"; "allowResizing": "allowResizing"; "allowSorting": "allowSorting"; "clipMode": "clipMode"; "columns": "columns"; "commands": "commands"; "customAttributes": "customAttributes"; "defaultValue": "defaultValue"; "disableHtmlEncode": "disableHtmlEncode"; "displayAsCheckBox": "displayAsCheckBox"; "edit": "edit"; "editTemplate": "editTemplate"; "editType": "editType"; "field": "field"; "filter": "filter"; "filterBarTemplate": "filterBarTemplate"; "filterTemplate": "filterTemplate"; "format": "format"; "formatter": "formatter"; "freeze": "freeze"; "headerTemplate": "headerTemplate"; "headerText": "headerText"; "headerTextAlign": "headerTextAlign"; "hideAtMedia": "hideAtMedia"; "isFrozen": "isFrozen"; "isIdentity": "isIdentity"; "isPrimaryKey": "isPrimaryKey"; "lockColumn": "lockColumn"; "maxWidth": "maxWidth"; "minWidth": "minWidth"; "showCheckbox": "showCheckbox"; "showColumnMenu": "showColumnMenu"; "showInColumnChooser": "showInColumnChooser"; "sortComparer": "sortComparer"; "template": "template"; "textAlign": "textAlign"; "type": "type"; "uid": "uid"; "validationRules": "validationRules"; "valueAccessor": "valueAccessor"; "visible": "visible"; "width": "width"; }, {}, ["template", "headerTemplate", "filter_itemTemplate", "filterTemplate", "commandsTemplate", "editTemplate"]>;
+}
+/**
+ * StackedColumn Array Directive
+ * @private
+ */
+export declare class StackedColumnsDirective extends ArrayBase<StackedColumnsDirective> {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<StackedColumnsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<StackedColumnsDirective, "ejs-treegrid>e-columns>e-column>e-stacked-columns", never, {}, {}, ["children"]>;
+}

package/src/treegrid/treegrid.component.d.ts

@@ -99,6 +99,7 @@ export declare class TreeGridComponent extends TreeGrid implements IComponentBas
      *
      * > Check the [`Row Template`](../../treegrid/row) customization.
      *
+     * @asptype string
      */
     rowTemplate: any;
     /**
@@ -107,7 +108,7 @@ export declare class TreeGridComponent extends TreeGrid implements IComponentBas
      * > It accepts either the [template string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
      *or the HTML element ID.
      *
-     *
+     * @asptype string
      */
     detailTemplate: any;
     editSettings_template: any;
@@ -119,5 +120,5 @@ export declare class TreeGridComponent extends TreeGrid implements IComponentBas
     registerEvents: (eventList: string[]) => void;
     addTwoWay: (propList: string[]) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TreeGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TreeGridComponent, "ejs-treegrid", never, { "aggregates": "aggregates"; "allowExcelExport": "allowExcelExport"; "allowFiltering": "allowFiltering"; "allowMultiSorting": "allowMultiSorting"; "allowPaging": "allowPaging"; "allowPdfExport": "allowPdfExport"; "allowReordering": "allowReordering"; "allowResizing": "allowResizing"; "allowRowDragAndDrop": "allowRowDragAndDrop"; "allowSelection": "allowSelection"; "allowSorting": "allowSorting"; "allowTextWrap": "allowTextWrap"; "autoCheckHierarchy": "autoCheckHierarchy"; "childMapping": "childMapping"; "clipMode": "clipMode"; "columnMenuItems": "columnMenuItems"; "columnQueryMode": "columnQueryMode"; "columns": "columns"; "contextMenuItems": "contextMenuItems"; "copyHierarchyMode": "copyHierarchyMode"; "dataSource": "dataSource"; "detailTemplate": "detailTemplate"; "editSettings": "editSettings"; "enableAdaptiveUI": "enableAdaptiveUI"; "enableAltRow": "enableAltRow"; "enableAutoFill": "enableAutoFill"; "enableCollapseAll": "enableCollapseAll"; "enableColumnVirtualization": "enableColumnVirtualization"; "enableHover": "enableHover"; "enableImmutableMode": "enableImmutableMode"; "enableInfiniteScrolling": "enableInfiniteScrolling"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "enableVirtualization": "enableVirtualization"; "expandStateMapping": "expandStateMapping"; "filterSettings": "filterSettings"; "frozenColumns": "frozenColumns"; "frozenRows": "frozenRows"; "gridLines": "gridLines"; "hasChildMapping": "hasChildMapping"; "height": "height"; "idMapping": "idMapping"; "infiniteScrollSettings": "infiniteScrollSettings"; "loadChildOnDemand": "loadChildOnDemand"; "locale": "locale"; "pageSettings": "pageSettings"; "parentIdMapping": "parentIdMapping"; "printMode": "printMode"; "query": "query"; "rowDropSettings": "rowDropSettings"; "rowHeight": "rowHeight"; "rowTemplate": "rowTemplate"; "searchSettings": "searchSettings"; "selectedRowIndex": "selectedRowIndex"; "selectionSettings": "selectionSettings"; "showColumnChooser": "showColumnChooser"; "showColumnMenu": "showColumnMenu"; "sortSettings": "sortSettings"; "textWrapSettings": "textWrapSettings"; "toolbar": "toolbar"; "treeColumnIndex": "treeColumnIndex"; "width": "width"; }, { "actionBegin": "actionBegin"; "actionComplete": "actionComplete"; "actionFailure": "actionFailure"; "batchAdd": "batchAdd"; "batchCancel": "batchCancel"; "batchDelete": "batchDelete"; "beforeBatchAdd": "beforeBatchAdd"; "beforeBatchDelete": "beforeBatchDelete"; "beforeBatchSave": "beforeBatchSave"; "beforeCopy": "beforeCopy"; "beforeDataBound": "beforeDataBound"; "beforeExcelExport": "beforeExcelExport"; "beforePaste": "beforePaste"; "beforePdfExport": "beforePdfExport"; "beforePrint": "beforePrint"; "beginEdit": "beginEdit"; "cellDeselected": "cellDeselected"; "cellDeselecting": "cellDeselecting"; "cellEdit": "cellEdit"; "cellSave": "cellSave"; "cellSaved": "cellSaved"; "cellSelected": "cellSelected"; "cellSelecting": "cellSelecting"; "checkboxChange": "checkboxChange"; "collapsed": "collapsed"; "collapsing": "collapsing"; "columnDrag": "columnDrag"; "columnDragStart": "columnDragStart"; "columnDrop": "columnDrop"; "columnMenuClick": "columnMenuClick"; "columnMenuOpen": "columnMenuOpen"; "contextMenuClick": "contextMenuClick"; "contextMenuOpen": "contextMenuOpen"; "created": "created"; "dataBound": "dataBound"; "dataSourceChanged": "dataSourceChanged"; "dataStateChange": "dataStateChange"; "detailDataBound": "detailDataBound"; "excelExportComplete": "excelExportComplete"; "excelHeaderQueryCellInfo": "excelHeaderQueryCellInfo"; "excelQueryCellInfo": "excelQueryCellInfo"; "expanded": "expanded"; "expanding": "expanding"; "headerCellInfo": "headerCellInfo"; "load": "load"; "pdfExportComplete": "pdfExportComplete"; "pdfHeaderQueryCellInfo": "pdfHeaderQueryCellInfo"; "pdfQueryCellInfo": "pdfQueryCellInfo"; "printComplete": "printComplete"; "queryCellInfo": "queryCellInfo"; "recordDoubleClick": "recordDoubleClick"; "resizeStart": "resizeStart"; "resizeStop": "resizeStop"; "resizing": "resizing"; "rowDataBound": "rowDataBound"; "rowDeselected": "rowDeselected"; "rowDeselecting": "rowDeselecting"; "rowDrag": "rowDrag"; "rowDragStart": "rowDragStart"; "rowDragStartHelper": "rowDragStartHelper"; "rowDrop": "rowDrop"; "rowSelected": "rowSelected"; "rowSelecting": "rowSelecting"; "toolbarClick": "toolbarClick"; "dataSourceChange": "dataSourceChange"; }, ["toolbarTemplate", "pagerTemplate", "rowTemplate", "detailTemplate", "editSettings_template", "childColumns", "childAggregates"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TreeGridComponent, "ejs-treegrid", never, { "aggregates": "aggregates"; "allowExcelExport": "allowExcelExport"; "allowFiltering": "allowFiltering"; "allowMultiSorting": "allowMultiSorting"; "allowPaging": "allowPaging"; "allowPdfExport": "allowPdfExport"; "allowReordering": "allowReordering"; "allowResizing": "allowResizing"; "allowRowDragAndDrop": "allowRowDragAndDrop"; "allowSelection": "allowSelection"; "allowSorting": "allowSorting"; "allowTextWrap": "allowTextWrap"; "autoCheckHierarchy": "autoCheckHierarchy"; "childMapping": "childMapping"; "clipMode": "clipMode"; "columnMenuItems": "columnMenuItems"; "columnQueryMode": "columnQueryMode"; "columns": "columns"; "contextMenuItems": "contextMenuItems"; "copyHierarchyMode": "copyHierarchyMode"; "dataSource": "dataSource"; "detailTemplate": "detailTemplate"; "editSettings": "editSettings"; "enableAdaptiveUI": "enableAdaptiveUI"; "enableAltRow": "enableAltRow"; "enableAutoFill": "enableAutoFill"; "enableCollapseAll": "enableCollapseAll"; "enableColumnVirtualization": "enableColumnVirtualization"; "enableHover": "enableHover"; "enableHtmlSanitizer": "enableHtmlSanitizer"; "enableImmutableMode": "enableImmutableMode"; "enableInfiniteScrolling": "enableInfiniteScrolling"; "enablePersistence": "enablePersistence"; "enableRtl": "enableRtl"; "enableVirtualMaskRow": "enableVirtualMaskRow"; "enableVirtualization": "enableVirtualization"; "expandStateMapping": "expandStateMapping"; "filterSettings": "filterSettings"; "frozenColumns": "frozenColumns"; "frozenRows": "frozenRows"; "gridLines": "gridLines"; "hasChildMapping": "hasChildMapping"; "height": "height"; "idMapping": "idMapping"; "infiniteScrollSettings": "infiniteScrollSettings"; "loadChildOnDemand": "loadChildOnDemand"; "loadingIndicator": "loadingIndicator"; "locale": "locale"; "pageSettings": "pageSettings"; "parentIdMapping": "parentIdMapping"; "printMode": "printMode"; "query": "query"; "rowDropSettings": "rowDropSettings"; "rowHeight": "rowHeight"; "rowTemplate": "rowTemplate"; "searchSettings": "searchSettings"; "selectedRowIndex": "selectedRowIndex"; "selectionSettings": "selectionSettings"; "showColumnChooser": "showColumnChooser"; "showColumnMenu": "showColumnMenu"; "sortSettings": "sortSettings"; "textWrapSettings": "textWrapSettings"; "toolbar": "toolbar"; "treeColumnIndex": "treeColumnIndex"; "width": "width"; }, { "actionBegin": "actionBegin"; "actionComplete": "actionComplete"; "actionFailure": "actionFailure"; "batchAdd": "batchAdd"; "batchCancel": "batchCancel"; "batchDelete": "batchDelete"; "beforeBatchAdd": "beforeBatchAdd"; "beforeBatchDelete": "beforeBatchDelete"; "beforeBatchSave": "beforeBatchSave"; "beforeCopy": "beforeCopy"; "beforeDataBound": "beforeDataBound"; "beforeExcelExport": "beforeExcelExport"; "beforePaste": "beforePaste"; "beforePdfExport": "beforePdfExport"; "beforePrint": "beforePrint"; "beginEdit": "beginEdit"; "cellDeselected": "cellDeselected"; "cellDeselecting": "cellDeselecting"; "cellEdit": "cellEdit"; "cellSave": "cellSave"; "cellSaved": "cellSaved"; "cellSelected": "cellSelected"; "cellSelecting": "cellSelecting"; "checkboxChange": "checkboxChange"; "collapsed": "collapsed"; "collapsing": "collapsing"; "columnDrag": "columnDrag"; "columnDragStart": "columnDragStart"; "columnDrop": "columnDrop"; "columnMenuClick": "columnMenuClick"; "columnMenuOpen": "columnMenuOpen"; "contextMenuClick": "contextMenuClick"; "contextMenuOpen": "contextMenuOpen"; "created": "created"; "dataBound": "dataBound"; "dataSourceChanged": "dataSourceChanged"; "dataStateChange": "dataStateChange"; "detailDataBound": "detailDataBound"; "excelExportComplete": "excelExportComplete"; "excelHeaderQueryCellInfo": "excelHeaderQueryCellInfo"; "excelQueryCellInfo": "excelQueryCellInfo"; "expanded": "expanded"; "expanding": "expanding"; "headerCellInfo": "headerCellInfo"; "load": "load"; "pdfExportComplete": "pdfExportComplete"; "pdfHeaderQueryCellInfo": "pdfHeaderQueryCellInfo"; "pdfQueryCellInfo": "pdfQueryCellInfo"; "printComplete": "printComplete"; "queryCellInfo": "queryCellInfo"; "recordDoubleClick": "recordDoubleClick"; "resizeStart": "resizeStart"; "resizeStop": "resizeStop"; "resizing": "resizing"; "rowDataBound": "rowDataBound"; "rowDeselected": "rowDeselected"; "rowDeselecting": "rowDeselecting"; "rowDrag": "rowDrag"; "rowDragStart": "rowDragStart"; "rowDragStartHelper": "rowDragStartHelper"; "rowDrop": "rowDrop"; "rowSelected": "rowSelected"; "rowSelecting": "rowSelecting"; "toolbarClick": "toolbarClick"; "dataSourceChange": "dataSourceChange"; }, ["toolbarTemplate", "pagerTemplate", "rowTemplate", "detailTemplate", "editSettings_template", "childColumns", "childAggregates"], never>;
 }

package/src/treegrid/treegrid.module.d.ts

@@ -1,14 +1,15 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./treegrid.component";
-import * as i2 from "./columns.directive";
-import * as i3 from "./aggregate-columns.directive";
-import * as i4 from "./aggregates.directive";
-import * as i5 from "@angular/common";
+import * as i2 from "./stacked-column.directive";
+import * as i3 from "./columns.directive";
+import * as i4 from "./aggregate-columns.directive";
+import * as i5 from "./aggregates.directive";
+import * as i6 from "@angular/common";
 /**
  * NgModule definition for the TreeGrid component.
  */
 export declare class TreeGridModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TreeGridModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TreeGridModule, [typeof i1.TreeGridComponent, typeof i2.ColumnDirective, typeof i2.ColumnsDirective, typeof i3.AggregateColumnDirective, typeof i3.AggregateColumnsDirective, typeof i4.AggregateDirective, typeof i4.AggregatesDirective], [typeof i5.CommonModule], [typeof i1.TreeGridComponent, typeof i2.ColumnDirective, typeof i2.ColumnsDirective, typeof i3.AggregateColumnDirective, typeof i3.AggregateColumnsDirective, typeof i4.AggregateDirective, typeof i4.AggregatesDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TreeGridModule, [typeof i1.TreeGridComponent, typeof i2.StackedColumnDirective, typeof i2.StackedColumnsDirective, typeof i3.ColumnDirective, typeof i3.ColumnsDirective, typeof i4.AggregateColumnDirective, typeof i4.AggregateColumnsDirective, typeof i5.AggregateDirective, typeof i5.AggregatesDirective], [typeof i6.CommonModule], [typeof i1.TreeGridComponent, typeof i2.StackedColumnDirective, typeof i2.StackedColumnsDirective, typeof i3.ColumnDirective, typeof i3.ColumnsDirective, typeof i4.AggregateColumnDirective, typeof i4.AggregateColumnsDirective, typeof i5.AggregateDirective, typeof i5.AggregatesDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TreeGridModule>;
 }

package/styles/material3-dark.css

@@ -130,21 +130,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -164,7 +169,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -173,7 +178,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -183,8 +188,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -197,6 +202,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }

package/styles/material3.css

@@ -186,21 +186,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -220,7 +225,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -229,7 +234,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -239,8 +244,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -253,6 +258,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }

package/styles/treegrid/material3-dark.css

@@ -130,21 +130,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -164,7 +169,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -173,7 +178,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -183,8 +188,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -197,6 +202,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }