@syncfusion/ej2-angular-grids
Version:
Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel. for Angular
1 lines • 105 kB
Source Map (JSON)
{"version":3,"file":"syncfusion-ej2-angular-grids.mjs","sources":["../../src/grid/stacked-column.directive.ts","../../src/grid/columns.directive.ts","../../src/grid/aggregate-columns.directive.ts","../../src/grid/aggregates.directive.ts","../../src/grid/grid.component.ts","../../src/grid/grid.module.ts","../../src/grid/grid-all.module.ts","../../src/pager/pager.component.ts","../../src/pager/pager.module.ts","../../src/pager/pager-all.module.ts","../../syncfusion-ej2-angular-grids.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', 'allowGrouping', 'allowReordering', 'allowResizing', 'allowSearching', 'allowSorting', 'autoFit', 'clipMode', 'columns', 'commands', 'customAttributes', 'dataSource', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'enableGroupByFormat', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'foreignKeyField', 'foreignKeyValue', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'headerValueAccessor', 'hideAtMedia', 'index', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'templateOptions', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];\nlet outputs: string[] = [];\n/**\n * `e-stacked-column` directive represent the stacked column of the Angular Grid.\n * It must be contained in a StackedColumns component(`e-stacked-columns`). \n * ```html\n * <ejs-grid [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-grid>\n * ```\n */\n@Directive({\n selector: 'ejs-grid>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 data type of the column.\n * @default null\n */\n public type: any;\n /** \n * If `allowEditing` set to false, then it disables editing of a particular column. \n * By default all columns are editable.\n * @default true\n */\n public allowEditing: any;\n /** \n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column. \n * By default all columns are filterable.\n * @default true\n */\n public allowFiltering: any;\n /** \n * If `allowGrouping` set to false, then it disables grouping of a particular column. \n * By default all columns are groupable.\n * @default true\n */\n public allowGrouping: any;\n /** \n * If `allowReordering` set to false, then it disables reorder of a particular column. \n * By default all columns can be reorder.\n * @default true\n */\n public allowReordering: any;\n /** \n * If `allowResizing` set to false, it disables resize option of a particular column.\n * @default true\n */\n public allowResizing: any;\n /** \n * If `allowSearching` set to false, then it disables Searching of a particular column. \n * By default all columns allow Searching.\n * @default true\n */\n public allowSearching: any;\n /** \n * If `allowSorting` set to false, then it disables sorting option of a particular column. \n * By default all columns are sortable.\n * @default true\n */\n public allowSorting: any;\n /** \n * If `autoFit` set to true, then the particular column content width will be \n * adjusted based on its content in the initial rendering itself. \n * Setting this property as true is equivalent to calling `autoFitColumns` method in the `dataBound` event.\n * @default false\n */\n public autoFit: any;\n /** \n * Defines the cell content's overflow mode. The available modes are \n * * `Clip` - Truncates the cell content when it overflows its area. \n * * `Ellipsis` - Displays ellipsis when the cell content overflows its area. \n * * `EllipsisWithTooltip` - Displays ellipsis when the cell content overflows its area \n * also it will display tooltip while hover on ellipsis applied cell.\n * @default Ellipsis\n */\n public clipMode: any;\n /** \n * Used to render multiple header rows(stacked headers) on the Grid header.\n * @default null\n */\n public columns: any;\n /** \n * `commands` provides an option to display command buttons in every cell. \n * The available built-in command buttons are \n * * Edit - Edit the record. \n * * Delete - Delete the record. \n * * Save - Save the record. \n * * Cancel - Cancel the edit state.\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=\"Grid\"></div>\n *```\n *```typescript\n *var gridObj = new Grid({\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(\"#Grid\");\n *```\n * \n * @default null\n */\n public commands: any;\n /** \n * The CSS styles and attributes of the content cells of a particular column can be customized.\n * \n * ```html\n *<div id=\"Grid\"></div>\n *```\n *```typescript\n *let gridObj: Grid = new Grid({\n *dataSource: filterData,\n *columns: [\n * { field: 'OrderID', headerText: 'Order ID' },\n * {\n * field: 'EmployeeID', headerText: 'Employee ID', customAttributes: {\n * class: 'employeeid',\n * type: 'employee-id-cell'\n * }\n * }]\n *});\n *gridObj.appendTo('#Grid');\n *```\n * \n * @default null\n */\n public customAttributes: any;\n /** \n * Defines the column data source which will act as foreign data source.\n * @default null\n */\n public dataSource: any;\n /** \n * Defines default values for the component when adding a new record to the Grid.\n * @default null\n * @asptype object\n */\n public defaultValue: any;\n /** \n * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.\n * @default true\n */\n public disableHtmlEncode: any;\n /** \n * If `displayAsCheckBox` is set to true, it displays the column value as a check box instead of Boolean value.\n * @default false\n */\n public displayAsCheckBox: any;\n /** \n * Defines the `IEditCell`(../../grid/edit/#cell-edit-template) object to customize default edit cell.\n * @default {}\n */\n public edit: any;\n /** \n * Defines the type of component for editing.\n * @default 'stringedit'\n */\n public editType: any;\n /** \n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values. \n * By default no columns are group by format.\n * @default true\n */\n public enableGroupByFormat: any;\n /** \n * Defines the field name of column which is mapped with mapping name of DataSource. \n * The bounded columns can be sort, filter and group etc., \n * If the `field` name contains “dot”, then it is considered as complex binding. \n * The `field` name must be a valid JavaScript identifier, \n * the first character must be an alphabet and should not contain spaces and special characters.\n * @default ''\n */\n public field: any;\n /** \n * Defines the filter options to customize filtering for the particular column.\n * @default {}\n */\n public filter: any;\n /** \n * The `filterBarTemplate` is used to add a custom component instead of default input component for filter bar. \n * It have create and read functions. \n * * create: It is used for creating custom components. \n * * read: It is used to perform custom filter action.\n * \n * ```html\n *<div id=\"Grid\"></div>\n *```\n *```typescript\n *let gridObj: Grid = new Grid({\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('#Grid');\n *```\n * \n * @default null\n */\n public filterBarTemplate: any;\n /** \n * Defines the mapping column name of the foreign data source. \n * If it is not defined then the `columns.field` will be considered as mapping column name\n * @default null\n */\n public foreignKeyField: any;\n /** \n * Defines the display column name from the foreign data source which will be obtained from comparing local and foreign data\n * @default null\n */\n public foreignKeyValue: any;\n /** \n * It is used to change display value with the given format and does not affect the original data. \n * Gets the format from the user which can be standard or custom \n * [`number`](../../common/internationalization/#manipulating-numbers) \n * and [`date`](../../common/internationalization/#manipulating-datetime) formats.\n * @default null\n * @asptype string\n */\n public format: any;\n /** \n * Defines the method which is used to achieve custom formatting from an external function. \n * This function triggers before rendering of each cell.\n * \n * ```html\n *<div id=\"Grid\"></div>\n *```\n *```typescript\n *class ExtendedFormatter implements ICellFormatter {\n *public getValue(column: Column, data: Object): Object {\n * return '<span style=\"color:' + (data['Verified'] ? 'green' : 'red') + '\"><i>' + data['Verified'] + '</i><span>';\n *}\n *}\n *let gridObj: Grid = new Grid({\n * dataSource: filterData,\n * columns: [\n * { field: 'ShipName', headerText: 'Ship Name' },\n * { field: 'Verified', headerText: 'Verified Status', formatter: ExtendedFormatter }]\n *});\n *gridObj.appendTo('#Grid');\n *```\n * \n * @default null\n */\n public formatter: any;\n /** \n * defines which side the column need to freeze \n * The available built-in freeze directions are \n * * Left - Freeze the column at left side. \n * * Right - Freeze the column at right side. \n * * Fixed - Freeze the column at Center. \n * * None - Does not freeze the column.\n * @default None\n */\n public freeze: any;\n /** \n * Defines the header text of column which is used to display in column header. \n * If `headerText` is not defined, then field name value will be assigned to header text.\n * @default null\n */\n public headerText: any;\n /** \n * Define the alignment of column header which is used to align the text of column header.\n * @aspdefaultvalueignore \n * @default null\n */\n public headerTextAlign: any;\n /** \n * Defines the method used to apply custom header cell values from external function and display this on each cell rendered.\n * \n * ```html\n *<div id=\"Grid\"></div>\n *```\n *```typescript\n *let gridObj: Grid = new Grid({\n *dataSource: [{ EmployeeID: 1, EmployeeName: ['John', 'M'] }, { EmployeeID: 2, EmployeeName: ['Peter', 'A'] }],\n *columns: [\n * { field: 'EmployeeID', headerText: 'Employee ID' },\n * { field: 'EmployeeName', headerText: 'Employee First Name',\n * headerValueAccessor: (field: string,column: Column) => {\n * return \"newheadername\";\n * },\n * }]\n *});\n *```\n * \n * @default null\n */\n public headerValueAccessor: any;\n /** \n * column visibility can change based on its [`Media Queries`](http://cssmediaqueries.com/what-are-css-media-queries.html). \n * `hideAtMedia` accepts only valid Media Queries.\n * @default ''\n */\n public hideAtMedia: any;\n /** \n * Gets the unique identifier value of the column. It is used to get the object.\n * @default null\n */\n public index: any;\n /** \n * You can use this property to freeze selected columns in grid.\n * @default false\n */\n public isFrozen: any;\n /** \n * If `isIdentity` is set to true, then this column is considered as identity column.\n * @default false\n */\n public isIdentity: any;\n /** \n * If `isPrimaryKey` is set to true, considers this column as the primary key constraint.\n * @default false\n */\n public isPrimaryKey: any;\n /** \n * Defines the mapping column name of the foreign data source. \n * If it is not defined then the `columns.field` will be considered as mapping column name\n * @default false\n */\n public lockColumn: any;\n /** \n * Defines the maximum width of the column in pixel or percentage, which will restrict resizing beyond this pixel or percentage.\n * @default ''\n */\n public maxWidth: any;\n /** \n * Defines the minimum width of the column in pixels or percentage.\n * @default ''\n */\n public minWidth: any;\n /** \n * If `showColumnMenu` set to false, then it disable the column menu of a particular column. \n * By default column menu will show for all columns\n * @default true\n */\n public showColumnMenu: any;\n /** \n * If `showInColumnChooser` set to false, then hides the particular column in column chooser. \n * By default all columns are displayed in column Chooser.\n * @default true\n */\n public showInColumnChooser: any;\n /** \n * It defines the custom sort comparer function.\n */\n public sortComparer: any;\n /** \n * Determines the behavior of the `aria-label` attribute for cells in template columns. \n * If enableAriaLabel is set to false, the aria-label attribute is not applied to template column cells, which affects screen reader accessibility.\n * @default {}\n */\n public templateOptions: any;\n /** \n * Defines the alignment of the column in both header and content cells.\n * @default Left\n */\n public textAlign: any;\n /** \n * Gets the unique identifier value of the column. It is used to get the object.\n * @default ''\n */\n public uid: any;\n /** \n * `editType`(../../grid/edit/#cell-edit-type-and-its-params) Defines rules to validate data before creating and updating.\n * @default null\n */\n public validationRules: any;\n /** \n * Defines the method used to apply custom cell values from external function and display this on each cell rendered.\n * \n * ```html\n *<div id=\"Grid\"></div>\n *```\n *```typescript\n *let gridObj: Grid = new Grid({\n *dataSource: [{ EmployeeID: 1, EmployeeName: ['John', 'M'] }, { EmployeeID: 2, EmployeeName: ['Peter', 'A'] }],\n *columns: [\n * { field: 'EmployeeID', headerText: 'Employee ID' },\n * { field: 'EmployeeName', headerText: 'Employee First Name',\n * valueAccessor: (field: string, data: Object, column: Column) => {\n * return data['EmployeeName'][0];\n * },\n * }]\n *});\n *```\n * \n * @default null\n */\n public valueAccessor: any;\n /** \n * If `visible` is set to false, hides the particular column. By default, all columns are displayed.\n * @default true\n */\n public visible: any;\n /** \n * Defines the width of the column in pixels or percentage.\n * @default ''\n */\n public width: any;\n /** \n * Defines the column template that renders customized element in each cell of the column. \n * It accepts either [template string](../../common/template-engine/) or HTML element ID.\n * @default null\n * @asptype string\n */\n @ContentChild('template')\n @Template()\n public template: any;\n /** \n * Defines the column template as string or HTML element ID which is used to add customized element in the column header.\n * @default null\n * @asptype string\n */\n @ContentChild('headerTemplate')\n @Template()\n public headerTemplate: any;\n @ContentChild('commandsTemplate')\n @Template()\n public commandsTemplate: any;\n @ContentChild('filterItemTemplate')\n @Template()\n public filter_itemTemplate: any;\n /** \n * Defines the cell edit template that used as editor for a particular column. \n * It accepts either template string or HTML element ID.\n * @default null\n * @asptype string\n */\n @ContentChild('editTemplate')\n @Template()\n public editTemplate: any;\n /** \n * Defines the filter template/UI that used as filter for a particular column. \n * It accepts either template string or HTML element ID.\n * @default null\n * @asptype string\n */\n @ContentChild('filterTemplate')\n @Template()\n public filterTemplate: 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-grid>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', 'allowGrouping', 'allowReordering', 'allowResizing', 'allowSearching', 'allowSorting', 'autoFit', 'clipMode', 'columns', 'commands', 'customAttributes', 'dataSource', 'defaultValue', 'disableHtmlEncode', 'displayAsCheckBox', 'edit', 'editTemplate', 'editType', 'enableGroupByFormat', 'field', 'filter', 'filterBarTemplate', 'filterTemplate', 'foreignKeyField', 'foreignKeyValue', 'format', 'formatter', 'freeze', 'headerTemplate', 'headerText', 'headerTextAlign', 'headerValueAccessor', 'hideAtMedia', 'index', 'isFrozen', 'isIdentity', 'isPrimaryKey', 'lockColumn', 'maxWidth', 'minWidth', 'showColumnMenu', 'showInColumnChooser', 'sortComparer', 'template', 'templateOptions', 'textAlign', 'type', 'uid', 'validationRules', 'valueAccessor', 'visible', 'width'];\nlet outputs: string[] = [];\n/**\n * `e-column` directive represent a column of the Angular Grid. \n * It must be contained in a Grid component(`ejs-grid`). \n * ```html\n * <ejs-grid [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-grid>\n * ```\n */\n@Directive({\n selector: 'ejs-grid>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 data type of the column.\n * @default null\n */\n public type: any;\n /** \n * If `allowEditing` set to false, then it disables editing of a particular column. \n * By default all columns are editable.\n * @default true\n */\n public allowEditing: any;\n /** \n * If `allowFiltering` set to false, then it disables filtering option and filter bar element of a particular column. \n * By default all columns are filterable.\n * @default true\n */\n public allowFiltering: any;\n /** \n * If `allowGrouping` set to false, then it disables grouping of a particular column. \n * By default all columns are groupable.\n * @default true\n */\n public allowGrouping: any;\n /** \n * If `allowReordering` set to false, then it disables reorder of a particular column. \n * By default all columns can be reorder.\n * @default true\n */\n public allowReordering: any;\n /** \n * If `allowResizing` set to false, it disables resize option of a particular column.\n * @default true\n */\n public allowResizing: any;\n /** \n * If `allowSearching` set to false, then it disables Searching of a particular column. \n * By default all columns allow Searching.\n * @default true\n */\n public allowSearching: any;\n /** \n * If `allowSorting` set to false, then it disables sorting option of a particular column. \n * By default all columns are sortable.\n * @default true\n */\n public allowSorting: any;\n /** \n * If `autoFit` set to true, then the particular column content width will be \n * adjusted based on its content in the initial rendering itself. \n * Setting this property as true is equivalent to calling `autoFitColumns` method in the `dataBound` event.\n * @default false\n */\n public autoFit: any;\n /** \n * Defines the cell content's overflow mode. The available modes are \n * * `Clip` - Truncates the cell content when it overflows its area. \n * * `Ellipsis` - Displays ellipsis when the cell content overflows its area. \n * * `EllipsisWithTooltip` - Displays ellipsis when the cell content overflows its area \n * also it will display tooltip while hover on ellipsis applied cell.\n * @default Ellipsis\n */\n public clipMode: any;\n /** \n * Used to render multiple header rows(stacked headers) on the Grid header.\n * @default null\n */\n public columns: any;\n /** \n * `commands` provides an option to display command buttons in every cell. \n * The available built-in command buttons are \n * * Edit - Edit the record. \n * * Delete - Delete the record. \n * * Save - Save the record. \n * * Cancel - Cancel the edit state.\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=\"Grid\"></div>\n *```\n *```typescript\n *var gridObj = new Grid({\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(\"#Grid\");\n *```\n * \n * @default null\n */\n public commands: any;\n /** \n * The CSS styles and attributes of the content cells of a particular column can be customized.\n * \n * ```html\n *<div id=\"Grid\"></div>\n *```\n *```typescript\n *let gridObj: Grid = new Grid({\n *dataSource: filterData,\n *columns: [\n * { field: 'OrderID', headerText: 'Order ID' },\n * {\n * field: 'EmployeeID', headerText: 'Employee ID', customAttributes: {\n * class: 'employeeid',\n * type: 'employee-id-cell'\n * }\n * }]\n *});\n *gridObj.appendTo('#Grid');\n *```\n * \n * @default null\n */\n public customAttributes: any;\n /** \n * Defines the column data source which will act as foreign data source.\n * @default null\n */\n public dataSource: any;\n /** \n * Defines default values for the component when adding a new record to the Grid.\n * @default null\n * @asptype object\n */\n public defaultValue: any;\n /** \n * If `disableHtmlEncode` is set to true, it encodes the HTML of the header and content cells.\n * @default true\n */\n public disableHtmlEncode: any;\n /** \n * If `displayAsCheckBox` is set to true, it displays the column value as a check box instead of Boolean value.\n * @default false\n */\n public displayAsCheckBox: any;\n /** \n * Defines the `IEditCell`(../../grid/edit/#cell-edit-template) object to customize default edit cell.\n * @default {}\n */\n public edit: any;\n /** \n * Defines the type of component for editing.\n * @default 'stringedit'\n */\n public editType: any;\n /** \n * If `enableGroupByFormat` set to true, then it groups the particular column by formatted values. \n * By default no columns are group by format.\n * @default true\n */\n public enableGroupByFormat: any;\n /** \n * Defines the field name of column which is mapped with mapping name of DataSource. \n * The bounded columns can be sort, filter and group etc., \n * If the `field` name contains “dot”, then it is considered as complex binding. \n * The `field` name must be a valid JavaScript identifier, \n * the first character must be an alphabet and should not contain spaces and special characters.\n * @default ''\n */\n public field: any;\n /** \n * Defines the filter options to customize filtering for the particular column.\n * @default {}\n */\n public filter: any;\n /** \n * The `filterBarTemplate` is used to add a custom component instead of default input component for filter bar. \n * It have create and read functions. \n * * create: It is used for creating custom components. \n * * read: It is used to perform custom filter action.\n * \n * ```html\n *<div id=\"Grid\"></div>\n *```\n *```typescript\n *let gridObj: Grid = new Grid({\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('#Grid');\n *```\n * \n * @default null\n */\n public filterBarTemplate: any;\n /** \n * Defines the mapping column name of the foreign data source. \n * If it is not defined then the `columns.field` will be considered as mapping column name\n * @default null\n */\n public foreignKeyField: any;\n /** \n * Defines the display column name from the foreign data source which will be obtained from comparing local and foreign data\n * @default null\n */\n public foreignKeyValue: any;\n /** \n * It is used to change display value with the given format and does not affect the original data. \n * Gets the format from the user which can be standard or custom \n * [`number`](../../common/internationalization/#manipulating-numbers) \n * and [`date`](../../common/internationalization/#manipulating-datetime) formats.\n * @default null\n * @asptype string\n */\n public format: any;\n /** \n * Defines the method which is used to achieve custom formatting from an external function. \n * This function triggers before rendering of each cell.\n * \n * ```html\n *<div id=\"Grid\"></div>\n *```\n *```typescript\n *class ExtendedFormatter implements ICellFormatter {\n *public getValue(column: Column, data: Object): Object {\n * return '<span style=\"color:' + (data['Verified'] ? 'green' : 'red') + '\"><i>' + data['Verified'] + '</i><span>';\n *}\n *}\n *let gridObj: Grid = new Grid({\n * dataSource: filterData,\n * columns: [\n * { field: 'ShipName', headerText: 'Ship Name' },\n * { field: 'Verified', headerText: 'Verified Status', formatter: ExtendedFormatter }]\n *});\n *gridObj.appendTo('#Grid');\n *```\n * \n * @default null\n */\n public formatter: any;\n /** \n * defines which side the column need to freeze \n * The available built-in freeze directions are \n * * Left - Freeze the column at left side. \n * * Right - Freeze the column at right side. \n * * Fixed - Freeze the column at Center. \n * * None - Does not freeze the column.\n * @default None\n */\n public freeze: any;\n /** \n * Defines the header text of column which is used to display in column header. \n * If `headerText` is not defined, then field name value will be assigned to header text.\n * @default null\n */\n public headerText: any;\n /** \n * Define the alignment of column header which is used to align the text of column header.\n * @aspdefaultvalueignore \n * @default null\n */\n public headerTextAlign: any;\n /** \n * Defines the method used to apply custom header cell values from external function and display this on each cell rendered.\n * \n * ```html\n *<div id=\"Grid\"></div>\n *```\n *```typescript\n *let gridObj: Grid = new Grid({\n *dataSource: [{ EmployeeID: 1, EmployeeName: ['John', 'M'] }, { EmployeeID: 2, EmployeeName: ['Peter', 'A'] }],\n *columns: [\n * { field: 'EmployeeID', headerText: 'Employee ID' },\n * { field: 'EmployeeName', headerText: 'Employee First Name',\n * headerValueAccessor: (field: string,column: Column) => {\n * return \"newheadername\";\n * },\n * }]\n *});\n *```\n * \n * @default null\n */\n public headerValueAccessor: any;\n /** \n * column visibility can change based on its [`Media Queries`](http://cssmediaqueries.com/what-are-css-media-queries.html). \n * `hideAtMedia` accepts only valid Media Queries.\n * @default ''\n */\n public hideAtMedia: any;\n /** \n * Gets the unique identifier value of the column. It is used to get the object.\n * @default null\n */\n public index: any;\n /** \n * You can use this property to freeze selected columns in grid.\n * @default false\n */\n public isFrozen: any;\n /** \n * If `isIdentity` is set to true, then this column is considered as identity column.\n * @default false\n */\n public isIdentity: any;\n /** \n * If `isPrimaryKey` is set to true, considers this column as the primary key constraint.\n * @default false\n */\n public isPrimaryKey: any;\n /** \n * Defines the mapping column name of the foreign data source. \n * If it is not defined then the `columns.field` will be considered as mapping column name\n * @default false\n */\n public lockColumn: any;\n /** \n * Defines the maximum width of the column in pixel or percentage, which will restrict resizing beyond this pixel or percentage.\n * @default ''\n */\n public maxWidth: any;\n /** \n * Defines the minimum width of the column in pixels or percentage.\n * @default ''\n */\n public minWidth: any;\n /** \n * If `showColumnMenu` set to false, then it disable the column menu of a particular column. \n * By default column menu will show for all columns\n * @default true\n */\n public showColumnMenu: any;\n /** \n * If `showInColumnChooser` set to false, then hides the particular column in column chooser. \n * By default all columns are displayed in column Chooser.\n * @default true\n */\n public showInColumnChooser: any;\n /** \n * It defines the custom sort comparer function.\n */\n public sortComparer: any;\n /** \n * Determines the behavior of the `aria-label` attribute for cells in template columns. \n * If enableAriaLabel is set to false, the aria-label attribute is not applied to template column cells, which affects screen reader accessibility.\n * @default {}\n */\n public templateOptions: any;\n /** \n * Defines the alignment of the column in both header and content cells.\n * @default Left\n */\n public textAlign: any;\n /** \n * Gets the unique identifier value of the column. It is used to get the object.\n * @default ''\n */\n public uid: any;\n /** \n * `editType`(../../grid/edit/#cell-edit-type-and-its-params) Defines rules to validate data before creating and updating.\n * @default null\n */\n public validationRules: any;\n /** \n * Defines the method used to apply custom cell values from external function and display this on each cell rendered.\n * \n * ```html\n *<div id=\"Grid\"></div>\n *```\n *```typescript\n *let gridObj: Grid = new Grid({\n *dataSource: [{ EmployeeID: 1, EmployeeName: ['John', 'M'] }, { EmployeeID: 2, EmployeeName: ['Peter', 'A'] }],\n *columns: [\n * { field: 'EmployeeID', headerText: 'Employee ID' },\n * { field: 'EmployeeName', headerText: 'Employee First Name',\n * valueAccessor: (field: string, data: Object, column: Column) => {\n * return data['EmployeeName'][0];\n * },\n * }]\n *});\n *```\n * \n * @default null\n */\n public valueAccessor: any;\n /** \n * If `visible` is set to false, hides the particular column. By default, all columns are displayed.\n * @default true\n */\n public visible: any;\n /** \n * Defines the width of the column in pixels or percentage.\n * @default ''\n */\n public width: any;\n /** \n * Defines the column template that renders customized element in each cell of the column. \n * It accepts either [template string](../../common/template-engine/) or HTML element ID.\n * @default null\n * @asptype string\n */\n @ContentChild('template')\n @Template()\n public template: any;\n /** \n * Defines the column template as string or HTML element ID which is used to add customized element in the column header.\n * @default null\n * @asptype string\n */\n @ContentChild('headerTemplate')\n @Template()\n public headerTemplate: any;\n @ContentChild('commandsTemplate')\n @Template()\n public commandsTemplate: any;\n @ContentChild('filterItemTemplate')\n @Template()\n public filter_itemTemplate: any;\n /** \n * Defines the cell edit template that used as editor for a particular column. \n * It accepts either template string or HTML element ID.\n * @default null\n * @asptype string\n */\n @ContentChild('editTemplate')\n @Template()\n public editTemplate: any;\n /** \n * Defines the filter template/UI that used as filter for a particular column. \n * It accepts either template string or HTML element ID.\n * @default null\n * @asptype string\n */\n @ContentChild('filterTemplate')\n @Template()\n public filterTemplate: 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-grid>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', 'groupCaptionTemplate', 'groupFooterTemplate', 'type'];\nlet outputs: string[] = [];\n/**\n * `e-aggregate->e-column` directive represent a aggregate column of the Angular Grid. \n * ```html\n * <ejs-grid [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-grid>\n * ```\n */\n@Directive({\n selector: 'ejs-grid>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 of a particular column. \n * To use multiple aggregates for single column, specify the `type` as array. \n * Types of aggregate are, \n * * sum \n * * average \n * * max \n * * min \n * * count \n * * truecount \n * * falsecount \n * * custom \n * > Specify the `type` value as `custom` to use custom aggregation.\n * @default null\n * @asptype string\n */\n public type: any;\n /** \n * Defines the column name to display the aggregate value. If `columnName` is not defined, \n * then `field` name value will be assigned to the `columnName` property.\n * @default null\n */\n public columnName: any;\n /** \n * Defines a function to calculate custom aggregate value. The `type` value should be set to `custom`. \n * To use custom aggregate value in the template, use the key as `${custom}`. \n * **Total aggregation**: The custom function will be called with the whole data and the current `AggregateColumn` object. \n * **Group aggregation**: This will be called with the current group details and the `AggregateColumn` object.\n * @default null\n */\n public customAggregate: any;\n /** \n * Defines the column name to perform aggregation.\n * @default null\n */\n public field: any;\n /** \n * Format is applied to a calculated value before it is displayed. \n * Gets the format from the user, which can be standard or custom \n * [`number`](../../common/internationalization/#number-formatting/) \n * and [`date`](../../common/internationalization/#number-formatting/) formats.\n * @asptype string\n * @blazortype string\n * @default null\n */\n public format: any;\n /** \n * Defines the footer cell template as a string for the aggregate column. \n * The `type` name should be used to access aggregate values inside the template.\n * \n * {% codeBlock src=\"grid/footer-template-api/index.ts\" %}{% endcodeBlock %}\n * \n * @default null\n * @asptype string\n */\n @ContentChild('footerTemplate')\n @Template()\n public footerTemplate: any;\n /** \n * Defines the group footer cell template as a string for the aggregate column. \n * The `type` name should be used to access aggregate values inside the template. \n * Additionally, the following fields can be accessed in the template. \n * * **field**: The current grouped field. \n * * **key**: The current grouped value.\n * \n * {% codeBlock src=\"grid/group-footer-api/index.ts\" %}{% endcodeBlock %}\n * \n * @default null\n * @asptype string\n */\n @ContentChild('groupFooterTemplate')\n @Template()\n public groupFooterTemplate: any;\n /** \n * Defines the group caption cell template as a string for the aggregate column. \n * The `type` name should be used to access aggregate values inside the template. \n * Additionally, the following fields can be accessed in the template. \n * * **field**: The current grouped field name. \n * * **key**: The current grouped field value.\n * \n * {% codeBlock src=\"grid/group-caption-api/index.ts\" %}{% endcodeBlock %}\n * \n * @default null\n * @asptype string\n */\n @ContentChild('groupCaptionTemplate')\n @Template()\n public groupCaptionTemplate: 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-grid>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'];\nlet outputs: string[] = [];\n/**\n * `e-aggregate` directive represent a aggregate row of the Angular Grid. \n * It must be contained in a Grid component(`ejs-grid`). \n * ```html\n * <ejs-grid [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-grid>\n * ```\n */\n@Directive({\n selector: 'ejs-grid>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 aggregate columns.\n * @default []\n */\n public columns: 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-grid>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 { Grid } from '@syncfusion/ej2-grids';\nimport { Template } from '@syncfusion/ej2-angular-base';\nimport { ColumnsDirective } from './columns.directive';\nimport { AggregatesDirective } from './aggregates.directive';\n\nexport const inputs: string[] = ['adaptiveUIMode','aggregates','allowExcelExport','allowFiltering','allowGrouping','allowKeyboard','allowMultiSorting','allowPaging','allowPdfExport','allowReordering','allowResizing','allowRowDragAndDrop','allowSelection','allowSorting','allowTextWrap','autoFit','childGrid','clipMode','columnChooserSettings','columnMenuItems','columnQueryMode','columns','contextMenuItems','cssClass','currencyCode','currentAction','currentViewData','dataSource','detailTemplate','editSettings','ej2StatePersistenceVersion','emptyRecordTemplate','enableAdaptiveUI','enableAltRow','enableAutoFill','enableColumnVirtualization','enableHeaderFocus','enableHover','enableHtmlSanitizer','enableImmutableMode','enableInfiniteScrolling','enablePersistence','enableRtl','enableStickyHeader','enableVirtualMaskRow','enableVirtualization','exportGrids','filterSettings','frozenColumns','frozenRows','gridLines','groupSettings','height','hierarchyPrintMode','infiniteScrollSettings','loadingIndicator','locale','pageSettings','pagerTemplate','parentDetails','printMode','query','queryString','resizeSettings','rowDropSettings','rowHeight','rowRenderingMode','rowTemplate','searchSettings','selectedRowIndex','selectionSettings','showColumnChooser','showColumnMenu','showHider','sortSettings','textWrapSettings','toolbar','toolbarTemplate','width'];\nexport const outputs: string[] = ['actionBegin','actionComplete','actionFailure','batchAdd','batchCancel','batchDelete','beforeAutoFill','beforeBatchAdd','beforeBatchDelete','beforeBatchSave','beforeCopy','beforeDataBound','beforeDetailTemplateDetach','beforeExcelExport','beforeOpenAdaptiveDialog','beforeOpenColumnChooser','beforePaste','beforePdfExport','beforePrint','beginEdit','cellDeselected','cellDeselecting','cellEdit','cellSave','cellSaved','cellSelected','cellSelecting','checkBoxChange','columnDataStateChange','columnDeselected','columnDeselecting','columnDrag','columnDragStart','columnDrop','columnMenuClick','columnMenuOpen','columnSelected','columnSelecting','commandClick','contextMenuClick','contextMenuOpen','created','dataBound','dataSourceChanged','dataStateChange','destroyed','detailDataBound','excelAggregateQueryCellInfo','excelExportComplete','excelHeaderQueryCellInfo','excelQueryCellInfo','exportDetailDataBound','exportDetailTemplate','exportGroupCaption','headerCellInfo','keyPressed','lazyLoadGroupCollapse','lazyLoadGroupExpand','load','pdfAggregateQueryCellInfo','pdfExportComplete','pdfHeaderQueryCellInfo','pdfQueryCellInfo','printComplete','queryCellInfo','recordClick','recordDoubleClick','resizeStart','resizeStop','resizing','rowDataBound','rowDeselected','rowDeselecting','rowDrag','rowDragStart','rowDragStartHelper','rowDrop','rowSelected','rowSelecting','toolbarClick','dataSourceChange'];\nexport const twoWays: string[] = ['dataSource'];\n\n/**\n * `ejs-grid` represents the Angular Grid Component.\n * ```html\n * <ejs-grid [dataSource]='data' allowPaging='true' allowSorting='true'></ejs-grid>\n * ```\n */\n@Component({\n selector: 'ejs-grid',\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 GridComponent extends Grid 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\tbeforeAutoFill: any;\n\tbeforeBatchAdd: any;\n\tbeforeBatchDelete: any;\n\tbeforeBatchSave: any;\n\tbeforeCopy: any;\n\tbeforeDataBound: any;\n\tbeforeDetailTemplateDetach: any;\n\tbeforeExcelExport: any;\n\tbeforeOpenAdaptiveDialog: any;\n\tb