@syncfusion/ej2-angular-treegrid
Version:
Essential JS 2 TreeGrid Component for Angular
1 lines • 80.2 kB
Source Map (JSON)
{"version":3,"file":"syncfusion-ej2-angular-treegrid.mjs","sources":["../../src/treegrid/stacked-column.directive.ts","../../src/treegrid/columns.directive.ts","../../src/treegrid/aggregate-columns.directive.ts","../../src/treegrid/aggregates.directive.ts","../../src/treegrid/treegrid.component.ts","../../src/treegrid/treegrid.module.ts","../../src/treegrid/treegrid-all.module.ts","../../syncfusion-ej2-angular-treegrid.ts"],"sourcesContent":["import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\nimport { Template } from '@syncfusion/ej2-angular-base';\n\n\nlet input: string[] = ['allowEditing', 'allowFiltering', 'allowReordering', 'allowResizing', 'allowSorting', 'clipMode', 'columns', 'commands', 'customAttributes', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'hideAtMedia', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showCheckbox', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];\nlet outputs: string[] = [];\n/**\n * `e-stacked-column` directive represent the stacked column of the Angular TreeGrid.\n * It must be contained in a StackedColumns component(`e-stacked-columns`). \n * ```html\n * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'> \n * <e-columns>\n * <e-column field='ID' width='100'></e-column>\n * <e-column headerText='Details' width='100'>\n * <e-stacked-columns>\n * <e-stacked-column field='Name' width='140'></e-stacked-column>\n * </e-stacked-columns>\n * </e-column>\n * </e-columns>\n * </ejs-treegrid>\n * ```\n */\n@Directive({\n selector: 'ejs-treegrid>e-columns>e-column>e-stacked-columns>e-stacked-column',\n inputs: input,\n outputs: outputs, \n queries: {\n\n }\n})\nexport class StackedColumnDirective extends ComplexBase<StackedColumnDirective> {\n public directivePropList: any;\n\t\n\n\n /** \n * Defines the type of data stored in the column, which may be string, number, date, or other types.\n * @default null\n */\n public type: any;\n /** \n * Controls whether editing is permitted for the column. By default, all columns are editable.\n * @default true\n */\n public allowEditing: any;\n /** \n * Controls whether the column supports filtering. If set to false, users cannot filter data by this column.\n * @default true\n */\n public allowFiltering: any;\n /** \n * Enables or disables the reordering of this column via drag-and-drop. Allows for dynamic column adjustments.\n * @default true\n */\n public allowReordering: any;\n /** \n * Determines if this column can be resized. If false, the column size is fixed.\n * @default true\n */\n public allowResizing: any;\n /** \n * Specifies whether sorting is enabled for this column. Set to false to prevent sort actions.\n * @default true\n */\n public allowSorting: any;\n /** \n * Determines how overflow content is handled within a cell. Options include: \n * * `Clip`: Truncates the content. \n * * `Ellipsis`: Shows ellipsis for overflow. \n * * `EllipsisWithTooltip`: Shows ellipsis and tooltip on hover.\n * @default Syncfusion.EJ2.Grids.ClipMode.Ellipsis\n * @isenumeration true\n * @asptype Syncfusion.EJ2.Grids.ClipMode\n */\n public clipMode: any;\n /** \n * Allows for the creation of stacked headers by using multiple rows in the grid's header.\n * @default null\n */\n public columns: any;\n /** \n * Provides built-in command button options for cells. Options include Edit, Delete, Save, and Cancel. \n * Custom command button implementations are possible.\n * \n * The following code example implements the custom command column.\n *```html\n *<style type=\"text/css\" class=\"cssStyles\">\n *.details-icon:before\n *{\n * content:\"\\e74d\";\n *}\n *</style>\n *<div id=\"TreeGrid\"></div>\n *```\n *```typescript\n *var gridObj = new TreeGrid({\n *datasource: window.gridData,\n *columns : [\n * { field: 'CustomerID', headerText: 'Customer ID' },\n * { field: 'CustomerName', headerText: 'Customer Name' },\n * {commands: [{buttonOption:{content: 'Details', click: onClick, cssClass: details-icon}}], headerText: 'Customer Details'}\n *]\n *gridObj.appendTo(\"#TreeGrid\");\n *```\n * \n * @default null\n */\n public commands: any;\n /** \n * Enables the addition of CSS styles and attributes for the content cells in a particular column.\n * @default null\n */\n public customAttributes: any;\n /** \n * Sets default values when new records are added to the TreeGrid involving this column.\n * @default null\n */\n public defaultValue: any;\n /** \n * If set to `true`, the HTML content within header and content cells is encoded to prevent injection attacks.\n * @default true\n */\n public disableHtmlEncode: any;\n /** \n * Displays the column value as a checkbox instead of a Boolean value when set to `true`.\n * @default false\n */\n public displayAsCheckBox: any;\n /** \n * Allows customizing the default edit cell through the `IEditCell` object for more control over editing.\n * @default {}\n */\n public edit: any;\n /** \n * Specifies the component type used for editing cells within this column.\n * @default 'stringedit'\n */\n public editType: any;\n /** \n * Specifies the field name in the data source to which the column is bound. This field is used for operations like sorting and filtering. \n * The field name must be a valid JavaScript identifier, beginning with a letter and avoiding spaces and special characters.\n * @default 'undefined'\n */\n public field: any;\n /** \n * Customizes filter options for the column, enabling specialized filtering functionality.\n * @default null\n */\n public filter: any;\n /** \n * Allows for a custom component within the filter bar, facilitating advanced filter interfaces. \n * Includes create and read functions for custom component management.\n * \n * ```html\n *<div id=\"TreeGrid\"></div>\n *```\n *```typescript\n *let gridObj: TreeGrid = new TreeGrid({\n *dataSource: filterData,\n *columns: [\n * { field: 'OrderID', headerText: 'Order ID' },\n * {\n * field: 'EmployeeID', filterBarTemplate: {\n * create: (args: { element: Element, column: Column }) => {\n * let input: HTMLInputElement = document.createElement('input');\n * input.id = 'EmployeeID';\n * input.type = 'text';\n * return input;\n * },\n * write: (args: { element: Element, column: Column }) => {\n * args.element.addEventListener('input', args.column.filterBarTemplate.read as EventListener);\n * },\n * read: (args: { element: HTMLInputElement, columnIndex: number, column: Column }) => {\n * gridObj.filterByColumn(args.element.id, 'equal', args.element.value);\n * }\n * }\n *}],\n * allowFiltering: true\n *});\n *gridObj.appendTo('#TreeGrid');\n *```\n * \n * @default null\n */\n public filterBarTemplate: any;\n /** \n * Formats the displayed value of the column without affecting the underlying data. Supports standard and custom formats for numbers and dates.\n * \n * References for [number](https://ej2.syncfusion.com/documentation/common/internationalization/#supported-format-string)\n *and [date](https://ej2.syncfusion.com/documentation/common/internationalization#date-formatting) formats. \n * @default null\n * @asptype string\n */\n public format: any;\n /** \n * Allows for custom cell content formatting using an external method, executed prior to rendering.\n * @default null\n */\n public formatter: any;\n /** \n * Determines which side (left, right, or center) the column should be frozen on.\n * @default Syncfusion.EJ2.Grids.FreezeDirection.None\n * @isenumeration true\n * @asptype Syncfusion.EJ2.Grids.FreezeDirection\n */\n public freeze: any;\n /** \n * Specifies the text displayed in the column header. If omitted, the `field` value is used as the header text.\n * @default 'undefined'\n */\n public headerText: any;\n /** \n * Aligns the text in the column header. By default, the alignment corresponds to other content alignments.\n * @default null\n * @aspdefaultvalueignore \n * @isenumeration true\n * @asptype Syncfusion.EJ2.Grids.TextAlign\n */\n public headerTextAlign: any;\n /** \n * Adjusts column visibility based on [Media Queries](http://cssmediaqueries.com/what-are-css-media-queries.html). Accepts valid CSS media query strings for responsive adjustments.\n * @default 'undefined'\n */\n public hideAtMedia: any;\n /** \n * Allows the column to be frozen, keeping it stationary while scrolling horizontally through the grid.\n * @default false\n */\n public isFrozen: any;\n /** \n * Identifies the column as an identity column in database terms, if set to `true`.\n * @default false\n */\n public isIdentity: any;\n /** \n * Identifies the column as a primary key if set to `true`, enforcing uniqueness.\n * @default false\n */\n public isPrimaryKey: any;\n /** \n * Prevents column reordering when set to true, locking the column into a set position.\n * @default false\n */\n public lockColumn: any;\n /** \n * Defines the maximum allowable width of the column in pixels or as a percentage, preventing resizing beyond this limit.\n * @default 'undefined'\n */\n public maxWidth: any;\n /** \n * Determines the minimum width of the column in pixels or percentage. This ensures the column does not shrink below this size.\n * @default 'undefined'\n */\n public minWidth: any;\n /** \n * Displays checkboxes in the column when enabled, allowing for selections and certain operations.\n * @default false\n */\n public showCheckbox: any;\n /** \n * Decides if the column menu should be available, providing options for column customization.\n * @default true\n */\n public showColumnMenu: any;\n /** \n * Determines whether the column should appear in the Column Chooser. Set to false to exclude it.\n * @default true\n */\n public showInColumnChooser: any;\n /** \n * Provides a custom sort comparer property to control how sorting is handled for this column's data.\n * @default 'undefined'\n */\n public sortComparer: any;\n /** \n * Specifies the horizontal alignment for the column content and header. Options include alignment to the left, center, or right.\n * @default Syncfusion.EJ2.Grids.TextAlign.Left\n * @isenumeration true\n * @asptype Syncfusion.EJ2.Grids.TextAlign\n */\n public textAlign: any;\n /** \n * Retrieves the unique identifier for the column. This UID is used internally to reference and manipulate the column.\n * @default 'undefined'\n */\n public uid: any;\n /** \n * Establishes validation rules to ensure data integrity during creation and updates.\n * @default null\n */\n public validationRules: any;\n /** \n * Applies custom cell values using an external function, allowing for dynamic display adjustments.\n * @default null\n */\n public valueAccessor: any;\n /** \n * Toggles the visibility of the column. Set to false to hide the column from view. Columns are visible by default.\n * @default true\n */\n public visible: any;\n /** \n * Sets the column's width in pixels or as a percentage. This defines how the column will occupy space in the grid.\n * @default 'undefined'\n */\n public width: any;\n /** \n * Customizes the rendering of cell content using either a template string or HTML element ID.\n * @default null\n * @asptype string\n */\n @ContentChild('template')\n @Template()\n public template: any;\n /** \n * Customizes the header content with a template, defined as a string or an HTML element ID.\n * @default null\n * @asptype string\n */\n @ContentChild('headerTemplate')\n @Template()\n public headerTemplate: any;\n @ContentChild('filterItemTemplate')\n @Template()\n public filter_itemTemplate: any;\n /** \n * Specifies a custom template or UI for filtering within this column, utilizing either string templates or HTML element IDs.\n * @aspignore \n */\n @ContentChild('filterTemplate')\n @Template()\n public filterTemplate: any;\n @ContentChild('commandsTemplate')\n @Template()\n public commandsTemplate: any;\n /** \n * Provides a template for editing cells in this column, supporting either a template string or an HTML element ID.\n * @aspignore \n */\n @ContentChild('editTemplate')\n @Template()\n public editTemplate: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * StackedColumn Array Directive\n * @private\n */\n@Directive({\n selector: 'ejs-treegrid>e-columns>e-column>e-stacked-columns',\n queries: {\n children: new ContentChildren(StackedColumnDirective)\n },\n})\nexport class StackedColumnsDirective extends ArrayBase<StackedColumnsDirective> {\n constructor() {\n super('columns');\n }\n}","import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\nimport { Template } from '@syncfusion/ej2-angular-base';\nimport { StackedColumnsDirective } from './stacked-column.directive';\n\nlet input: string[] = ['allowEditing', 'allowFiltering', 'allowReordering', 'allowResizing', 'allowSorting', 'clipMode', 'columns', 'commands', 'customAttributes', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'hideAtMedia', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showCheckbox', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];\nlet outputs: string[] = [];\n/**\n * `e-column` directive represent a column of the Angular TreeGrid. \n * It must be contained in a TreeGrid component(`ejs-treegrid`). \n * ```html\n * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'> \n * <e-columns>\n * <e-column field='ID' width='100'></e-column>\n * <e-column field='name' headerText='Name' width='100'></e-column>\n * </e-columns>\n * </ejs-treegrid>\n * ```\n */\n@Directive({\n selector: 'ejs-treegrid>e-columns>e-column',\n inputs: input,\n outputs: outputs, \n queries: {\n childColumns: new ContentChild(StackedColumnsDirective)\n }\n})\nexport class ColumnDirective extends ComplexBase<ColumnDirective> {\n public directivePropList: any;\n\t\n public childColumns: any;\n public tags: string[] = ['columns'];\n /** \n * Defines the type of data stored in the column, which may be string, number, date, or other types.\n * @default null\n */\n public type: any;\n /** \n * Controls whether editing is permitted for the column. By default, all columns are editable.\n * @default true\n */\n public allowEditing: any;\n /** \n * Controls whether the column supports filtering. If set to false, users cannot filter data by this column.\n * @default true\n */\n public allowFiltering: any;\n /** \n * Enables or disables the reordering of this column via drag-and-drop. Allows for dynamic column adjustments.\n * @default true\n */\n public allowReordering: any;\n /** \n * Determines if this column can be resized. If false, the column size is fixed.\n * @default true\n */\n public allowResizing: any;\n /** \n * Specifies whether sorting is enabled for this column. Set to false to prevent sort actions.\n * @default true\n */\n public allowSorting: any;\n /** \n * Determines how overflow content is handled within a cell. Options include: \n * * `Clip`: Truncates the content. \n * * `Ellipsis`: Shows ellipsis for overflow. \n * * `EllipsisWithTooltip`: Shows ellipsis and tooltip on hover.\n * @default Syncfusion.EJ2.Grids.ClipMode.Ellipsis\n * @isenumeration true\n * @asptype Syncfusion.EJ2.Grids.ClipMode\n */\n public clipMode: any;\n /** \n * Allows for the creation of stacked headers by using multiple rows in the grid's header.\n * @default null\n */\n public columns: any;\n /** \n * Provides built-in command button options for cells. Options include Edit, Delete, Save, and Cancel. \n * Custom command button implementations are possible.\n * \n * The following code example implements the custom command column.\n *```html\n *<style type=\"text/css\" class=\"cssStyles\">\n *.details-icon:before\n *{\n * content:\"\\e74d\";\n *}\n *</style>\n *<div id=\"TreeGrid\"></div>\n *```\n *```typescript\n *var gridObj = new TreeGrid({\n *datasource: window.gridData,\n *columns : [\n * { field: 'CustomerID', headerText: 'Customer ID' },\n * { field: 'CustomerName', headerText: 'Customer Name' },\n * {commands: [{buttonOption:{content: 'Details', click: onClick, cssClass: details-icon}}], headerText: 'Customer Details'}\n *]\n *gridObj.appendTo(\"#TreeGrid\");\n *```\n * \n * @default null\n */\n public commands: any;\n /** \n * Enables the addition of CSS styles and attributes for the content cells in a particular column.\n * @default null\n */\n public customAttributes: any;\n /** \n * Sets default values when new records are added to the TreeGrid involving this column.\n * @default null\n */\n public defaultValue: any;\n /** \n * If set to `true`, the HTML content within header and content cells is encoded to prevent injection attacks.\n * @default true\n */\n public disableHtmlEncode: any;\n /** \n * Displays the column value as a checkbox instead of a Boolean value when set to `true`.\n * @default false\n */\n public displayAsCheckBox: any;\n /** \n * Allows customizing the default edit cell through the `IEditCell` object for more control over editing.\n * @default {}\n */\n public edit: any;\n /** \n * Specifies the component type used for editing cells within this column.\n * @default 'stringedit'\n */\n public editType: any;\n /** \n * Specifies the field name in the data source to which the column is bound. This field is used for operations like sorting and filtering. \n * The field name must be a valid JavaScript identifier, beginning with a letter and avoiding spaces and special characters.\n * @default 'undefined'\n */\n public field: any;\n /** \n * Customizes filter options for the column, enabling specialized filtering functionality.\n * @default null\n */\n public filter: any;\n /** \n * Allows for a custom component within the filter bar, facilitating advanced filter interfaces. \n * Includes create and read functions for custom component management.\n * \n * ```html\n *<div id=\"TreeGrid\"></div>\n *```\n *```typescript\n *let gridObj: TreeGrid = new TreeGrid({\n *dataSource: filterData,\n *columns: [\n * { field: 'OrderID', headerText: 'Order ID' },\n * {\n * field: 'EmployeeID', filterBarTemplate: {\n * create: (args: { element: Element, column: Column }) => {\n * let input: HTMLInputElement = document.createElement('input');\n * input.id = 'EmployeeID';\n * input.type = 'text';\n * return input;\n * },\n * write: (args: { element: Element, column: Column }) => {\n * args.element.addEventListener('input', args.column.filterBarTemplate.read as EventListener);\n * },\n * read: (args: { element: HTMLInputElement, columnIndex: number, column: Column }) => {\n * gridObj.filterByColumn(args.element.id, 'equal', args.element.value);\n * }\n * }\n *}],\n * allowFiltering: true\n *});\n *gridObj.appendTo('#TreeGrid');\n *```\n * \n * @default null\n */\n public filterBarTemplate: any;\n /** \n * Formats the displayed value of the column without affecting the underlying data. Supports standard and custom formats for numbers and dates.\n * \n * References for [number](https://ej2.syncfusion.com/documentation/common/internationalization/#supported-format-string)\n *and [date](https://ej2.syncfusion.com/documentation/common/internationalization#date-formatting) formats. \n * @default null\n * @asptype string\n */\n public format: any;\n /** \n * Allows for custom cell content formatting using an external method, executed prior to rendering.\n * @default null\n */\n public formatter: any;\n /** \n * Determines which side (left, right, or center) the column should be frozen on.\n * @default Syncfusion.EJ2.Grids.FreezeDirection.None\n * @isenumeration true\n * @asptype Syncfusion.EJ2.Grids.FreezeDirection\n */\n public freeze: any;\n /** \n * Specifies the text displayed in the column header. If omitted, the `field` value is used as the header text.\n * @default 'undefined'\n */\n public headerText: any;\n /** \n * Aligns the text in the column header. By default, the alignment corresponds to other content alignments.\n * @default null\n * @aspdefaultvalueignore \n * @isenumeration true\n * @asptype Syncfusion.EJ2.Grids.TextAlign\n */\n public headerTextAlign: any;\n /** \n * Adjusts column visibility based on [Media Queries](http://cssmediaqueries.com/what-are-css-media-queries.html). Accepts valid CSS media query strings for responsive adjustments.\n * @default 'undefined'\n */\n public hideAtMedia: any;\n /** \n * Allows the column to be frozen, keeping it stationary while scrolling horizontally through the grid.\n * @default false\n */\n public isFrozen: any;\n /** \n * Identifies the column as an identity column in database terms, if set to `true`.\n * @default false\n */\n public isIdentity: any;\n /** \n * Identifies the column as a primary key if set to `true`, enforcing uniqueness.\n * @default false\n */\n public isPrimaryKey: any;\n /** \n * Prevents column reordering when set to true, locking the column into a set position.\n * @default false\n */\n public lockColumn: any;\n /** \n * Defines the maximum allowable width of the column in pixels or as a percentage, preventing resizing beyond this limit.\n * @default 'undefined'\n */\n public maxWidth: any;\n /** \n * Determines the minimum width of the column in pixels or percentage. This ensures the column does not shrink below this size.\n * @default 'undefined'\n */\n public minWidth: any;\n /** \n * Displays checkboxes in the column when enabled, allowing for selections and certain operations.\n * @default false\n */\n public showCheckbox: any;\n /** \n * Decides if the column menu should be available, providing options for column customization.\n * @default true\n */\n public showColumnMenu: any;\n /** \n * Determines whether the column should appear in the Column Chooser. Set to false to exclude it.\n * @default true\n */\n public showInColumnChooser: any;\n /** \n * Provides a custom sort comparer property to control how sorting is handled for this column's data.\n * @default 'undefined'\n */\n public sortComparer: any;\n /** \n * Specifies the horizontal alignment for the column content and header. Options include alignment to the left, center, or right.\n * @default Syncfusion.EJ2.Grids.TextAlign.Left\n * @isenumeration true\n * @asptype Syncfusion.EJ2.Grids.TextAlign\n */\n public textAlign: any;\n /** \n * Retrieves the unique identifier for the column. This UID is used internally to reference and manipulate the column.\n * @default 'undefined'\n */\n public uid: any;\n /** \n * Establishes validation rules to ensure data integrity during creation and updates.\n * @default null\n */\n public validationRules: any;\n /** \n * Applies custom cell values using an external function, allowing for dynamic display adjustments.\n * @default null\n */\n public valueAccessor: any;\n /** \n * Toggles the visibility of the column. Set to false to hide the column from view. Columns are visible by default.\n * @default true\n */\n public visible: any;\n /** \n * Sets the column's width in pixels or as a percentage. This defines how the column will occupy space in the grid.\n * @default 'undefined'\n */\n public width: any;\n /** \n * Customizes the rendering of cell content using either a template string or HTML element ID.\n * @default null\n * @asptype string\n */\n @ContentChild('template')\n @Template()\n public template: any;\n /** \n * Customizes the header content with a template, defined as a string or an HTML element ID.\n * @default null\n * @asptype string\n */\n @ContentChild('headerTemplate')\n @Template()\n public headerTemplate: any;\n @ContentChild('filterItemTemplate')\n @Template()\n public filter_itemTemplate: any;\n /** \n * Specifies a custom template or UI for filtering within this column, utilizing either string templates or HTML element IDs.\n * @aspignore \n */\n @ContentChild('filterTemplate')\n @Template()\n public filterTemplate: any;\n @ContentChild('commandsTemplate')\n @Template()\n public commandsTemplate: any;\n /** \n * Provides a template for editing cells in this column, supporting either a template string or an HTML element ID.\n * @aspignore \n */\n @ContentChild('editTemplate')\n @Template()\n public editTemplate: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * Column Array Directive\n * @private\n */\n@Directive({\n selector: 'ejs-treegrid>e-columns',\n queries: {\n children: new ContentChildren(ColumnDirective)\n },\n})\nexport class ColumnsDirective extends ArrayBase<ColumnsDirective> {\n constructor() {\n super('columns');\n }\n}","import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\nimport { Template } from '@syncfusion/ej2-angular-base';\n\n\nlet input: string[] = ['columnName', 'customAggregate', 'field', 'footerTemplate', 'format', 'type'];\nlet outputs: string[] = [];\n/**\n * `e-aggregate->e-column` directive represent a aggregate column of the Angular TreeGrid. \n * ```html\n * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'> \n * <e-columns>\n * <e-column field='ID' width='100'></e-column>\n * <e-column field='name' headerText='Name' width='100'></e-column>\n * </e-columns>\n * <e-aggregates>\n * <e-aggregate>\n * <e-columns>\n * <e-column field='ID' type='Min'></e-column>\n * </e-columns>\n * </e-aggregate>\n * </e-aggregates>\n * </ejs-treegrid>\n * ```\n */\n@Directive({\n selector: 'ejs-treegrid>e-aggregates>e-aggregate>e-columns>e-column',\n inputs: input,\n outputs: outputs, \n queries: {\n\n }\n})\nexport class AggregateColumnDirective extends ComplexBase<AggregateColumnDirective> {\n public directivePropList: any;\n\t\n\n\n /** \n * Defines the aggregate type(s) for a particular column. \n * To apply multiple aggregates to a single column, specify the `type` as an array. \n * Available aggregate types include: \n * * `sum`: Calculates the sum of all values in a column. \n * * `average`: Computes the average of the column values. \n * * `max`: Finds the maximum value in a column. \n * * `min`: Finds the minimum value in a column. \n * * `count`: Counts the number of records. \n * * `falsecount`: Counts the number of false values. \n * * `truecount`: Counts the number of true values. \n * * `custom`: Allows for a custom aggregate function.\n * \n * Use `custom` to specify a custom aggregation.\n * \n * @asptype string\n * @default null\n */\n public type: any;\n /** \n * Specifies the column name to display the aggregate value. If not defined, the `field` name is used by default.\n * @default null\n */\n public columnName: any;\n /** \n * Defines a custom function to calculate the aggregate value. The `type` must be set to `custom`. \n * Use the custom value as `${custom}` in templates. \n * * `Total aggregation`: The custom function is called with the entire dataset and the current `AggregateColumn` object. \n * * `Group aggregation`: It is called with the current group details and the `AggregateColumn` object.\n * @default null\n */\n public customAggregate: any;\n /** \n * Specifies the column name on which to perform the aggregation.\n * @default null\n */\n public field: any;\n /** \n * Specifies the format to be applied to the calculated aggregate value before display. \n * Supports both standard and custom formats for numbers and dates. \n * Refer to the Syncfusion documentation for [number](https://ej2.syncfusion.com/documentation/common/internationalization/#supported-format-string) \n * and [date](https://ej2.syncfusion.com/documentation/common/internationalization#date-formatting) formats.\n * @asptype string\n * @default null\n */\n public format: any;\n /** \n * Defines a template for the footer cell of the aggregate column. \n * Use the aggregate `type` names within the template to access aggregate values.\n * @default null\n * @asptype string\n\n */\n @ContentChild('footerTemplate')\n @Template()\n public footerTemplate: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * AggregateColumn Array Directive\n * @private\n */\n@Directive({\n selector: 'ejs-treegrid>e-aggregates>e-aggregate>e-columns',\n queries: {\n children: new ContentChildren(AggregateColumnDirective)\n },\n})\nexport class AggregateColumnsDirective extends ArrayBase<AggregateColumnsDirective> {\n constructor() {\n super('columns');\n }\n}","import { Directive, ViewContainerRef, ContentChildren, ContentChild } from '@angular/core';\nimport { ComplexBase, ArrayBase, setValue } from '@syncfusion/ej2-angular-base';\n\nimport { AggregateColumnsDirective } from './aggregate-columns.directive';\n\nlet input: string[] = ['columns', 'showChildSummary'];\nlet outputs: string[] = [];\n/**\n * `e-aggregate` directive represent a aggregate row of the Angular TreeGrid. \n * It must be contained in a TreeGrid component(`ejs-treegrid`). \n * ```html\n * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'> \n * <e-columns>\n * <e-column field='ID' width='100'></e-column>\n * <e-column field='name' headerText='Name' width='100'></e-column>\n * </e-columns>\n * <e-aggregates>\n * <e-aggregate>\n * <e-columns>\n * <e-column field='ID' type='Min'></e-column>\n * </e-columns>\n * </e-aggregate>\n * </e-aggregates>\n * </ejs-treegrid>\n * ```\n */\n@Directive({\n selector: 'ejs-treegrid>e-aggregates>e-aggregate',\n inputs: input,\n outputs: outputs, \n queries: {\n childColumns: new ContentChild(AggregateColumnsDirective)\n }\n})\nexport class AggregateDirective extends ComplexBase<AggregateDirective> {\n public directivePropList: any;\n\t\n public childColumns: any;\n public tags: string[] = ['columns'];\n /** \n * Configures the collection of aggregate columns.\n * @default []\n */\n public columns: any;\n /** \n * Determines whether to display child summaries for each parent row.\n */\n public showChildSummary: any;\n\n constructor(private viewContainerRef:ViewContainerRef) {\n super();\n setValue('currentInstance', this, this.viewContainerRef);\n this.registerEvents(outputs);\n this.directivePropList = input;\n }\n}\n\n/**\n * Aggregate Array Directive\n * @private\n */\n@Directive({\n selector: 'ejs-treegrid>e-aggregates',\n queries: {\n children: new ContentChildren(AggregateDirective)\n },\n})\nexport class AggregatesDirective extends ArrayBase<AggregatesDirective> {\n constructor() {\n super('aggregates');\n }\n}","import { Component, ElementRef, ViewContainerRef, ChangeDetectionStrategy, QueryList, Renderer2, Injector, ValueProvider, ContentChild } from '@angular/core';\nimport { ComponentBase, IComponentBase, applyMixins, ComponentMixins, PropertyCollectionInfo, setValue } from '@syncfusion/ej2-angular-base';\nimport { TreeGrid } from '@syncfusion/ej2-treegrid';\nimport { Template } from '@syncfusion/ej2-angular-base';\nimport { ColumnsDirective } from './columns.directive';\nimport { AggregatesDirective } from './aggregates.directive';\n\nexport const inputs: string[] = ['aggregates','allowExcelExport','allowFiltering','allowMultiSorting','allowPaging','allowPdfExport','allowReordering','allowResizing','allowRowDragAndDrop','allowSelection','allowSorting','allowTextWrap','autoCheckHierarchy','childMapping','clipMode','columnMenuItems','columnQueryMode','columns','contextMenuItems','copyHierarchyMode','currencyCode','dataSource','detailTemplate','editSettings','enableAdaptiveUI','enableAltRow','enableAutoFill','enableCollapseAll','enableColumnVirtualization','enableHover','enableHtmlSanitizer','enableImmutableMode','enableInfiniteScrolling','enablePersistence','enableRtl','enableVirtualMaskRow','enableVirtualization','expandStateMapping','filterSettings','frozenColumns','frozenRows','gridLines','hasChildMapping','height','idMapping','infiniteScrollSettings','loadChildOnDemand','loadingIndicator','locale','pageSettings','parentIdMapping','printMode','query','rowDropSettings','rowHeight','rowTemplate','searchSettings','selectedRowIndex','selectionSettings','showColumnChooser','showColumnMenu','sortSettings','textWrapSettings','toolbar','treeColumnIndex','width'];\nexport const outputs: string[] = ['actionBegin','actionComplete','actionFailure','batchAdd','batchCancel','batchDelete','beforeBatchAdd','beforeBatchDelete','beforeBatchSave','beforeCopy','beforeDataBound','beforeExcelExport','beforePaste','beforePdfExport','beforePrint','beginEdit','cellDeselected','cellDeselecting','cellEdit','cellSave','cellSaved','cellSelected','cellSelecting','checkboxChange','collapsed','collapsing','columnDrag','columnDragStart','columnDrop','columnMenuClick','columnMenuOpen','contextMenuClick','contextMenuOpen','created','dataBound','dataSourceChanged','dataStateChange','detailDataBound','excelExportComplete','excelHeaderQueryCellInfo','excelQueryCellInfo','expanded','expanding','headerCellInfo','load','pdfExportComplete','pdfHeaderQueryCellInfo','pdfQueryCellInfo','printComplete','queryCellInfo','recordDoubleClick','resizeStart','resizeStop','resizing','rowDataBound','rowDeselected','rowDeselecting','rowDrag','rowDragStart','rowDragStartHelper','rowDrop','rowSelected','rowSelecting','toolbarClick','dataSourceChange'];\nexport const twoWays: string[] = ['dataSource'];\n\n/**\n * `ejs-treegrid` represents the Angular TreeTreeGrid Component.\n * ```html\n * <ejs-treegrid [dataSource]='data' allowPaging='true' allowSorting='true'></ejs-treegrid>\n * ```\n */\n@Component({\n selector: 'ejs-treegrid',\n inputs: inputs,\n outputs: outputs,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n queries: {\n childColumns: new ContentChild(ColumnsDirective), \n childAggregates: new ContentChild(AggregatesDirective)\n }\n})\n@ComponentMixins([ComponentBase])\nexport class TreeGridComponent extends TreeGrid implements IComponentBase {\n public context : any;\n public tagObjects: any;\n\tactionBegin: any;\n\tactionComplete: any;\n\tactionFailure: any;\n\tbatchAdd: any;\n\tbatchCancel: any;\n\tbatchDelete: any;\n\tbeforeBatchAdd: any;\n\tbeforeBatchDelete: any;\n\tbeforeBatchSave: any;\n\tbeforeCopy: any;\n\tbeforeDataBound: any;\n\tbeforeExcelExport: any;\n\tbeforePaste: any;\n\tbeforePdfExport: any;\n\tbeforePrint: any;\n\tbeginEdit: any;\n\tcellDeselected: any;\n\tcellDeselecting: any;\n\tcellEdit: any;\n\tcellSave: any;\n\tcellSaved: any;\n\tcellSelected: any;\n\tcellSelecting: any;\n\tcheckboxChange: any;\n\tcollapsed: any;\n\tcollapsing: any;\n\tcolumnDrag: any;\n\tcolumnDragStart: any;\n\tcolumnDrop: any;\n\tcolumnMenuClick: any;\n\tcolumnMenuOpen: any;\n\tcontextMenuClick: any;\n\tcontextMenuOpen: any;\n\tcreated: any;\n\tdataBound: any;\n\tdataSourceChanged: any;\n\tdataStateChange: any;\n\tdetailDataBound: any;\n\texcelExportComplete: any;\n\texcelHeaderQueryCellInfo: any;\n\texcelQueryCellInfo: any;\n\texpanded: any;\n\texpanding: any;\n\theaderCellInfo: any;\n\tload: any;\n\tpdfExportComplete: any;\n\tpdfHeaderQueryCellInfo: any;\n\tpdfQueryCellInfo: any;\n\tprintComplete: any;\n\tqueryCellInfo: any;\n\trecordDoubleClick: any;\n\tresizeStart: any;\n\tresizeStop: any;\n\tresizing: any;\n\trowDataBound: any;\n\trowDeselected: any;\n\trowDeselecting: any;\n\trowDrag: any;\n\trowDragStart: any;\n\trowDragStartHelper: any;\n\trowDrop: any;\n\trowSelected: any;\n\trowSelecting: any;\n\ttoolbarClick: any;\n\tpublic dataSourceChange: any;\n public childColumns: QueryList<ColumnsDirective>;\n public childAggregates: QueryList<AggregatesDirective>;\n public tags: string[] = ['columns', 'aggregates'];\n @ContentChild('toolbarTemplate')\n @Template()\n public toolbarTemplate: any;\n @ContentChild('pagerTemplate')\n @Template()\n public pagerTemplate: any;\n /** \n * The row template that renders customized rows from the given template. \n * By default, TreeGrid renders a table row for every data source item. \n * > * It accepts either [template string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) \n * or HTML element ID. \n * > * The row template must be a table row.\n * \n * > Check the [Row Template](../../treegrid/row) customization.\n * \n * @asptype string\n */\n @ContentChild('rowTemplate')\n @Template()\n public rowTemplate: any;\n /** \n * The detail template allows you to show or hide additional information about a particular row.\n * \n * > It accepts either the [template string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)\n *or the HTML element ID.\n * \n * @asptype string\n */\n @ContentChild('detailTemplate')\n @Template()\n public detailTemplate: any;\n @ContentChild('editSettingsTemplate')\n @Template()\n public editSettings_template: any;\n\n constructor(private ngEle: ElementRef, private srenderer: Renderer2, private viewContainerRef:ViewContainerRef, private injector: Injector) {\n super();\n this.element = this.ngEle.nativeElement;\n this.injectedModules = this.injectedModules || [];\n try {\n let mod = this.injector.get('TreeGridFilter');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridPage');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridSort');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridReorder');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridToolbar');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridAggregate');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridResize');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridColumnMenu');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridExcelExport');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridPdfExport');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridCommandColumn');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridContextMenu');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridEdit');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridSelection');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridVirtualScroll');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridDetailRow');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridRowDD');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridFreeze');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridColumnChooser');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridLogger');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r try {\n let mod = this.injector.get('TreeGridInfiniteScroll');\n if(this.injectedModules.indexOf(mod) === -1) {\n this.injectedModules.push(mod)\n }\n } catch { }\n\r\n this.registerEvents(outputs);\n this.addTwoWay.call(this, twoWays);\n setValue('currentInstance', this, this.viewContainerRef);\n this.context = new ComponentBase();\n }\n\n public ngOnInit() {\n this.context.ngOnInit(this);\n }\n\n public ngAfterViewInit(): void {\n this.context.ngAfterViewInit(this);\n }\n\n public ngOnDestroy(): void {\n this.context.ngOnDestroy(this);\n }\n\n public ngAfterContentChecked(): void {\n this.tagObjects[0].instance = this.childColumns;\n if (this.childAggregates) {\n this.tagObjects[1].instance = this.childAggregates as any;\n }\n this.context.ngAfterContentChecked(this);\n }\n\n public registerEvents: (eventList: string[]) => void;\n public addTwoWay: (propList: string[]) => void;\n}\n\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { StackedColumnDirective, StackedColumnsDirective } from './stacked-column.directive';\nimport { ColumnDirective, ColumnsDirective } from './columns.directive';\nimport { AggregateColumnDirective, AggregateColumnsDirective } from './aggregate-columns.directive';\nimport { AggregateDirective, AggregatesDirective } from './aggregates.directive';\nimport { TreeGridComponent } from './treegrid.component';\n\n/**\n * NgModule definition for the TreeGrid component.\n */\n@NgModule({\n imports: [CommonModule],\n declarations: [\n TreeGridComponent,\n StackedColumnDirective,\n StackedColumnsDirective,\n ColumnDirective,\n ColumnsDirective,\n AggregateColumnDirective,\n AggregateColumnsDirective,\n AggregateDirective,\n AggregatesDirective\n ],\n exports: [\n TreeGridComponent,\n StackedColumnDirective,\n StackedColumnsDirective,\n ColumnDirective,\n ColumnsDirective,\n AggregateColumnDirective,\n AggregateColumnsDirective,\n AggregateDirective,\n AggregatesDirective\n ]\n})\nexport class TreeGridModule { }","import { NgModule, ValueProvider } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { StackedColumnDirective, StackedColumnsDirective } from './stacked-column.directive';\nimport { ColumnDirective, ColumnsDirective } from './columns.directive';\nimport { AggregateColumnDirective, AggregateColumnsDirective } from './aggregate-columns.directive';\nimport { AggregateDirective, AggregatesDirective } from './aggregates.directive';\nimport { TreeGridComponent } from './treegrid.component';\nimport { TreeGridModule } from './treegrid.module';\nimport {Filter, Page, Sort, Reorder, Toolbar, Aggregate, Resize, ColumnMenu, ExcelExport, PdfExport, CommandColumn, ContextMenu, Edit, Selection, VirtualScroll, DetailRow, RowDD, Freeze, ColumnChooser, Logger, InfiniteScroll} from '@syncfusion/ej2-treegrid'\n\n\nexport const FilterService: ValueProvider = { provide: 'TreeGridFilter', useValue: Filter};\nexport const PageService: ValueProvider = { provide: 'TreeGridPage', useValue: Page};\nexport const SortService: ValueProvider = { provide: 'TreeGridSort', useValue: Sort};\nexport const ReorderService: ValueProvider = { provide: 'TreeGridReorder', useValue: Reorder};\nexport const ToolbarService: ValueProvider = { provide: 'TreeGridToolbar', useValue: Toolbar};\nexport const AggregateService: ValueProvider = { provide: 'TreeGridAggregate', useValue: Aggregate};\nexport const ResizeServi