import { isNullOrUndefined , extend } from '@syncfusion/ej2-base' ; import { attributes } from '@syncfusion/ej2-base' ; import { Column } from '../models/column' ; import { Cell } from '../models/cell' ; import { ICellRenderer , IGrid } from '../base/interface' ; import { setStyleAndAttributes , appendChildren } from '../base/util' ; import { CellRenderer } from './cell-renderer' ; import { AriaService , IAriaOptions } from '../services/aria-service' ; import { createCheckBox } from '@syncfusion/ej2-buttons' ; import { headerCellInfo } from '../base/constant' ; hidden export class HeaderCellRenderer extends CellRenderer implements ICellRenderer < Column > { public element : HTMLElement = this . parent . createElement ( 'TH' , { className : 'e-headercell' , attrs : { role : 'columnheader' , tabindex : '-1' } } ) ; private ariaService : AriaService = new AriaService ( ) ; private hTxtEle : Element = this . parent . createElement ( 'span' , { className : 'e-headertext' } ) ; private sortEle : Element = this . parent . createElement ( 'div' , { className : 'e-sortfilterdiv e-icons' } ) ; private gui : Element = this . parent . createElement ( 'div' ) ; private chkAllBox : Element = this . parent . createElement ( 'input' , { className : 'e-checkselectall' , attrs : { 'type' : 'checkbox' } } ) ; returns public getGui ( ) { return < Element > this . gui . cloneNode ( ) ; } param { Column } column param { Object } data param { Element } public render ( cell , data , attributes ? ) { let node = this . element . cloneNode ( ) as Element ; let fltrMenuEle = this . parent . createElement ( 'div' , { className : 'e-filtermenudiv e-icons e-icon-filter' } ) ; return this . prepareHeader ( cell , node , fltrMenuEle ) ; } param { Cell } cell param { Element } node public refresh ( cell , node ) { this . clean ( node ) ; let fltrMenuEle = this . parent . createElement ( 'div' , { className : 'e-filtermenudiv e-icons e-icon-filter' } ) ; return this . prepareHeader ( cell , node , fltrMenuEle ) ; } private clean ( node ) { node . innerHTML = '' ; } private prepareHeader ( cell , node , fltrMenuEle ) { let column = cell . column ; let ariaAttr = { } ; let innerDIV = < HTMLDivElement > this . getGui ( ) ; attributes ( innerDIV , { 'e-mappinguid' : column . uid , 'class' : 'e-headercelldiv' } ) ; if ( column . type !== 'checkbox' ) { let value = column . headerText ; let headerText = < Element > this . hTxtEle . cloneNode ( ) ; headerText [ column . getDomSetter ( ) ] = value ; innerDIV . appendChild ( headerText ) ; } else { column . editType = 'booleanedit' ; let checkAllWrap = createCheckBox ( this . parent . createElement , false , { checked : false , label : ' ' } ) ; checkAllWrap . insertBefore ( this . chkAllBox . cloneNode ( ) , checkAllWrap . firstChild ) ; innerDIV . appendChild ( checkAllWrap ) ; innerDIV . classList . add ( 'e-headerchkcelldiv' ) ; } this . buildAttributeFromCell ( node as HTMLElement , cell ) ; this . appendHtml ( node , innerDIV ) ; node . appendChild ( this . sortEle . cloneNode ( ) ) ; if ( ( this . parent . allowFiltering && this . parent . filterSettings . type !== 'FilterBar' ) && ( column . allowFiltering && ! isNullOrUndefined ( column . field ) ) && ! ( this . parent . showColumnMenu && column . showColumnMenu ) ) { attributes ( fltrMenuEle , { 'e-mappinguid' : 'e-flmenu-' + column . uid , } ) ; node . classList . add ( 'e-fltr-icon' ) ; let matchFlColumns = [ ] ; if ( this . parent . filterSettings . columns . length && this . parent . filterSettings . columns . length !== matchFlColumns . length ) { for ( let index = 0 ; index < this . parent . columns . length ; index ++ ) { for ( let count = 0 ; count < this . parent . filterSettings . columns . length ; count ++ ) { if ( this . parent . filterSettings . columns [ count ] . field === column . field ) { fltrMenuEle . classList . add ( 'e-filtered' ) ; matchFlColumns . push ( column . field ) ; break ; } } } } node . appendChild ( fltrMenuEle . cloneNode ( ) ) ; } if ( cell . className ) { node . classList . add ( cell . className ) ; } if ( column . customAttributes ) { setStyleAndAttributes ( node as HTMLElement , column . customAttributes ) ; } if ( column . allowSorting ) { ariaAttr . sort = 'none' ; } if ( column . allowGrouping ) { ariaAttr . grabbed = false ; } node = this . extendPrepareHeader ( column , node ) ; let result ; let gridObj = this . parent ; let colIndex = gridObj . getColumnIndexByField ( column . field ) ; if ( ! isNullOrUndefined ( column . headerTemplate ) ) { result = column . getHeaderTemplate ( ) ( extend ( { 'index' : colIndex } , column ) , gridObj , 'headerTemplate' ) ; node . firstElementChild . innerHTML = '' ; appendChildren ( node . firstElementChild , result ) ; } this . ariaService . setOptions ( < HTMLElement > node , ariaAttr ) ; if ( ! isNullOrUndefined ( column . headerTextAlign ) || ! isNullOrUndefined ( column . textAlign ) ) { let alignment = column . headerTextAlign || column . textAlign ; ( innerDIV as HTMLElement ) . style . textAlign = alignment ; if ( alignment === 'Right' || alignment === 'Left' ) { node . classList . add ( alignment === 'Right' ? 'e-rightalign' : 'e-leftalign' ) ; } else if ( alignment === 'Center' ) { node . classList . add ( 'e-centeralign' ) ; } } if ( column . clipMode === 'Clip' ) { node . classList . add ( 'e-gridclip' ) ; } else if ( column . clipMode === 'EllipsisWithTooltip' ) { node . classList . add ( 'e-ellipsistooltip' ) ; } node . setAttribute ( 'aria-rowspan' , ( ! isNullOrUndefined ( cell . rowSpan ) ? cell . rowSpan : 1 ) . toString ( ) ) ; node . setAttribute ( 'aria-colspan' , '1' ) ; this . parent . trigger ( headerCellInfo , { cell , node } ) ; return node ; } private extendPrepareHeader ( column , node ) { if ( this . parent . showColumnMenu && column . showColumnMenu && ! isNullOrUndefined ( column . field ) ) { let element = ( this . parent . createElement ( 'div' , { className : 'e-icons e-columnmenu' } ) ) ; let matchFilteredColumns = [ ] ; if ( this . parent . filterSettings . columns . length && this . parent . filterSettings . columns . length !== matchFilteredColumns . length ) { for ( let i = 0 ; i < this . parent . columns . length ; i ++ ) { for ( let j = 0 ; j < this . parent . filterSettings . columns . length ; j ++ ) { if ( this . parent . filterSettings . columns [ j ] . field === column . field ) { element . classList . add ( 'e-filtered' ) ; matchFilteredColumns . push ( column . field ) ; break ; } } } } node . classList . add ( 'e-fltr-icon' ) ; node . appendChild ( element ) ; } if ( this . parent . allowResizing ) { let handler = this . parent . createElement ( 'div' ) ; handler . className = column . allowResizing ? 'e-rhandler e-rcursor' : 'e-rsuppress' ; node . appendChild ( handler ) ; } return node ; } param { Element } node param { string | Element } innerHtml returns public appendHtml ( node , innerHtml ) { node . appendChild ( < Element > innerHtml ) ; return node ; } }