import { IGrid } from '../base/interface' ; import { Column } from '../models/column' ; import { isNullOrUndefined , addClass , extend , closest } from '@syncfusion/ej2-base' ; import * as events from '../base/constant' ; import { appendChildren } from '../base/util' ; hidden export class InlineEditRender { private parent : IGrid ; private isEdit : boolean ; /**
     * Constructor for render module
     */ constructor ( parent ? ) { this . parent = parent ; } public addNew ( elements , args ) { this . isEdit = false ; let mTbody ; let tbody ; if ( this . parent . frozenRows ) { tbody = this . parent . getHeaderContent ( ) . querySelector ( 'tbody' ) ; } else { tbody = this . parent . getContentTable ( ) . querySelector ( 'tbody' ) ; } args . row = this . parent . createElement ( 'tr' , { className : 'e-row e-addedrow' } ) ; if ( tbody . querySelector ( '.e-emptyrow' ) ) { tbody . querySelector ( '.e-emptyrow' ) . classList . add ( 'e-hide' ) ; } tbody . insertBefore ( args . row , tbody . firstChild ) ; args . row . appendChild ( this . getEditElement ( elements , false , undefined , args , true ) ) ; if ( this . parent . getFrozenColumns ( ) ) { let mEle = this . renderMovableform ( args . row , args ) ; if ( this . parent . frozenRows ) { mTbody = this . parent . getHeaderContent ( ) . querySelector ( '.e-movableheader' ) . querySelector ( 'tbody' ) ; } else { mTbody = this . parent . getContent ( ) . querySelector ( '.e-movablecontent' ) . querySelector ( 'tbody' ) ; } mTbody . insertBefore ( mEle , mTbody . firstChild ) ; args . row . querySelector ( '.e-normaledit' ) . setAttribute ( 'colspan' , this . parent . getVisibleFrozenColumns ( ) + '' ) ; mEle . setAttribute ( 'colspan' , '' + ( this . parent . getVisibleColumns ( ) . length - this . parent . getVisibleFrozenColumns ( ) ) ) ; if ( this . parent . height === 'auto' ) { this . parent . notify ( events . frozenHeight , { } ) ; } } } private renderMovableform ( ele , args ) { let mEle = ele . cloneNode ( true ) as Element ; let form = args . movableForm = mEle . querySelector ( 'form' ) ; if ( this . parent . editSettings . template ) { form . innerHTML = '' ; this . appendChildren ( form , args . rowData , false ) ; return mEle ; } this . renderMovable ( ele , mEle ) ; mEle . querySelector ( 'colgroup' ) . innerHTML = this . parent . getHeaderContent ( ) . querySelector ( '.e-movableheader' ) . querySelector ( 'colgroup' ) . innerHTML ; return mEle ; } private updateFreezeEdit ( row , td ) { td = td . concat ( [ ] . slice . call ( this . getFreezeRow ( row ) . querySelectorAll ( 'td.e-rowcell' ) ) ) ; return td ; } private getFreezeRow ( row ) { if ( this . parent . getFrozenColumns ( ) ) { let idx = parseInt ( row . getAttribute ( 'aria-rowindex' ) , 10 ) ; let fCont = this . parent . getContent ( ) . querySelector ( '.e-frozencontent' ) . querySelector ( 'tbody' ) ; let mCont = this . parent . getContent ( ) . querySelector ( '.e-movablecontent' ) . querySelector ( 'tbody' ) ; let fHdr = this . parent . getHeaderContent ( ) . querySelector ( '.e-frozenheader' ) . querySelector ( 'tbody' ) ; let mHdr = this . parent . getHeaderContent ( ) . querySelector ( '.e-movableheader' ) . querySelector ( 'tbody' ) ; if ( this . parent . frozenRows && idx >= this . parent . frozenRows ) { idx -= this . parent . frozenRows ; } if ( fCont . contains ( row ) ) { return mCont . children [ idx ] ; } else if ( mCont . contains ( row ) ) { return fCont . children [ idx ] ; } else if ( fHdr . contains ( row ) ) { return mHdr . children [ idx ] ; } else if ( mHdr . contains ( row ) ) { return fHdr . children [ idx ] ; } } return row ; } public update ( elements , args ) { this . isEdit = true ; if ( closest ( args . row , '.e-movablecontent' ) ) { args . row = this . getFreezeRow ( args . row ) ; } let tdElement = [ ] . slice . call ( args . row . querySelectorAll ( 'td.e-rowcell' ) ) ; args . row . innerHTML = '' ; tdElement = this . updateFreezeEdit ( args . row , tdElement ) ; args . row . appendChild ( this . getEditElement ( elements , true , tdElement , args , true ) ) ; args . row . classList . add ( 'e-editedrow' ) ; this . refreshFreezeEdit ( args . row , args ) ; } private refreshFreezeEdit ( row , args ) { let td = row . firstChild as Element ; let fCls ; let cont ; let idx = parseInt ( row . getAttribute ( 'aria-rowindex' ) , 10 ) ; if ( this . parent . getFrozenColumns ( ) ) { if ( idx < this . parent . frozenRows ) { cont = this . parent . getHeaderContent ( ) ; fCls = '.e-frozenheader' ; } else { cont = this . parent . getContent ( ) ; fCls = '.e-frozencontent' ; } let mTd = td . cloneNode ( true ) as Element ; let form = args . movableForm = mTd . querySelector ( 'form' ) ; if ( this . parent . editSettings . template ) { form . innerHTML = '' ; this . appendChildren ( form , args . rowData , false ) ; } let fRows ; if ( cont . querySelector ( fCls ) . contains ( row ) ) { fRows = this . parent . getMovableRowByIndex ( idx ) ; this . updateFrozenCont ( fRows , td , mTd ) ; } else { fRows = this . parent . getRowByIndex ( idx ) ; this . updateFrozenCont ( fRows , mTd , td ) ; } fRows . appendChild ( mTd ) ; fRows . classList . add ( 'e-editedrow' ) ; } } private updateFrozenCont ( row , ele , mEle ) { row . innerHTML = '' ; if ( ! this . parent . editSettings . template ) { this . renderMovable ( ele , mEle ) ; mEle . querySelector ( 'colgroup' ) . innerHTML = this . parent . getHeaderContent ( ) . querySelector ( '.e-movableheader' ) . querySelector ( 'colgroup' ) . innerHTML ; } ele . setAttribute ( 'colspan' , this . parent . getVisibleFrozenColumns ( ) + '' ) ; mEle . setAttribute ( 'colspan' , this . parent . getVisibleColumns ( ) . length - this . parent . getVisibleFrozenColumns ( ) + '' ) ; } private renderMovable ( ele , mEle ) { let frzCols = this . parent . getFrozenColumns ( ) ; for ( let i = 0 ; i < frzCols ; i ++ ) { mEle . querySelector ( 'tr' ) . removeChild ( mEle . querySelector ( 'tr' ) . children [ 0 ] ) ; } for ( let i = frzCols , len = ele . querySelector ( 'tr' ) . childElementCount ; i < len ; i ++ ) { ele . querySelector ( 'tr' ) . removeChild ( ele . querySelector ( 'tr' ) . children [ ele . querySelector ( 'tr' ) . childElementCount - 1 ] ) ; } } private getEditElement ( elements ? , isEdit ? , tdElement ? , args ? , isFrozen ? ) { let gObj = this . parent ; let gLen = 0 ; let isDetail = ! isNullOrUndefined ( gObj . detailTemplate ) || ! isNullOrUndefined ( gObj . childGrid ) ? 1 : 0 ; if ( gObj . allowGrouping ) { gLen = gObj . groupSettings . columns . length ; } let td = this . parent . createElement ( 'td' , { className : 'e-editcell e-normaledit' , attrs : { colspan : ( gObj . getVisibleColumns ( ) . length - gObj . getVisibleFrozenColumns ( ) + gLen + isDetail ) . toString ( ) } } ) as HTMLTableCellElement ; let form = ( < { form : HTMLFormElement ; } > args ) . form = this . parent . createElement ( 'form' , { id : gObj . element . id + 'EditForm' , className : 'e-gridform' } ) as HTMLFormElement ; if ( this . parent . editSettings . template ) { this . appendChildren ( form , args . rowData , isFrozen ) ; td . appendChild ( form ) ; return td ; } let table = this . parent . createElement ( 'table' , { className : 'e-table e-inline-edit' , attrs : { cellspacing : '0.25' } } ) ; table . appendChild ( gObj . getContentTable ( ) . querySelector ( 'colgroup' ) . cloneNode ( true ) ) ; let tbody = this . parent . createElement ( 'tbody' ) ; let tr = this . parent . createElement ( 'tr' ) ; let i = 0 ; if ( isDetail ) { tr . insertBefore ( this . parent . createElement ( 'td' , { className : 'e-detailrowcollapse' } ) , tr . firstChild ) ; } while ( i < gLen ) { tr . appendChild ( this . parent . createElement ( 'td' , { className : 'e-indentcell' } ) ) ; i ++ ; } let m = 0 ; i = 0 ; while ( ( isEdit && m < tdElement . length && i < gObj . getColumns ( ) . length ) || i < gObj . getColumns ( ) . length ) { let span = isEdit ? tdElement [ m ] . getAttribute ( 'colspan' ) : null ; let col = gObj . getColumns ( ) [ i ] as Column ; let td = this . parent . createElement ( 'td' , { className : 'e-rowcell' , attrs : { style : 'text-align:' + ( col . textAlign ? col . textAlign : '' ) , 'colspan' : span ? span : '' } } ) ; if ( col . visible ) { td . appendChild ( elements [ col . uid ] ) ; if ( col . editType === 'booleanedit' ) { td . classList . add ( 'e-boolcell' ) ; } else if ( col . commands || col . commandsTemplate ) { addClass ( [ td ] , 'e-unboundcell' ) ; } } else { td . classList . add ( 'e-hide' ) ; } tr . appendChild ( td ) ; i = span ? i + parseInt ( span , 10 ) : i + 1 ; m ++ ; } tbody . appendChild ( tr ) ; table . appendChild ( tbody ) ; form . appendChild ( table ) ; td . appendChild ( form ) ; return td ; } public removeEventListener ( ) { } private appendChildren ( form , data , isFrozen ) { let dummyData = extend ( { } , data , { isAdd : ! this . isEdit , isFrozen : isFrozen } , true ) ; appendChildren ( form , this . parent . getEditTemplate ( ) ( dummyData , this . parent , 'editSettingsTemplate' ) ) ; } }