import { Options } from 'vue-class-component' ; import { isUndefined } from '@syncfusion/ej2-base' ; import { ComponentBase , EJComponentDecorator , getProps , allVue , gh } from '@syncfusion/ej2-vue-base' ; import { isNullOrUndefined , getValue } from '@syncfusion/ej2-base' ; import { TreeGrid } from '@syncfusion/ej2-treegrid' ; import { ColumnsDirective , ColumnDirective , ColumnsPlugin , ColumnPlugin } from './columns.directive' ; import { AggregateColumnsDirective , AggregateColumnDirective , AggregateColumnsPlugin , AggregateColumnPlugin } from './aggregate-columns.directive' ; import { AggregatesDirective , AggregateDirective , AggregatesPlugin , AggregatePlugin } from './aggregates.directive' ; export const properties = [ 'isLazyUpdate' , 'aggregates' , 'allowExcelExport' , 'allowFiltering' , 'allowMultiSorting' , 'allowPaging' , 'allowPdfExport' , 'allowReordering' , 'allowResizing' , 'allowRowDragAndDrop' , 'allowSelection' , 'allowSorting' , 'allowTextWrap' , 'autoCheckHierarchy' , 'childMapping' , 'clipMode' , 'columnMenuItems' , 'columnQueryMode' , 'columns' , 'contextMenuItems' , 'copyHierarchyMode' , 'dataSource' , 'detailTemplate' , 'editSettings' , 'enableAdaptiveUI' , 'enableAltRow' , 'enableAutoFill' , 'enableCollapseAll' , 'enableColumnVirtualization' , 'enableHover' , 'enableImmutableMode' , 'enableInfiniteScrolling' , 'enablePersistence' , 'enableRtl' , 'enableVirtualization' , 'expandStateMapping' , 'filterSettings' , 'frozenColumns' , 'frozenRows' , 'gridLines' , 'hasChildMapping' , 'height' , 'idMapping' , 'infiniteScrollSettings' , 'loadChildOnDemand' , 'locale' , 'pageSettings' , 'parentIdMapping' , 'printMode' , 'query' , 'rowDropSettings' , 'rowHeight' , 'rowTemplate' , 'searchSettings' , 'selectedRowIndex' , 'selectionSettings' , 'showColumnChooser' , 'showColumnMenu' , 'sortSettings' , 'textWrapSettings' , 'toolbar' , 'treeColumnIndex' , 'width' , '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' ] ; export const modelProps = [ 'dataSource' ] ; export const testProp = getProps ( { props : properties } ) ; export const props = testProp [ 0 ] ; export const watch = testProp [ 1 ] ; export const emitProbs = Object . keys ( watch ) ; emitProbs . push ( 'modelchanged' ) ; for ( let props of modelProps ) { emitProbs . push ( 'update:' + props ) ; } export const isExecute = gh ? false : true ; /**
 * `ejs-treegrid` represents the VueJS TreeGrid Component.
 * ```vue
 * <ejs-treegrid :dataSource='data' allowPaging='true' allowSorting='true'></ejs-treegrid>
 * ```
 */ @ EJComponentDecorator ( { props : properties , model : { event : 'modelchanged' } } , isExecute ) export class TreeGridComponent extends ComponentBase { public ej2Instances : any ; public propKeys : string [ ] = properties ; public models : string [ ] = modelProps ; public hasChildDirective : boolean = true ; protected hasInjectedModules : boolean = true ; public tagMapper : { [ key ] : Object ; } = { "e-columns" : "e-column" , "e-aggregates" : { "e-aggregate" : { "e-columns" : "e-column" } } } ; public tagNameMapper : Object = { } ; public isVue3 : boolean ; public templateCollection : any ; constructor ( ) { super ( arguments ) ; this . isVue3 = ! isExecute ; this . ej2Instances = new TreeGrid ( { } ) ; this . ej2Instances . _trigger = this . ej2Instances . trigger ; this . ej2Instances . trigger = this . trigger ; this . bindProperties ( ) ; this . ej2Instances . _setProperties = this . ej2Instances . setProperties ; this . ej2Instances . setProperties = this . setProperties ; this . ej2Instances . clearTemplate = this . clearTemplate ; } public clearTemplate ( templateNames ? ) { if ( ! templateNames ) { templateNames = Object . keys ( this . templateCollection || { } ) ; } if ( templateNames . length && this . templateCollection ) { for ( let tempName of templateNames ) { let elementCollection = this . templateCollection [ tempName ] ; if ( elementCollection && elementCollection . length ) { for ( let ele of elementCollection ) { let destroy = getValue ( '__vue__.$destroy' , ele ) ; if ( destroy ) { ele . __vue__ . $destroy ( ) ; } if ( ele . innerHTML ) { ele . innerHTML = '' ; } } delete this . templateCollection [ tempName ] ; } } } } public setProperties ( prop , muteOnChange ) { if ( this . isVue3 ) { this . models = ! this . models ? this . ej2Instances . referModels : this . models ; } if ( this . ej2Instances && this . ej2Instances . _setProperties ) { this . ej2Instances . _setProperties ( prop , muteOnChange ) ; } if ( prop && this . models && this . models . length ) { Object . keys ( prop ) . map ( ( key ) : void => { this . models . map ( ( model ) : void => { if ( ( key === model ) && ! ( /datasource/i . test ( key ) ) ) { if ( this . isVue3 ) { this . ej2Instances . vueInstance . $emit ( 'update:' + key , prop [ key ] ) ; } else { ( this as any ) . $emit ( 'update:' + key , prop [ key ] ) ; ( this as any ) . $emit ( 'modelchanged' , prop [ key ] ) ; } } } ) ; } ) ; } } public trigger ( eventName , eventProp , successHandler ? ) { if ( ! isExecute ) { this . models = ! this . models ? this . ej2Instances . referModels : this . models ; } if ( ( eventName === 'change' || eventName === 'input' ) && this . models && ( this . models . length !== 0 ) ) { let key = this . models . toString ( ) . match ( /checked|value/ ) || [ ] ; let propKey = key [ 0 ] ; if ( eventProp && key && ! isUndefined ( eventProp [ propKey ] ) ) { if ( ! isExecute ) { this . ej2Instances . vueInstance . $emit ( 'update:' + propKey , eventProp [ propKey ] ) ; this . ej2Instances . vueInstance . $emit ( 'modelchanged' , eventProp [ propKey ] ) ; } else { if ( eventName === 'change' || ( ( this as any ) . $props && ! ( this as any ) . $props . isLazyUpdate ) ) { ( this as any ) . $emit ( 'update:' + propKey , eventProp [ propKey ] ) ; ( this as any ) . $emit ( 'modelchanged' , eventProp [ propKey ] ) ; } } } } else if ( ( eventName === 'actionBegin' && eventProp . requestType === 'dateNavigate' ) && this . models && ( this . models . length !== 0 ) ) { let key = this . models . toString ( ) . match ( /currentView|selectedDate/ ) || [ ] ; let propKey = key [ 0 ] ; if ( eventProp && key && ! isUndefined ( eventProp [ propKey ] ) ) { if ( ! isExecute ) { this . ej2Instances . vueInstance . $emit ( 'update:' + propKey , eventProp [ propKey ] ) ; this . ej2Instances . vueInstance . $emit ( 'modelchanged' , eventProp [ propKey ] ) ; } else { ( this as any ) . $emit ( 'update:' + propKey , eventProp [ propKey ] ) ; ( this as any ) . $emit ( 'modelchanged' , eventProp [ propKey ] ) ; } } } if ( ( this . ej2Instances && this . ej2Instances . _trigger ) ) { this . ej2Instances . _trigger ( eventName , eventProp , successHandler ) ; } } public render ( createElement ) { let h = gh || createElement ; let slots = null ; if ( ! isNullOrUndefined ( ( this as any ) . $slots . default ) ) { slots = gh ? ( this as any ) . $slots . default ( ) : ( this as any ) . $slots . default ; } return h ( 'div' , slots ) ; } public addRecord ( data ? , index ? , position ? ) { return this . ej2Instances . addRecord ( data , index , position ) ; } public autoFitColumns ( fieldNames ? ) { return this . ej2Instances . autoFitColumns ( fieldNames ) ; } public clearFiltering ( ) { return this . ej2Instances . clearFiltering ( ) ; } public clearSelection ( ) { return this . ej2Instances . clearSelection ( ) ; } public clearSorting ( ) { return this . ej2Instances . clearSorting ( ) ; } public closeEdit ( ) { return this . ej2Instances . closeEdit ( ) ; } public collapseAll ( ) { return this . ej2Instances . collapseAll ( ) ; } public collapseAtLevel ( level ) { return this . ej2Instances . collapseAtLevel ( level ) ; } public collapseByKey ( key ) { return this . ej2Instances . collapseByKey ( key ) ; } public collapseRow ( row , record ? , key ? ) { return this . ej2Instances . collapseRow ( row , record , key ) ; } public copy ( withHeader ? ) { return this . ej2Instances . copy ( withHeader ) ; } public csvExport ( excelExportProperties ? , isMultipleExport ? , workbook ? , isBlob ? ) { return this . ej2Instances . csvExport ( excelExportProperties , isMultipleExport , workbook , isBlob ) ; } public deleteRecord ( fieldName ? , data ? ) { return this . ej2Instances . deleteRecord ( fieldName , data ) ; } public deleteRow ( tr ) { return this . ej2Instances . deleteRow ( tr ) ; } public editCell ( rowIndex ? , field ? ) { return this . ej2Instances . editCell ( rowIndex , field ) ; } public enableToolbarItems ( items , isEnable ) { return this . ej2Instances . enableToolbarItems ( items , isEnable ) ; } public endEdit ( ) { return this . ej2Instances . endEdit ( ) ; } public excelExport ( excelExportProperties ? , isMultipleExport ? , workbook ? , isBlob ? ) { return this . ej2Instances . excelExport ( excelExportProperties , isMultipleExport , workbook , isBlob ) ; } public expandAll ( ) { return this . ej2Instances . expandAll ( ) ; } public expandAtLevel ( level ) { return this . ej2Instances . expandAtLevel ( level ) ; } public expandByKey ( key ) { return this . ej2Instances . expandByKey ( key ) ; } public expandRow ( row , record ? , key ? , level ? ) { return this . ej2Instances . expandRow ( row , record , key , level ) ; } public extendRequiredModules ( modules ) { return this . ej2Instances . extendRequiredModules ( modules ) ; } public filterByColumn ( fieldName , filterOperator , filterValue , predicate ? , matchCase ? , ignoreAccent ? , actualFilterValue ? , actualOperator ? ) { return this . ej2Instances . filterByColumn ( fieldName , filterOperator , filterValue , predicate , matchCase , ignoreAccent , actualFilterValue , actualOperator ) ; } public getBatchChanges ( ) { return this . ej2Instances . getBatchChanges ( ) ; } public getCellFromIndex ( rowIndex , columnIndex ) { return this . ej2Instances . getCellFromIndex ( rowIndex , columnIndex ) ; } public getCheckedRecords ( ) { return this . ej2Instances . getCheckedRecords ( ) ; } public getCheckedRowIndexes ( ) { return this . ej2Instances . getCheckedRowIndexes ( ) ; } public getColumnByField ( field ) { return this . ej2Instances . getColumnByField ( field ) ; } public getColumnByUid ( uid ) { return this . ej2Instances . getColumnByUid ( uid ) ; } public getColumnFieldNames ( ) { return this . ej2Instances . getColumnFieldNames ( ) ; } public getColumnHeaderByField ( field ) { return this . ej2Instances . getColumnHeaderByField ( field ) ; } public getColumnHeaderByIndex ( index ) { return this . ej2Instances . getColumnHeaderByIndex ( index ) ; } public getColumnHeaderByUid ( uid ) { return this . ej2Instances . getColumnHeaderByUid ( uid ) ; } public getColumnIndexByField ( field ) { return this . ej2Instances . getColumnIndexByField ( field ) ; } public getColumnIndexByUid ( uid ) { return this . ej2Instances . getColumnIndexByUid ( uid ) ; } public getColumns ( isRefresh ? ) { return this . ej2Instances . getColumns ( isRefresh ) ; } public getContent ( ) { return this . ej2Instances . getContent ( ) ; } public getContentTable ( ) { return this . ej2Instances . getContentTable ( ) ; } public getCurrentViewRecords ( ) { return this . ej2Instances . getCurrentViewRecords ( ) ; } public getDataModule ( ) { return this . ej2Instances . getDataModule ( ) ; } public getDataRows ( ) { return this . ej2Instances . getDataRows ( ) ; } public getFooterContent ( ) { return this . ej2Instances . getFooterContent ( ) ; } public getFooterContentTable ( ) { return this . ej2Instances . getFooterContentTable ( ) ; } public getFrozenLeftColumnHeaderByIndex ( index ) { return this . ej2Instances . getFrozenLeftColumnHeaderByIndex ( index ) ; } public getFrozenRightCellFromIndex ( rowIndex , columnIndex ) { return this . ej2Instances . getFrozenRightCellFromIndex ( rowIndex , columnIndex ) ; } public getFrozenRightColumnHeaderByIndex ( index ) { return this . ej2Instances . getFrozenRightColumnHeaderByIndex ( index ) ; } public getFrozenRightDataRows ( ) { return this . ej2Instances . getFrozenRightDataRows ( ) ; } public getFrozenRightRowByIndex ( index ) { return this . ej2Instances . getFrozenRightRowByIndex ( index ) ; } public getFrozenRightRows ( ) { return this . ej2Instances . getFrozenRightRows ( ) ; } public getHeaderContent ( ) { return this . ej2Instances . getHeaderContent ( ) ; } public getHeaderTable ( ) { return this . ej2Instances . getHeaderTable ( ) ; } public getMovableCellFromIndex ( rowIndex , columnIndex ) { return this . ej2Instances . getMovableCellFromIndex ( rowIndex , columnIndex ) ; } public getMovableColumnHeaderByIndex ( index ) { return this . ej2Instances . getMovableColumnHeaderByIndex ( index ) ; } public getMovableDataRows ( ) { return this . ej2Instances . getMovableDataRows ( ) ; } public getMovableRowByIndex ( index ) { return this . ej2Instances . getMovableRowByIndex ( index ) ; } public getMovableRows ( ) { return this . ej2Instances . getMovableRows ( ) ; } public getPager ( ) { return this . ej2Instances . getPager ( ) ; } public getPrimaryKeyFieldNames ( ) { return this . ej2Instances . getPrimaryKeyFieldNames ( ) ; } public getRowByIndex ( index ) { return this . ej2Instances . getRowByIndex ( index ) ; } public getRowInfo ( target ) { return this . ej2Instances . getRowInfo ( target ) ; } public getRows ( ) { return this . ej2Instances . getRows ( ) ; } public getSelectedRecords ( ) { return this . ej2Instances . getSelectedRecords ( ) ; } public getSelectedRowCellIndexes ( ) { return this . ej2Instances . getSelectedRowCellIndexes ( ) ; } public getSelectedRowIndexes ( ) { return this . ej2Instances . getSelectedRowIndexes ( ) ; } public getSelectedRows ( ) { return this . ej2Instances . getSelectedRows ( ) ; } public getUidByColumnField ( field ) { return this . ej2Instances . getUidByColumnField ( field ) ; } public getVisibleColumns ( ) { return this . ej2Instances . getVisibleColumns ( ) ; } public getVisibleRecords ( ) { return this . ej2Instances . getVisibleRecords ( ) ; } public goToPage ( pageNo ) { return this . ej2Instances . goToPage ( pageNo ) ; } public hideColumns ( keys , hideBy ? ) { return this . ej2Instances . hideColumns ( keys , hideBy ) ; } public hideSpinner ( ) { return this . ej2Instances . hideSpinner ( ) ; } public openColumnChooser ( x ? , y ? ) { return this . ej2Instances . openColumnChooser ( x , y ) ; } public paste ( data , rowIndex , colIndex ) { return this . ej2Instances . paste ( data , rowIndex , colIndex ) ; } public pdfExport ( pdfExportProperties ? , isMultipleExport ? , pdfDoc ? , isBlob ? ) { return this . ej2Instances . pdfExport ( pdfExportProperties , isMultipleExport , pdfDoc , isBlob ) ; } public print ( ) { return this . ej2Instances . print ( ) ; } public refresh ( ) { return this . ej2Instances . refresh ( ) ; } public refreshColumns ( refreshUI ? ) { return this . ej2Instances . refreshColumns ( refreshUI ) ; } public refreshHeader ( ) { return this . ej2Instances . refreshHeader ( ) ; } public reorderColumns ( fromFName , toFName ) { return this . ej2Instances . reorderColumns ( fromFName , toFName ) ; } public reorderRows ( fromIndexes , toIndex , position ) { return this . ej2Instances . reorderRows ( fromIndexes , toIndex , position ) ; } public saveCell ( ) { return this . ej2Instances . saveCell ( ) ; } public search ( searchString ) { return this . ej2Instances . search ( searchString ) ; } public selectCell ( cellIndex , isToggle ? ) { return this . ej2Instances . selectCell ( cellIndex , isToggle ) ; } public selectCheckboxes ( indexes ) { return this . ej2Instances . selectCheckboxes ( indexes ) ; } public selectRow ( index , isToggle ? ) { return this . ej2Instances . selectRow ( index , isToggle ) ; } public selectRows ( rowIndexes ) { return this . ej2Instances . selectRows ( rowIndexes ) ; } public setCellValue ( key , field , value ) { return this . ej2Instances . setCellValue ( key , field , value ) ; } public setRowData ( key , rowData ? ) { return this . ej2Instances . setRowData ( key , rowData ) ; } public showColumns ( keys , showBy ? ) { return this . ej2Instances . showColumns ( keys , showBy ) ; } public showSpinner ( ) { return this . ej2Instances . showSpinner ( ) ; } public sortByColumn ( columnName , direction , isMultiSort ? ) { return this . ej2Instances . sortByColumn ( columnName , direction , isMultiSort ) ; } public startEdit ( row ? ) { return this . ej2Instances . startEdit ( row ) ; } public updateCell ( rowIndex , field , value ) { return this . ej2Instances . updateCell ( rowIndex , field , value ) ; } public updateExternalMessage ( message ) { return this . ej2Instances . updateExternalMessage ( message ) ; } public updateRow ( index , data ) { return this . ej2Instances . updateRow ( index , data ) ; } } export const TreeGridPlugin = { name : 'ejs-treegrid' , install ( Vue ) { Vue . component ( TreeGridPlugin . name , TreeGridComponent ) ; Vue . component ( ColumnPlugin . name , ColumnDirective ) ; Vue . component ( ColumnsPlugin . name , ColumnsDirective ) ; Vue . component ( AggregatePlugin . name , AggregateDirective ) ; Vue . component ( AggregatesPlugin . name , AggregatesDirective ) ; Vue . component ( AggregateColumnPlugin . name , AggregateColumnDirective ) ; Vue . component ( AggregateColumnsPlugin . name , AggregateColumnsDirective ) ; } } ;