projects/i-components/src/lib/components/data-grid/data-grid.component.ts
Create a instance of the DataGridComponent
OnInit
AfterContentInit
AfterViewInit
OnDestroy
DoCheck
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
ViewBoxesStateService
|
| selector | wm-data-grid |
| styleUrls | ./data-grid.component.scss |
| templateUrl | ./data-grid.component.html |
Public
constructor(injectedModel: DataGridModel, cd: ChangeDetectorRef, injector: Injector, viewBoxesStateService: ViewBoxesStateService)
|
||||||||||||||||||||
|
Construct a new DataGridComponent. Register a subscription for the viewBoxesStateService. If the name of the class is DataGridComponent, then do a resize. Otherwise, set the flag to true. component. that is used to notify the grid that it needs to resize.
Parameters :
|
| areRowDetailsFrozen | |
|
Sets AreRowDetailsFrozen property of the datagrid |
|
| autoGenerateColumns | |
Type : boolean
|
|
|
Sets the autoGenerateColumns property of the datagrid |
|
| background | |
|
Sets the Background property of the datagrid |
|
| borderBrush | |
|
Sets the BorderBrush property of the datagrid |
|
| canUserReorderColumns | |
|
Sets CanUserReorderColumns property of the datagrid |
|
| canUserResizeColumns | |
|
Sets the canUserResizeColumns property of the datagrid |
|
| canUserSortColumns | |
|
Sets CanUserSortColumns property of the datagrid |
|
| columnHeaderStyle | |
Type : any
|
|
|
Column header style property |
|
| EnableFullLoaded | |
Type : boolean
|
|
Default value : false
|
|
|
Declaring a variable called EnableFullLoaded and setting it to false. Flag used to show or not the loading overlay |
|
| frozenColumnCount | |
Type : number
|
|
|
Sets the frozenColumnCount property from the datagrid model |
|
| gridLinesVisibility | |
Type : any
|
|
|
Grid lines visibility property |
|
| headersVisibility | |
|
Sets the headersVisibility property of the datagrid |
|
| isReadOnly | |
Type : boolean
|
|
|
sets the readonly property of the datagrid |
|
| itemsSource | |
Type : any
|
|
|
Sets the itemSource property of the datagrid |
|
| model | |
Type : DataGridModel
|
|
|
Object with datagrid properties and events |
|
| reCalcColumnsWidthOnItemSourceChanged | |
Type : boolean
|
|
Default value : false
|
|
|
Flag to set column width calculation when item source change to always instead of only first time |
|
| rowDetailsVisibilityMode | |
Type : any
|
|
|
Sets the rowDetailsVisibilityMode |
|
| rowStyle | |
Type : any
|
|
|
Row style property |
|
| selectedIndex | |
Type : number
|
|
|
sets the selectedIndex property of the datagrid |
|
| selectedItem | |
Type : any
|
|
|
sets the selectedItem property of the datagrid |
|
| selectionMode | |
Type : any
|
|
|
sets the readonly property of the datagrid |
|
| viewBoxesService | |
Type : any
|
|
|
"If the value is true, then set the value to false and call the doResize() function." |
|
| viewBoxesStateServiceInherited | |
Type : ViewBoxesStateService | null
|
|
Default value : null
|
|
|
Reference to the ViewBoxesStateService from the Inherited Component |
|
| controlTemplate | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1197
|
|
|
Sets the controlTemplate Input property for changing the model's |
|
| cursor | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1451
|
|
|
Property used to save the cursor value |
|
| dataContext | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:952
|
|
|
Gets/sets the dataContext Input property for changing the model's |
|
| dataGridRowHeight | |
Type : number
|
|
Default value : 22
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:507
|
|
|
Represents the row height of both the DataGrid and XamGrid components it affects the css and also an internal function that virtualized data, so do not change directly on css, use this variable instead. |
|
| foreground | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1223
|
|
|
Sets the value of the Foreground property |
|
| height | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1394
|
|
|
Sets the height |
|
| horizontalAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1096
|
|
|
Sets the horizontal alignment. |
|
| horizontalContentAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1125
|
|
|
Sets the horizontal content alignment. |
|
| hostHozSelfAlign | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:380
|
|
|
Applies horizontal selfalign class. Flags indicates when the control should handle its own horizontal alignment and ignore container alignment. |
|
| isEnabled | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1008
|
|
|
Gets/sets the isEnabled property for the BaseComponent |
|
| isTabStop | |
Type : boolean
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:760
|
|
|
Sets/gets IsTabStop property of the BaseComponent |
|
| margin | |
Type : string
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:782
|
|
|
Sets Margin property of the BaseComponent. |
|
| maxHeight | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1325
|
|
|
Sets maxHeight |
|
| maxWidth | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1283
|
|
|
Sets maxWidth |
|
| minHeight | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1304
|
|
|
Sets minHeight |
|
| minWidth | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1262
|
|
|
Sets min Width |
|
| name | |
Type : string
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1153
|
|
|
Sets the name model property for the control when the name is an input |
|
| opacity | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1336
|
|
|
Sets Opacity value property of the component |
|
| spellCheck | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:186
|
|
|
Flag to determinate if the component should do the spell check or not. Default value is false. |
|
| style | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1434
|
|
|
Sets the style |
|
| tabIndex | |
Type : number
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:733
|
|
|
Sets the property TabIndex of the control model. |
|
| tag | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1171
|
|
|
Object used in the Tag property of the Button |
|
| useCss | |
Type : boolean
|
|
Default value : false
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:177
|
|
|
Determines if the component uses CSS height/width values, instead of inputs |
|
| verticalAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1038
|
|
|
Sets the vertical alignment. |
|
| verticalContentAlignment | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1067
|
|
|
Sets the vertical content alignment. |
|
| visibility | |
Type : any
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:980
|
|
|
Gets/sets the visibility property for the BaseComponent |
|
| width | |
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1365
|
|
|
Sets the width |
|
| zindex | |
Type : number
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:1498
|
|
|
Property used to set the canvas zindex value. Note: Consider moving this @Input to canvas.direcive.ts, refactoring the directive so all inputs are declared in the directive, and all @HostBindings are declared here in baseComponent, the directive would be responsible for updating the models, while baseComponent will be responsible for binding the values: zIndex, Top, Left... |
|
| currentCellChanged | |
Type : EventEmitter<literal type>
|
|
|
Event for the current cell changed interaction |
|
| selectionChanged | |
Type : EventEmitter<literal type>
|
|
|
Occurs when the SelectedItem or SelectedItems property value changes. |
|
| bindingValidationError | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:114
|
|
|
output to emit the new value of the bindingValidationError event |
|
| layoutUpdated | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:140
|
|
|
Output to emit when then component's layout is updated. |
|
| loaded | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:123
|
|
|
Output to emit when then component is loaded. |
|
| mouseEnter | |
Type : EventEmitter<literal type>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:157
|
|
|
Event Emitter. EventEmitter normally called in the mouseEnterHandler. |
|
| mouseLeave | |
Type : EventEmitter<literal type>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:167
|
|
|
Event Emitter Called in the mouseLeave handler |
|
| mouseLeftButtonUp | |
Type : EventEmitter<literal type>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:147
|
|
|
MouseLeftButtonUp event Emitter. |
|
| sizeChanged | |
Type : EventEmitter<any>
|
|
|
Inherited from
BaseComponent
|
|
|
Defined in
BaseComponent:132
|
|
|
Output to emit when then component size is changed. |
|
| class |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:407
|
|
Applies custom CSS classes |
| class.defaultFontStyles |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:398
|
|
Applies default font styles class, used to allow specificity for each control css |
| class.focusable |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:388
|
|
Display if the component is focusable or not |
| class.hasDefinedCursor |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:415
|
|
Applies Defined Cursor class |
| class.horizontal-center |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:308
|
|
Applies horizontal alignment left class |
| class.horizontal-left |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:298
|
|
Applies horizontal alignment left class |
| class.horizontal-right |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:368
|
|
Applies horizontal alignment right class |
| class.horizontal-stretch |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:358
|
|
Applies horizontal alignment stretch class |
| class.vertical-bottom |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:328
|
|
Applies vertical alignment bottom class |
| class.vertical-center |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:338
|
|
Applies vertical alignment center class |
| class.vertical-stretch |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:318
|
|
Applies horizontal alignment stretch class |
| class.vertical-top |
Type : boolean
|
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:348
|
|
Applies vertical alignment top class |
| style.display |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:243
|
|
Property use it to apply the host binding for the visibility |
| style.font-family |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:261
|
|
Property use it to apply the host binding for the font-family |
| style.font-size |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:270
|
|
Property use it to apply the host binding for the font-size |
| style.font-style |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:279
|
|
Property use it to apply the host binding for the font-style |
| style.font-weight |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:288
|
|
Property use it to apply the host binding for the font-weight |
| style.height |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:218
|
|
Property use it to apply the host binding for the height |
| style.max-height.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:234
|
|
Property used to apply the host binding for max-height |
| style.max-width.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:210
|
|
Property used to apply the host binding for max-width |
| style.min-height.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:226
|
|
Property used to apply the host binding for min-height |
| style.min-width.px |
Type : number
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:202
|
|
Property used to apply the host binding for min-width |
| style.opacity |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:252
|
|
Property use it to apply the host binding for the opacity |
| style.width |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:194
|
|
Property use it to apply the host binding for the width |
| style.z-index |
Type : string
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:424
|
|
Sets the z-index style. |
| Private applyRowDetailsFrozen |
applyRowDetailsFrozen()
|
|
Apply class to igxGrid if the property AreRowDetailsFrozen property is set
Returns :
void
|
| arrowLeft | ||||||
arrowLeft(event: KeyboardEvent)
|
||||||
|
Handler for arrowLeft keydown event
Parameters :
Returns :
boolean
|
| arrowRight | ||||||
arrowRight(event: KeyboardEvent)
|
||||||
|
Handler for arrowRight keydown event
Parameters :
Returns :
boolean
|
| Protected calculateAndSetNonSpecialColumnsWidth |
calculateAndSetNonSpecialColumnsWidth()
|
|
Calculates and sets the columns width used for numeric and star values.
Returns :
void
|
| Protected calculateNumericColumnsWidth | ||||||
calculateNumericColumnsWidth(columnModels: DataGridColumnModel[])
|
||||||
|
Calculates column width for numeric columns.
Parameters :
Returns :
void
|
| Protected calculatePercentPerStar | ||||||
calculatePercentPerStar(starValues: literal type)
|
||||||
|
Calculates width percent that should be given to each star unit.
Parameters :
Returns :
void
|
| Protected calculateStarColumnsWidth | ||||||
calculateStarColumnsWidth(columnModels: DataGridColumnModel[])
|
||||||
|
Calculates column width for star columns.
Parameters :
Returns :
void
|
| Protected calculateStarColumnsWidthLoop | ||||||
calculateStarColumnsWidthLoop(starValues: literal type)
|
||||||
|
Calculates column width for star columns. If some star column gets assigned
a fixed width, it recalculates
Parameters :
Returns :
boolean
{boolean} |
| columnHeaderTemplate | ||||||
columnHeaderTemplate(index: number)
|
||||||
|
Returns the correct header template to be used in case a custom header template was required.
Parameters :
Returns :
DataTemplate
|
| columnMovingEndHandler | ||||||
columnMovingEndHandler(event: any)
|
||||||
|
Called whenever column moving action is being ended
Parameters :
Returns :
void
|
| columnResizedHandler | ||||||
columnResizedHandler(event: IColumnResizeEventArgs)
|
||||||
|
Called whenever a column is resized
Parameters :
Returns :
void
|
| dataChanged | ||||||||
dataChanged(data: any)
|
||||||||
|
If the data changes, wait 500ms, then check if the view boxes contain elements. If they don't, hide the overlay.
Parameters :
Returns :
void
|
| doResize |
doResize()
|
|
When the window is resized, set the column widths, clear the view boxes state, and if the overlay is showing, hide it after 300ms.
Returns :
void
|
| evaluateColumns |
evaluateColumns()
|
|
Evaluate columns to apply width
Returns :
void
|
| evaluateLastColumnWidth |
evaluateLastColumnWidth()
|
|
Evaluates if there is any left space for the las column to take so no blank spaces are remained
Returns :
void
|
| Private expandDetails |
expandDetails()
|
|
Expand IgxGrid Details section Add a class to the grid that hides the expanding row icon
Returns :
void
|
| generateColumns |
generateColumns()
|
|
Method that allows the automatic generation of columns
Returns :
void
|
| Protected getColumnCalcPixelWidth | |||||||||
getColumnCalcPixelWidth(col: IgxColumnComponent, model: DataGridColumnModel)
|
|||||||||
|
Gets the column current used pixel width.
Parameters :
Returns :
number
{number} |
| Private getColumnModelByIndex | ||||||
getColumnModelByIndex(index: number)
|
||||||
|
Parameters :
Returns :
DataGridColumnModel | undefined
{(DataGridColumnModel | undefined)} |
| Protected getGridRemainSpaceInfo |
getGridRemainSpaceInfo()
|
|
Gets the remaining available space
Returns :
{}
|
| getSelectionMode |
getSelectionMode()
|
|
Method that returns the value of the selection mode and transform it to the igxGrid value
Returns :
string
{string} |
| getTemplateInHeaderStyle | ||||||
getTemplateInHeaderStyle(columns: DataGridColumnModel[])
|
||||||
|
Returns template in header style
Parameters :
Returns :
DataTemplate[]
|
| headersVisibilityHandler |
headersVisibilityHandler()
|
|
Hides igx-grid headers row to replicate Silverlight behavior.
Returns :
void
|
| isColSortable | ||||||
isColSortable(column: DataGridColumnModel | DataGridTemplateColumnModel)
|
||||||
|
Returns if the column is sortable
Parameters :
Returns :
boolean
|
| isDetailsVisible |
isDetailsVisible()
|
|
Should returns false when the rowDetailsVisibilityMode is collapsed
Returns :
boolean
{boolean} |
| isEditable | ||||||
isEditable(column: DataGridColumnModel)
|
||||||
|
Determines if the column is an editable column
Parameters :
Returns :
boolean
boolean |
| Private isItemsSourceSorteable |
isItemsSourceSorteable()
|
|
Indicates whether the underlying item source collection provides sorting capabilities
Returns :
boolean
{boolean} true if the underlying items source has at least one sort description |
| keyDownHandler | ||||||
keyDownHandler(e: IGridKeydownEventArgs)
|
||||||
|
Keydown event handler.
Parameters :
Returns :
void
|
| modelChangeHandler | ||||||
modelChangeHandler(name?: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1067
|
||||||
|
Handler for the model's properties change
Parameters :
Returns :
void
|
| modelColumnsChangeHandler | |||||||||
modelColumnsChangeHandler(e: any, args: CollectionChangeInfo)
|
|||||||||
|
Handler for the columns change event
Parameters :
Returns :
void
|
| ngAfterContentInit |
ngAfterContentInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1332
|
|
Angular lifecycle
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1402
|
|
Angular lifecycle
Returns :
void
|
| ngDoCheck |
ngDoCheck()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1481
|
|
Angular lifecycle In charge of triggering the first and any other re-evaluation of the columns width calculation
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1456
|
|
Angular lifecycle
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1319
|
|
Angular lifecycle
Returns :
void
|
| processItemsSourceChange |
processItemsSourceChange()
|
|
Process the itemsSource Change
Returns :
void
|
| registerTabListener |
registerTabListener()
|
|
If the injectorBase is not null, then get the tabService from the injectorBase, and if the tabService is not null, then subscribe to the tabActiveService. if the subscribe is called, then the tabActiveService will recalculate the dataGrid column size.
Returns :
void
The return value is a Subscription object. |
| Protected removeModel | |||||||||
removeModel(models: DataGridColumnModel[], model: DataGridColumnModel)
|
|||||||||
|
Removes
Parameters :
Returns :
void
|
| removeSorting | ||||||
removeSorting(e: any)
|
||||||
|
Method that allows the single sort
Parameters :
Returns :
void
|
| renderedHandler |
renderedHandler()
|
|
Event emitted when the underlying igx-grid is considered 'ready' in the DOM.
Returns :
void
|
| scrolledIntoViewHandler |
scrolledIntoViewHandler(row: number, col: number)
|
|
Handler for the ScrollIntoView method
Returns :
void
|
| selectedHandler | ||||||
selectedHandler(e: IGridCellEventArgs)
|
||||||
|
Handler for the selectedCell Event of the igx-grid
Parameters :
Returns :
void
|
| selectedItemChangedHandler | ||||||
selectedItemChangedHandler(name: string)
|
||||||
|
Process selected item or selected index change
Parameters :
Returns :
void
|
| selectedRowHandler | ||||||
selectedRowHandler(e: IRowSelectionEventArgs)
|
||||||
|
Handler for the selectedRow Event of the igx-grid
Parameters :
Returns :
void
|
| Private selectRows | ||||||
selectRows(rowIDs: any[])
|
||||||
|
Selects a set of rows within the grid, make sure to clear cell selections first as cell selection happens by user clicking on a cell (singlor o with Ctrl) or by setting a cell as selected (cell.selected = true), events like changing the items source or selecting new rows don't necessary clear previous cell selections, so we will make sure to start with a clean slate
Parameters :
Returns :
void
|
| Protected setColumnsToMinimumWidth | ||||||
setColumnsToMinimumWidth(starColumnModels: DataGridColumnModel[])
|
||||||
|
Sets widths to
Parameters :
Returns :
void
|
| Protected setColumnsWidth | ||||||
setColumnsWidth(isRendering)
|
||||||
|
Called once after rendering of the DataGrid.
Setups the width property for the column models based on the grid
Parameters :
Returns :
void
|
| Protected setColumnWidthSpecialCase | |||||||||
setColumnWidthSpecialCase(col: IgxColumnComponent, columnWidth: DataGridLengthModel)
|
|||||||||
|
Sets the igx column size for special scenarios using autosize
Parameters :
Returns :
boolean
|
| Private shouldReCalcColumnsWidth |
shouldReCalcColumnsWidth()
|
|
Indicates if the columns width calculation mechanism should be trigger again
Returns :
boolean
|
| sortingHandler | ||||||
sortingHandler(e: any)
|
||||||
|
Called whenever sorting action is done Avoids the sorting 'None' state
Parameters :
Returns :
void
|
| Private sortItemsSource | ||||||||
sortItemsSource(sortExpressions: any[])
|
||||||||
|
Sorts the underlying collection view by updating its sort description to the elements clicked in the grid
Parameters :
Returns :
void
|
| syncSelectedItem |
syncSelectedItem()
|
|
Syncs model SelectedItem property with selectedItem of the IgxGrid.
Returns :
void
|
| updateInheritedHandlers |
updateInheritedHandlers()
|
|
Method that updates the handlers of the child datagrid with the parent datagrid ones.
Returns :
void
|
| validateIfViewBoxesContainsElements |
validateIfViewBoxesContainsElements()
|
|
If the currentViewBoxesStateService is not null and the total number of view boxes is greater than 0, return true.
Returns :
boolean
A boolean value. |
| Protected alignmentHandler |
alignmentHandler()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2346
|
|
Calculate the values for the grid size behavior from the alignments
Returns :
void
|
| Protected assignPendingPropertyValues |
assignPendingPropertyValues()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2057
|
|
Apply pending assignments to properties with property values
Returns :
void
|
| calculateActualSize | ||||||||
calculateActualSize(name?: string)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:1674
|
||||||||
|
If the name is equal to 'calculateActualSize', then call the handlerCalcActualSize function and pass in false to avoid the timer in the function. memberof BaseComponent
Parameters :
Returns :
void
|
| Protected checkAndRegisterCompatibilityBinding | |||||||||
checkAndRegisterCompatibilityBinding(property: DependencyProperty, bindingObjectCandidate: any)
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2023
|
|||||||||
|
Verifies if the given object (bindingObjectCandidate) is a binding object. If so the binding will be registered.
Parameters :
Returns :
boolean
{boolean} true if the value is a binding info object and if the binding was registered, false if not |
| Protected checkForStaticResource | ||||||||||||
checkForStaticResource(property: string, value: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:2043
|
||||||||||||
|
Checks if the given value is a static resource reference or not, if a reference then the value is queue for later assignment.
Parameters :
Returns :
boolean
true if the value is a static resource reference, otherwise false |
| checkStaticItemInModelCollection | ||||||||||||
checkStaticItemInModelCollection(collection: any, itemToCheck: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1889
|
||||||||||||
|
Checks if the element exists previously in the items collection
Parameters :
Returns :
number
number Returns -1 if the item is not present in the items collection otherwise the index value |
| createElementInRoot |
createElementInRoot(injector: Injector, componentToCreate: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2698
|
|
Create a given component on the HTML body.
Returns :
ComponentRef<any>
|
| cursorStyle |
cursorStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1549
|
|
Returns the correct CSS cursor style and sets the definedCursor flag if necessary
Returns :
string
{string} |
| detectChanges |
detectChanges()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:813
|
|
Performs a single detect Changes over the component
Returns :
void
|
| detectChangesAction |
detectChangesAction()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1686
|
|
Handle subscription to the notifyDetectChanges action Refresh the component whenever a model modification was performed
Returns :
void
|
| getForeground |
getForeground()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1966
|
|
Calculates the Foreground color to be applied
Returns :
string
string |
| getImageString | ||||||
getImageString(value: any)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2221
|
||||||
|
Returns string path to the image.
Parameters :
Returns :
any
|
| getTargetValue | ||||||
getTargetValue(e: Event)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2239
|
||||||
|
Returns the value from a $event
Parameters :
Returns :
string
|
| Protected handlerCalcActualSize | ||||||
handlerCalcActualSize(async: boolean)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2391
|
||||||
|
Handler that calculates ActualHeight & ActualWidth based on its inner content.
Parameters :
Returns :
void
|
| heightCalc |
heightCalc()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1939
|
|
Applies the height CSS value
Returns :
any
|
| heightDefaultStyle |
heightDefaultStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1914
|
|
Calculates the auto height value
Returns :
string
{string} |
| Protected hostHorizontalAlignmentCall |
hostHorizontalAlignmentCall()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2374
|
|
Assign all the horizontal bindings for the control
Returns :
void
|
| Protected hostVerticalAlignmentCall |
hostVerticalAlignmentCall()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2357
|
|
Assign all the vertical bindings for the control
Returns :
void
|
| imageToPath | ||||||
imageToPath(value: any)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2202
|
||||||
|
Returns the path of the given image.
Parameters :
Returns :
any
|
| loadStaticItems | ||||||||||||
loadStaticItems(staticItems: any, itemsCollection: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1634
|
||||||||||||
|
Parameters :
Returns :
void
void |
| Private markForCheckComp |
markForCheckComp()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2451
|
|
Marks current component
Returns :
void
|
| mouseEnterHandler | ||||||||
mouseEnterHandler(event: any)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:1982
|
||||||||
|
Event Handler for when the mouse enter the Image component.
Parameters :
Returns :
void
|
| mouseLeaveHandler | ||||||||
mouseLeaveHandler(event: any)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:2001
|
||||||||
|
Event Handler for when the mouse enter the Image component.
Parameters :
Returns :
void
|
| Public ngAfterContentChecked |
ngAfterContentChecked()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:867
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngAfterViewChecked |
ngAfterViewChecked()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:893
|
|
Angular Lifecycle Hooks
Returns :
void
|
| Public ngOnChanges |
ngOnChanges()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:824
|
|
Angular Lifecycle Hooks
Returns :
void
|
| preventItemsDuplication | ||||||||||||||||||
preventItemsDuplication(itemsToRender: any, items: any, contentChildTemplate: any, afterContentInitCalled: boolean, injector: Injector)
|
||||||||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||||||||
|
Defined in
BaseComponent:2170
|
||||||||||||||||||
|
Validates if coming models are the same, and prevents to be recreated on Ribbon DOM. (Needs to be checked, in some statics scenarios RibbonTab, RibbonGroup duplicates items)
Parameters :
Returns :
any[]
|
| processAlignments | ||||||
processAlignments(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1704
|
||||||
|
Method to check if the component should assign a alignment property
Parameters :
Returns :
void
{void} |
| processCursor | ||||||
processCursor(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1850
|
||||||
|
Method to set the cursor style of the component
Parameters :
Returns :
void
|
| processCustomCssClasses | ||||||
processCustomCssClasses(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1723
|
||||||
|
Method to set custom CSS Clases
Parameters :
Returns :
void
{void} |
| processFocusable | ||||||
processFocusable(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1816
|
||||||
|
Method to check and set the height of the grid
Parameters :
Returns :
void
|
| Private processFontFamily | ||||||
processFontFamily(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2784
|
||||||
|
Process the FontFamily property
Parameters :
Returns :
any
|
| processFonts | ||||||
processFonts(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1778
|
||||||
|
Method to apply the font styles for the component.
Parameters :
Returns :
void
|
| Private processFontSize | ||||||
processFontSize(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2798
|
||||||
|
Process the FontSize property
Parameters :
Returns :
any
|
| Private processFontStyle | ||||||
processFontStyle(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2815
|
||||||
|
Process the FontStyle property
Parameters :
Returns :
any
|
| Private processFontWeight | ||||||
processFontWeight(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2832
|
||||||
|
Process the FontWeight property
Parameters :
Returns :
any
|
| processHeights | ||||||
processHeights(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1797
|
||||||
|
Method to check and set the height of the grid
Parameters :
Returns :
void
|
| processIsEnabled | ||||||
processIsEnabled(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1764
|
||||||
|
Process changes to
Parameters :
Returns :
void
|
| processOpacity | ||||||
processOpacity(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1751
|
||||||
|
Method to apply the opacity for the component.
Parameters :
Returns :
void
|
| processVisibility | ||||||
processVisibility(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1737
|
||||||
|
Method to check if the component should be show or hide.
Parameters :
Returns :
void
|
| processWidths | ||||||
processWidths(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1829
|
||||||
|
Method to check and set the width of the grid
Parameters :
Returns :
void
|
| Private processZIndex | ||||||
processZIndex(name: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1872
|
||||||
|
Method to process the ZIndex when set through the model
Parameters :
Returns :
void
|
| Private recreateInvalidBindings |
recreateInvalidBindings()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2756
|
|
Execution of removeModelProxyHandlers in a previous instance of the component (that used the same model) could have set some bindings in an invalid state, this will check if some of them has to be recreated
Returns :
void
|
| Private registerContextMenuActions | ||||||
registerContextMenuActions(ctxMenu: ContextMenuManager)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2533
|
||||||
|
Enable the contextMenu actions to be displayed when the user perform an action Creates dinamically a new instance of XamContextMenu to be displayed in the screen
Parameters :
Returns :
void
|
| Protected registerDomEventListenerOnElement |
registerDomEventListenerOnElement(eventName: string, handler: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2316
|
|
Registers a DOM handler on the current element
Returns :
void
|
| Protected registerHandler | |||||||||
registerHandler(event: SubscriptionEvent<void>, arrowHandler: (s: any,a: any) => void)
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2298
|
|||||||||
|
Register arrow handler into the given
Parameters :
Returns :
void
|
| Protected registerMouseEvents |
registerMouseEvents()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2272
|
|
Registers mouse events if required
Returns :
void
|
| Protected registerObservers | ||||||||||||
registerObservers(emitter: EventEmitter
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:2252
|
||||||||||||
|
Register observers from the given
Parameters :
Returns :
void
|
| Private registerToolTip | |||||||||
registerToolTip(element: ElementRef
|
|||||||||
|
Inherited from
BaseComponent
|
|||||||||
|
Defined in
BaseComponent:2607
|
|||||||||
|
Registers a tooltip to a component
Parameters :
Returns :
void
|
| Private removeModelProxyHandlers |
removeModelProxyHandlers()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2738
|
|
Clean up the handlers when the component is destroyed
Returns :
void
|
| Private setComponentForDirectives |
setComponentForDirectives()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2512
|
|
Sets an internal reference through the element ref to access the component in a directive
Returns :
void
|
| Protected setPendingPropertyValue |
setPendingPropertyValue(property: string, value: any)
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2336
|
|
Stores the pending property values for instance attach properties. Which will be applied when the model is available
Returns :
void
|
| setupDependencyComponents | ||||||
setupDependencyComponents(model: FrameworkElement)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1612
|
||||||
|
Adds the references to the dependency components
Parameters :
Returns :
void
|
| setupModel | ||||||
setupModel(model: FrameworkElement)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:1559
|
||||||
|
Syncs the modelProxy with model
Parameters :
Returns :
void
void |
| Private syncToolTip | ||||||
syncToolTip(tooltip: ToolTipModel)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2587
|
||||||
|
Updates the tooltip associated to a component
Parameters :
Returns :
void
|
| Private syncValidationError | ||||||
syncValidationError(name?: string)
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2766
|
||||||
|
Syncs validation information with component properties
Parameters :
Returns :
void
|
| Private tabSelectionSubscription |
tabSelectionSubscription()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:2471
|
|
Subscribe to the tabhandler event if Required When the component is inside a tab control it should trigger the load event every time the tab is selected
Returns :
void
|
| trackByFn | ||||||||||||
trackByFn(index: any, item: any)
|
||||||||||||
|
Inherited from
BaseComponent
|
||||||||||||
|
Defined in
BaseComponent:1904
|
||||||||||||
|
Function used by Angular to track elements in the ngFor directive. We use the GUID property to compare elements.
Parameters :
Returns :
any
{*} -return the model or object itself |
| Private unregisterToolTip | ||||||
unregisterToolTip(element: ElementRef
|
||||||
|
Inherited from
BaseComponent
|
||||||
|
Defined in
BaseComponent:2719
|
||||||
|
Unregisters a tooltip to a component
Parameters :
Returns :
void
|
| Private updateSizePropertiesForActualSizeChange | ||||||||
updateSizePropertiesForActualSizeChange(element: Element)
|
||||||||
|
Inherited from
BaseComponent
|
||||||||
|
Defined in
BaseComponent:2421
|
||||||||
|
Updates the size properties of the component based on the initial size change
Parameters :
Returns :
void
|
| validatesLoadingFlag |
validatesLoadingFlag()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1519
|
|
Validates loading flag for components outside current tab index TabIndexService should be only tabItem provider, and when currentTabId is different from selectedTab IsFirstTimeLoad is set to false because tabService is going to be one in charge to trigger only one time when tab changes.
Returns :
void
|
| widthCalc |
widthCalc()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1953
|
|
Applies the width CSS value
Returns :
any
|
| widthDefaultStyle |
widthDefaultStyle()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:1926
|
|
Calculates the auto width value
Returns :
string
{string} |
| Private cachedGridWidth |
Type : number
|
Default value : 0
|
|
Cached latest grid width used to determine if the columns should be calculated again |
| columnHeaderStylesArray |
Type : DataTemplate[]
|
|
Array that contains header styles for each column |
| columnsComponent |
Type : DataGridColumnsComponent
|
Decorators :
@ContentChild(DataGridColumnsComponent)
|
|
Gets the text column definitions |
| currentCellChanged |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Event for the current cell changed interaction |
| customSortingStrategy |
Type : ISortingStrategy
|
|
Custom sorting strategy configuration to be used by the template column |
| dataGridComponent |
Type : DataGridComponent
|
Decorators :
@ViewChild(DataGridComponent)
|
|
Gets the current DataGridComponent if it is an inherited Component |
| EnableFullLoaded |
Default value : false
|
Decorators :
@Input()
|
|
Declaring a variable called EnableFullLoaded and setting it to false. Flag used to show or not the loading overlay |
| Protected eventManager |
Type : XamDataGridEventManager
|
|
Event manager to change the order of certain events |
| Private forcedColumnsWidthCalc |
Default value : false
|
|
Forces the calculation of the columns width |
| Public gridLinesVisibilityClasses |
Type : object
|
Default value : {
'grid-row-override': true,
'horizontal-grid-lines': (row: RowType) =>
this.gridLinesVisibility == 'Horizontal',
'vertical-grid-lines': (row: RowType) =>
this.gridLinesVisibility == 'Vertical',
'all-grid-lines': (row: RowType) => this.gridLinesVisibility == 'All',
'none-grid-lines': (row: RowType) => this.gridLinesVisibility == 'None',
}
|
|
Sets a scss class to the grid row base on the GridLinesVisibility property |
| Public gridRef |
Type : IgxGridComponent
|
Decorators :
@ViewChild('grid', {read: IgxGridComponent})
|
|
IgxGrid component |
| igxGridsChild |
Type : IgxGridComponent
|
Decorators :
@ViewChild(IgxGridComponent)
|
|
Gets the columns generated by the igx-grid |
| Private internalselectionFlag |
Default value : false
|
|
flag that allows the selection using model's properties changed outside of the component |
| Private isColumnsWidthSet |
Default value : false
|
|
Flag to check when the grid has calculated the first column width |
| isInitialized |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:957
|
|
Flag to know if the component is ready to render |
| Protected isItemsSourceLoaded |
Default value : false
|
|
Flag to know if the items source is already loaded |
| lastSortingExpression |
Type : ISortingExpression[]
|
|
Keeps a reference to last sorting expression to avoid 'None' state |
| Public model |
Type : DataGridModel
|
Decorators :
@Input()
|
|
Object with datagrid properties and events |
| Protected modelProxy |
Type : DataGridModel
|
Default value : ModelProxy.create<DataGridModel>()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:983
|
|
ModelProxy is copy of model, used on the component initial building to prevent crashes with external bindings. |
| Public reCalcColumnsWidthOnItemSourceChanged |
Default value : false
|
Decorators :
@Input()
|
|
Flag to set column width calculation when item source change to always instead of only first time |
| reCalcSize |
Default value : false
|
|
Flag used it to know if an Inherited DataGridComponent call a doResize(), and should refresh in the internal dataGrid |
| refreshWidthCalcTimer |
Type : any
|
|
Timer to re-calculate the size column of the grid |
| rendered |
Default value : false
|
|
Flag to check the grid rendered event emitter |
| Private requiredSpecialValuesSizeReCalc |
Default value : false
|
|
Forces the calculation of the columns width for special values |
| rowDetailsTemplate |
Type : TemplateRef<any>
|
Decorators :
@ContentChild('rowDetailsTemplate')
|
|
Row details template This will be used on master detail grid |
| selectionChanged |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Occurs when the SelectedItem or SelectedItems property value changes. |
| showOverlay |
Default value : true
|
|
Show or hide the loading overlay |
| tabActiveService |
Type : Subscription
|
|
Reference to the tabActiveService Subscription to know if the tab is active. This reference is used to clean the subscription when the component is destroyed. |
| Private toleranceGridColumnWidth |
Type : number
|
Default value : 18
|
|
Tolerance of grid columns width mechanism |
| Private updatingSort |
Default value : false
|
|
Flag to mark that itemsSource.SortDescription is being updated to avoid reentrance |
| viewBoxesStateServiceInherited |
Type : ViewBoxesStateService | null
|
Default value : null
|
Decorators :
@Input()
|
|
Reference to the ViewBoxesStateService from the Inherited Component |
| viewBoxesSubscription |
Type : any
|
|
Keeps the references to the subscription for the viewBoxesService |
| actualSizeCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:481
|
|
Flag to know if the Angular event was called |
| afterContentInitCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:465
|
|
Flag to know if the Angular event was called |
| afterViewCheckedCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:473
|
|
Flag to know if the Angular event was called |
| afterViewInitCalled |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:457
|
|
Flag to know if the Angular event was called |
| Private bindingValidationCallback |
Type : function
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:618
|
|
Callback for binding validation |
| bindingValidationError |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:114
|
|
output to emit the new value of the bindingValidationError event |
| Private cdRefInjection |
Type : ChangeDetectorRef
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:659
|
|
Change Detector Reference for the component |
| Private changeDetectionTimer |
Type : any
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:668
|
|
A timer to debounce changedetection actions |
| Protected changeDetectorNotifier |
Type : ChangeDectionNotifierService
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:576
|
|
Change Detection Notifier Service instace. |
| Private contextMenuUnlistener |
Type : function
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:676
|
|
Context Menu event unlisten action. |
| Private ctxMenuInstance |
Type : any
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:630
|
|
Reference to the ctxMenuInstance |
| customCssClasses |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('class')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:407
|
|
Applies custom CSS classes |
| Private customTooltipInstance |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:641
|
|
Reference to the custom tooltip instance this is used to render a popup with custom elements used when the content value is not a string |
| dataGridRowHeight |
Type : number
|
Default value : 22
|
Decorators :
@Input()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:507
|
|
Represents the row height of both the DataGrid and XamGrid components it affects the css and also an internal function that virtualized data, so do not change directly on css, use this variable instead. |
| Protected domHandlerUnListeners |
Type : Array<void>
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:567
|
|
A collection (possible undefined) of DOM unlistener functions . That is, functions to de register handlers |
| fireLoadedSubscription |
Type : Subscription
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:449
|
|
Flag to control load event for components inside tab control |
| focusable |
Default value : false
|
Decorators :
@HostBinding('class.focusable')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:388
|
|
Display if the component is focusable or not |
| Protected handlersToUnregister |
Type : Array<>
|
Default value : []
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:558
|
|
handlers to unregister when the component is destroyed |
| hasDefinedCursor |
Default value : false
|
Decorators :
@HostBinding('class.hasDefinedCursor')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:415
|
|
Applies Defined Cursor class |
| hostFontFamily |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-family')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:261
|
|
Property use it to apply the host binding for the font-family |
| hostFontSize |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-size')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:270
|
|
Property use it to apply the host binding for the font-size |
| hostFontStyle |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-style')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:279
|
|
Property use it to apply the host binding for the font-style |
| hostFontStyles |
Default value : false
|
Decorators :
@HostBinding('class.defaultFontStyles')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:398
|
|
Applies default font styles class, used to allow specificity for each control css |
| hostFontWeight |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.font-weight')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:288
|
|
Property use it to apply the host binding for the font-weight |
| hostHeight |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.height')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:218
|
|
Property use it to apply the host binding for the height |
| hostHozCenter |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-center')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:308
|
|
Applies horizontal alignment left class |
| hostHozLeft |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-left')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:298
|
|
Applies horizontal alignment left class |
| hostHozRight |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-right')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:368
|
|
Applies horizontal alignment right class |
| hostHozSelfAlign |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-selfalign')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:380
|
|
Applies horizontal selfalign class. Flags indicates when the control should handle its own horizontal alignment and ignore container alignment. |
| hostHozStretch |
Default value : false
|
Decorators :
@HostBinding('class.horizontal-stretch')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:358
|
|
Applies horizontal alignment stretch class |
| hostMaxHeight |
Type : number
|
Decorators :
@HostBinding('style.max-height.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:234
|
|
Property used to apply the host binding for max-height |
| hostMaxWidth |
Type : number
|
Decorators :
@HostBinding('style.max-width.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:210
|
|
Property used to apply the host binding for max-width |
| hostMinHeight |
Type : number
|
Decorators :
@HostBinding('style.min-height.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:226
|
|
Property used to apply the host binding for min-height |
| hostMinWidth |
Type : number
|
Decorators :
@HostBinding('style.min-width.px')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:202
|
|
Property used to apply the host binding for min-width |
| hostOpacity |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.opacity')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:252
|
|
Property use it to apply the host binding for the opacity |
| hostVerBottom |
Default value : false
|
Decorators :
@HostBinding('class.vertical-bottom')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:328
|
|
Applies vertical alignment bottom class |
| hostVerCenter |
Default value : false
|
Decorators :
@HostBinding('class.vertical-center')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:338
|
|
Applies vertical alignment center class |
| hostVerStretch |
Default value : false
|
Decorators :
@HostBinding('class.vertical-stretch')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:318
|
|
Applies horizontal alignment stretch class |
| hostVerTop |
Default value : false
|
Decorators :
@HostBinding('class.vertical-top')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:348
|
|
Applies vertical alignment top class |
| hostVisibility |
Type : any
|
Default value : null
|
Decorators :
@HostBinding('style.display')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:243
|
|
Property use it to apply the host binding for the visibility |
| hostWidth |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.width')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:194
|
|
Property use it to apply the host binding for the width |
| hostZIndex |
Type : string
|
Default value : null
|
Decorators :
@HostBinding('style.z-index')
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:424
|
|
Sets the z-index style. |
| isInternalInherit |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:515
|
|
Flag which indicates that the component is an internal use for inheritance |
| layoutUpdated |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:140
|
|
Output to emit when then component's layout is updated. |
| loaded |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:123
|
|
Output to emit when then component is loaded. |
| Protected modelChangeRef |
Type : function
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:601
|
|
Contains the reference of the function added for handle the model's change |
| mouseEnter |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:157
|
|
Event Emitter. EventEmitter normally called in the mouseEnterHandler. |
| mouseLeave |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:167
|
|
Event Emitter Called in the mouseLeave handler |
| Private mouseLeaveTooltipUnlistener |
Type : function
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:684
|
|
Mouse over event for tooltip unlisten action. |
| mouseLeftButtonUp |
Type : EventEmitter<literal type>
|
Default value : new EventEmitter<any>()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:147
|
|
MouseLeftButtonUp event Emitter. |
| Private mouseMoveTooltipUnlistener |
Type : function
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:701
|
|
Mouse move event for tooltip unlisten action. This should have a short lifespan, as much as it takes for the tooltip to be shown |
| Private mouseOverTooltipUnlistener |
Type : function
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:692
|
|
Mouse over event for tooltip unlisten action. |
| Protected ngZone |
Type : NgZone
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:585
|
|
Angular´s NgZone accessor |
| Protected pendingDependencyPropertyValue |
Type : Array<>
|
Default value : []
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:549
|
|
A collection of pending dependency properties values to assign to the model |
| Protected pendingSetValues |
Type : Array<>
|
Default value : []
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:540
|
|
A collection of pending values to assign to the model |
| Protected renderer2 |
Type : Renderer2
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:594
|
|
Angular´s Renderer2 |
| sizeChanged |
Type : EventEmitter<any>
|
Default value : new EventEmitter()
|
Decorators :
@Output()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:132
|
|
Output to emit when then component size is changed. |
| Private sizeChangedPendingTimeout |
Type : any
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:610
|
|
Timeout id for triggering the sizechanged event |
| spellCheck |
Default value : false
|
Decorators :
@Input()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:186
|
|
Flag to determinate if the component should do the spell check or not. Default value is false. |
| staticContent |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:432
|
|
cache the static content of the control to validate if the current data is not equals. |
| tabSubscription |
Type : Subscription
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:440
|
|
TabSelection event subscription |
| Private tooltipMousePosition |
Type : DOMRect
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:710
|
|
To track the position of the mouse while the tooltip is being displayed |
| Private toolTipTimeout |
Type : any
|
Default value : null
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:650
|
|
To control the timer to show the tooltip |
| useCss |
Default value : false
|
Decorators :
@Input()
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:177
|
|
Determines if the component uses CSS height/width values, instead of inputs |
| validationError |
Default value : false
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:488
|
|
Property to set the validationError class in the component |
| validationErrorMessage |
Type : string
|
Default value : ''
|
|
Inherited from
BaseComponent
|
|
Defined in
BaseComponent:496
|
|
Property for specifying validation error message |
| igxGrid |
getigxGrid()
|
|
Gets the igxGrid reference for DataGrids and extended Components
Returns :
IgxGridComponent
|
| currentViewBoxesStateService |
getcurrentViewBoxesStateService()
|
|
"If the inherited service is not null, return the inherited service, otherwise return the service that is a member of the class."
Returns :
ViewBoxesStateService
|
| viewBoxesService | ||||||||
setviewBoxesService(value: any)
|
||||||||
|
"If the value is true, then set the value to false and call the doResize() function."
Parameters :
Returns :
void
|
| autoGenerateColumns | ||||||
getautoGenerateColumns()
|
||||||
|
Gets the autoGenerateColumns property of the datagrid
Returns :
boolean
|
||||||
setautoGenerateColumns(value: boolean)
|
||||||
|
Sets the autoGenerateColumns property of the datagrid
Parameters :
Returns :
void
|
| rowStyle | ||||||
getrowStyle()
|
||||||
|
Row style property
Returns :
any
|
||||||
setrowStyle(value: any)
|
||||||
|
Row style property
Parameters :
Returns :
void
|
| canUserResizeColumns | ||||||
getcanUserResizeColumns()
|
||||||
|
Gets the canUserResizeColumns property of the datagrid
Returns :
boolean | BindingInfo
|
||||||
setcanUserResizeColumns(value: boolean | BindingInfo)
|
||||||
|
Sets the canUserResizeColumns property of the datagrid
Parameters :
Returns :
void
|
| rowDetailsVisibilityMode | ||||||
getrowDetailsVisibilityMode()
|
||||||
|
Gets the rowDetailsVisibilityMode from the model
Returns :
any
|
||||||
setrowDetailsVisibilityMode(value: any)
|
||||||
|
Sets the rowDetailsVisibilityMode
Parameters :
Returns :
void
|
| canUserReorderColumns | ||||||
getcanUserReorderColumns()
|
||||||
|
Gets CanUserReorderColumns property of the datagrid
Returns :
boolean
|
||||||
setcanUserReorderColumns(value: boolean | BindingInfo)
|
||||||
|
Sets CanUserReorderColumns property of the datagrid
Parameters :
Returns :
void
|
| columnHeaderStyle | ||||||
getcolumnHeaderStyle()
|
||||||
|
Gets the columnHeaderStyle property of the datagrid from the model
Returns :
any
|
||||||
setcolumnHeaderStyle(value: any)
|
||||||
|
Column header style property
Parameters :
Returns :
void
|
| canUserSortColumns | ||||||
getcanUserSortColumns()
|
||||||
setcanUserSortColumns(value: boolean | BindingInfo)
|
||||||
|
Sets CanUserSortColumns property of the datagrid
Parameters :
Returns :
void
|
| areRowDetailsFrozen | ||||||
getareRowDetailsFrozen()
|
||||||
|
Gets AreRowDetailsFrozen property of the datagrid from the model
Returns :
boolean | BindingInfo
|
||||||
setareRowDetailsFrozen(value: BindingInfo | boolean)
|
||||||
|
Sets AreRowDetailsFrozen property of the datagrid
Parameters :
Returns :
void
|
| background | ||||||
getbackground()
|
||||||
|
Gets the Background property of the datagrid
Returns :
string | BindingInfo
|
||||||
setbackground(value: string | BindingInfo)
|
||||||
|
Sets the Background property of the datagrid
Parameters :
Returns :
void
|
| borderBrush | ||||||
getborderBrush()
|
||||||
|
Gets the BorderBrush property of the datagrid
Returns :
string | BindingInfo
|
||||||
setborderBrush(value: BindingInfo | string)
|
||||||
|
Sets the BorderBrush property of the datagrid
Parameters :
Returns :
void
|
| headersVisibility | ||||||
getheadersVisibility()
|
||||||
|
Gets the headersVisibility property of the datagrid |
||||||
setheadersVisibility(value: BindingInfo | string | DataGridHeadersVisibility)
|
||||||
|
Sets the headersVisibility property of the datagrid
Parameters :
Returns :
void
|
| frozenColumnCount | ||||||
getfrozenColumnCount()
|
||||||
|
Gets the frozenColumnCount property from the datagrid model
Returns :
number
|
||||||
setfrozenColumnCount(value: number)
|
||||||
|
Sets the frozenColumnCount property from the datagrid model
Parameters :
Returns :
void
|
| itemsSource | ||||||
getitemsSource()
|
||||||
|
Gets the ItemsSource property for the datagrid
Returns :
any
|
||||||
setitemsSource(value: any)
|
||||||
|
Sets the itemSource property of the datagrid
Parameters :
Returns :
void
|
| itemsSourceArray |
getitemsSourceArray()
|
|
Gets the model.ItemsSourceArray property value
Returns :
any[]
|
| isReadOnly | ||||||
getisReadOnly()
|
||||||
|
gets the readonly property of the datagrid
Returns :
boolean
|
||||||
setisReadOnly(value: boolean)
|
||||||
|
sets the readonly property of the datagrid
Parameters :
Returns :
void
|
| gridLinesVisibility | ||||||
getgridLinesVisibility()
|
||||||
|
Grid lines visibility property
Returns :
any
|
||||||
setgridLinesVisibility(value: any)
|
||||||
|
Grid lines visibility property
Parameters :
Returns :
void
|
| selectionMode | ||||||
setselectionMode(value: any)
|
||||||
|
sets the readonly property of the datagrid
Parameters :
Returns :
void
|
| selectedItem | ||||||
setselectedItem(value: any)
|
||||||
|
sets the selectedItem property of the datagrid
Parameters :
Returns :
void
|
| selectedIndex | ||||||
setselectedIndex(value: number)
|
||||||
|
sets the selectedIndex property of the datagrid
Parameters :
Returns :
void
|
| columns |
getcolumns()
|
|
Gets the columns definitions
Returns :
any[]
|
| selectionFlag | ||||||
getselectionFlag()
|
||||||
|
getter for the selectionflag property in case the component is inherited
Returns :
boolean
|
||||||
setselectionFlag(value: boolean)
|
||||||
|
setter for the selectionflag property in case the component is inherited
Parameters :
Returns :
void
|
| grid |
getgrid()
|
|
Grid reference instance
Returns :
IgxGridComponent
|
| isGridVisible |
getisGridVisible()
|
|
Validates is the grid is already rendered on screen
Returns :
boolean
|
| isColumns |
getisColumns()
|
|
Validates is the grid has any columns
Returns :
boolean
|
| igxRowsRendered |
getigxRowsRendered()
|
|
Returns if there is at least one row rendered
Returns :
boolean
|
| visibleDetails |
getvisibleDetails()
|
|
Always display the details
Returns :
boolean
|
| isReCalcColumnsWidthOnItemSourceChanged |
getisReCalcColumnsWidthOnItemSourceChanged()
|
|
Validates if the columns width should be re-evaluated when item source changes always or only the first time If its called always it can impact performance, specially when filtering rows
Returns :
boolean
|
import {
AfterContentInit,
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ContentChild,
DoCheck,
EventEmitter,
Injector,
Input,
OnDestroy,
OnInit,
Optional,
Output,
Renderer2,
TemplateRef,
Type,
ViewChild,
} from '@angular/core';
import {
Binding,
BindingInfo,
clamp,
CollectionChangeInfo,
DataGridColumnModel,
DataGridHeadersVisibility,
DataGridLengthModel,
DataGridLengthUnitType,
DataGridModel,
DataGridRowDetailsVisibilityMode,
DataGridTemplateColumnModel,
DataGridTextColumnModel,
DataTemplate,
ListSortDirection,
ModelProxy,
SelectionChangedEventArgs,
SelectionMode,
SimpleList,
smColorToCssColor,
SolidColorBrush,
SortDescription,
TabItemService,
} from '@mobilize/wms-framework';
import {
IColumnResizeEventArgs,
IGridCellEventArgs,
IGridKeydownEventArgs,
IgxColumnComponent,
IgxGridComponent,
IRowSelectionEventArgs,
ISortingExpression,
ISortingStrategy,
RowType,
SortingDirection,
} from 'igniteui-angular';
import { Subscription } from 'rxjs';
import { ViewBoxesStateService } from '../../services/view-boxes-state.service';
import { Utils } from '../../utils';
import { XamDataGridEventManager } from '../../utils/event-manager';
import { GridUtils } from '../../utils/grid';
import { BaseComponent } from '../base/base.component';
import { DataGridColumnsComponent } from '../data-grid-columns/data-grid-columns.component';
import { TabIndexService } from '../tab-item/tab-index.service';
import { CustomSortingStrategy } from './CustomSortingStrategy';
/**
* Create a instance of the DataGridComponent
* @export
* @class DataGridComponent
* @extends {BaseComponent}
* @implements {OnInit}
* @implements {AfterContentInit}
* @implements {AfterViewInit}
* @implements {OnDestroy}
* @implements {DoCheck}
*/
@Component({
selector: 'wm-data-grid',
templateUrl: './data-grid.component.html',
styleUrls: ['./data-grid.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ViewBoxesStateService],
})
export class DataGridComponent
extends BaseComponent
implements OnInit, AfterContentInit, AfterViewInit, OnDestroy, DoCheck
{
/**
* Gets the text column definitions
*
* @type {QueryList<DataGridTextColumnComponent>}
* @memberof DataGridComponent
*/
@ContentChild(DataGridColumnsComponent)
columnsComponent: DataGridColumnsComponent;
/**
* Gets the columns generated by the igx-grid
*
* @type {QueryList<IgxColumnComponent>}
* @memberof DataGridComponent
*/
@ViewChild(IgxGridComponent)
igxGridsChild: IgxGridComponent;
/**
* Gets the current DataGridComponent if
* it is an inherited Component
*
* @type {IgxGridComponent}
* @memberof DataGridComponent
*/
@ViewChild(DataGridComponent)
dataGridComponent: DataGridComponent;
/**
* Row details template
* This will be used on master detail grid
*
* @type {TemplateRef<any>}
* @memberof DataGridComponent
*/
@ContentChild('rowDetailsTemplate')
rowDetailsTemplate: TemplateRef<any>;
/**
* Timer to re-calculate the size column of the grid
*
* @type {*}
* @memberof DataGridComponent
*/
refreshWidthCalcTimer: any;
/**
* Flag used it to know if an Inherited DataGridComponent call a doResize(),
* and should refresh in the internal dataGrid
*
* @memberof DataGridComponent
*/
reCalcSize = false;
/**
* Keeps the references to the subscription for the viewBoxesService
*
* @type {*}
* @memberof DataGridComponent
*/
viewBoxesSubscription: any;
/**
* Show or hide the loading overlay
*
* @type {boolean}
* @memberof DataGridComponent
*/
showOverlay = true;
/**
* Keeps a reference to last sorting expression to avoid 'None' state
*
* @type {ISortingExpression[]}
* @memberof DataGridComponent
*/
lastSortingExpression: ISortingExpression[];
/**
* Reference to the tabActiveService Subscription to know if the tab is active.
* This reference is used to clean the subscription when the component is destroyed.
*
* @type {Subscription}
* @memberof DataGridComponent
*/
tabActiveService: Subscription;
/**
* Gets the igxGrid reference
* for DataGrids and extended Components
*
* @readonly
* @type {IgxGridComponent}
* @memberof DataGridComponent
*/
get igxGrid(): IgxGridComponent {
return this.dataGridComponent
? this.dataGridComponent.igxGridsChild
: this.igxGridsChild;
}
/**
* Reference to the ViewBoxesStateService from the Inherited Component
*
* @type {(ViewBoxesStateService | null)}
* @memberof DataGridComponent
*/
@Input()
viewBoxesStateServiceInherited: ViewBoxesStateService | null = null;
/**
* Declaring a variable called EnableFullLoaded and setting it to false.
* Flag used to show or not the loading overlay
*
* @memberof DataGridComponent
*/
@Input()
EnableFullLoaded = false;
/**
* Flag to set column width calculation when item source change to always
* instead of only first time
*
* @type {boolean}
* @memberof DataGridComponent
*/
@Input()
public reCalcColumnsWidthOnItemSourceChanged = false;
/**
* "If the inherited service is not null, return the inherited service, otherwise return the service
* that is a member of the class."
*
* @readonly
* @returns The value of the viewBoxesStateServiceInherited property if it is not null, otherwise the
* value of the viewBoxesStateService property.
*/
get currentViewBoxesStateService(): ViewBoxesStateService {
return this.viewBoxesStateServiceInherited ?? this.viewBoxesStateService;
}
/**
* "If the value is true, then set the value to false and call the doResize() function."
*
* @param {any} value - any - the value of the parameter
*
* @memberof DataGridComponent
*/
@Input()
set viewBoxesService(value: any) {
this.reCalcSize = value;
if (value) {
this.doResize();
this.reCalcSize = false;
}
}
/**
* Sets the autoGenerateColumns property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set autoGenerateColumns(value: boolean) {
this.modelProxy.AutoGenerateColumns = value;
}
/**
* Gets the autoGenerateColumns property of the datagrid
*
* @readonly
* @type {boolean}
* @memberof DataGridComponent
*/
get autoGenerateColumns(): boolean {
return this.model.AutoGenerateColumns;
}
/**
* Row style property
*
* @memberof DataGridComponent
*/
@Input()
set rowStyle(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.RowStyleProperty,
value
)
) {
this.modelProxy.RowStyle = value;
}
}
/**
* Row style property
*
* @readonly
* @type {*}
* @memberof DataGridComponent
*/
get rowStyle(): any {
return this.model.RowStyle;
}
/**
* Sets the canUserResizeColumns property of the datagrid
*
* @type {boolean}
* @memberof DataGridComponent
*/
@Input()
set canUserResizeColumns(value: boolean | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.BackgroundProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.CanUserResizeColumns = value;
}
}
/**
* Gets the canUserResizeColumns property of the datagrid
*
* @type {boolean}
* @memberof DataGridComponent
*/
get canUserResizeColumns(): boolean | BindingInfo {
return this.model.CanUserResizeColumns;
}
/**
* Sets the rowDetailsVisibilityMode
*
* @memberof DataGridComponent
*/
@Input()
set rowDetailsVisibilityMode(value: any) {
if (DataGridRowDetailsVisibilityMode[value] !== undefined) {
this.modelProxy.RowDetailsVisibilityMode =
DataGridRowDetailsVisibilityMode[value] as any;
}
}
/**
* Gets the rowDetailsVisibilityMode from the model
*
* @type {*}
* @memberof DataGridComponent
*/
get rowDetailsVisibilityMode(): any {
return this.model.RowDetailsVisibilityMode;
}
/**
* Sets CanUserReorderColumns property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set canUserReorderColumns(value: boolean | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.BackgroundProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.CanUserReorderColumns = value;
}
}
/**
* Gets CanUserReorderColumns property of the datagrid
*
* @readonly
* @type {boolean}
* @memberof DataGridComponent
*/
get canUserReorderColumns(): boolean {
return this.model.CanUserReorderColumns;
}
/**
* Column header style property
*
* @memberof DataGridComponent
*/
@Input()
set columnHeaderStyle(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.ColumnHeaderStyleProperty,
value
)
) {
this.modelProxy.ColumnHeaderStyle = value;
}
}
/**
* Gets the columnHeaderStyle property of the datagrid from the model
*
* @type {*}
* @memberof DataGridComponent
*/
get columnHeaderStyle(): any {
return this.model.ColumnHeaderStyle;
}
/**
* Sets CanUserSortColumns property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set canUserSortColumns(value: boolean | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.BackgroundProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.CanUserSortColumns = value;
}
}
/*
* Gets CanUserSortColumns property of the datagrid
*
* @readonly
* @type {boolean}
* @memberof DataGridComponent
*/
get canUserSortColumns(): boolean | BindingInfo {
return this.model.CanUserSortColumns;
}
/**
* Sets AreRowDetailsFrozen property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set areRowDetailsFrozen(value: BindingInfo | boolean) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.AreRowDetailsFrozenProperty,
value
) &&
typeof value === 'boolean'
) {
this.modelProxy.AreRowDetailsFrozen = value;
}
}
/**
* Gets AreRowDetailsFrozen property of the datagrid from the model
*
* @readonly
* @type {(boolean | BindingInfo)}
* @memberof DataGridComponent
*/
get areRowDetailsFrozen(): boolean | BindingInfo {
return this.model.AreRowDetailsFrozen;
}
/**
* Sets the Background property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set background(value: string | BindingInfo) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.BackgroundProperty,
value
)
) {
this.modelProxy.Background = Utils.createSolidBrush(value);
}
}
/**
* Gets the Background property of the datagrid
*
* @readonly
* @type {(string|BindingInfo)}
* @memberof DataGridComponent
*/
get background(): string | BindingInfo {
/* istanbul ignore else */
if (this.model.Background) {
return smColorToCssColor(
(this.model.Background as SolidColorBrush).Color
);
}
}
/**
* Sets the BorderBrush property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set borderBrush(value: BindingInfo | string) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.BorderBrushProperty,
value
)
) {
this.modelProxy.BorderBrush = Utils.createSolidBrush(value);
}
}
/**
* Gets the BorderBrush property of the datagrid
*
* @readonly
* @type {(string|BindingInfo)}
* @memberof DataGridComponent
*/
get borderBrush(): string | BindingInfo {
if (
this.model.BorderBrush != null &&
this.model.BorderBrush instanceof SolidColorBrush
) {
return smColorToCssColor(this.model.BorderBrush.Color);
}
return 'transparent';
}
/**
* Sets the headersVisibility property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set headersVisibility(
value: BindingInfo | string | DataGridHeadersVisibility
) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.HeadersVisibilityProperty,
value
)
) {
if (value === 'None' || value === DataGridHeadersVisibility.None) {
this.modelProxy.HeadersVisibility = DataGridHeadersVisibility.None;
} else if (value === 'All' || value === DataGridHeadersVisibility.All) {
this.modelProxy.HeadersVisibility = DataGridHeadersVisibility.All;
} else if (value === 'Row' || value === DataGridHeadersVisibility.Row) {
this.modelProxy.HeadersVisibility = DataGridHeadersVisibility.Row;
} else {
this.modelProxy.HeadersVisibility = DataGridHeadersVisibility.Column;
}
}
}
/**
* Gets the headersVisibility property of the datagrid
*
* @readonly
* @type {string | DataGridHeadersVisibility}
* @memberof DataGridComponent
*/
get headersVisibility(): string | BindingInfo | DataGridHeadersVisibility {
return this.model.HeadersVisibility;
}
/**
* If the data changes, wait 500ms, then check if the view boxes contain elements. If they don't,
* hide the overlay.
*
* @param {any} data - any - the data that is passed to the component
* @memberof DataGridComponent
*/
dataChanged(data: any) {
if (!this.EnableFullLoaded) return;
/* istanbul ignore if */
if (this.refreshWidthCalcTimer) {
clearTimeout(this.refreshWidthCalcTimer);
}
this.refreshWidthCalcTimer = setTimeout(() => {
if (!this.validateIfViewBoxesContainsElements()) {
this.showOverlay = false;
this.cd.detectChanges();
}
}, 500);
}
/**
* Called whenever a column is resized
*
* @param {IColumnResizeEventArgs} event
* @memberof DataGridComponent
*/
columnResizedHandler(event: IColumnResizeEventArgs): void {
this.model.LayoutUpdated.fire([this, event]);
}
/**
* If the currentViewBoxesStateService is not null and the total number of view boxes is greater than
* 0, return true.
*
* @returns A boolean value.
* @memberof DataGridComponent
*/
validateIfViewBoxesContainsElements(): boolean {
return (
this.currentViewBoxesStateService != null &&
this.currentViewBoxesStateService.getTotalViewBoxes() > 0
);
}
/**
* Sets the frozenColumnCount property from the datagrid model
*
* @memberof DataGridComponent
*/
@Input()
set frozenColumnCount(value: number) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.FrozenColumnCountProperty,
value
)
) {
this.modelProxy.FrozenColumnCount = value;
}
}
/**
* Gets the frozenColumnCount property from the datagrid model
*
* @readonly
* @type {number}
* @memberof DataGridComponent
*/
get frozenColumnCount(): number {
return this.model.FrozenColumnCount;
}
/**
* Sets the itemSource property of the datagrid
*
* @type {*}
* @memberof DataGridComponent
*/
@Input()
set itemsSource(value: any) {
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.ItemsSourceProperty,
value
)
) {
this.modelProxy.ItemsSource = value;
}
}
/**
* Gets the ItemsSource property for the datagrid
*
* @readonly
* @type {*}
* @memberof DataGridComponent
*/
get itemsSource(): any {
return this.model.ItemsSource;
}
/**
* Gets the model.ItemsSourceArray property value
*
* @readonly
* @type {any[]}
* @memberof DataGridComponent
*/
get itemsSourceArray(): any[] {
return this.model.ItemsSourceArray;
}
/**
* sets the readonly property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set isReadOnly(value: boolean) {
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.IsReadOnlyProperty,
value
)
) {
this.modelProxy.IsReadOnly = value;
}
}
/**
* gets the readonly property of the datagrid
*
* @readonly
* @type {boolean}
* @memberof DataGridComponent
*/
get isReadOnly(): boolean {
return this.model.IsReadOnly;
}
/**
* Determines if the column is an editable column
*
* @param {DataGridColumnModel} column
* @return {*} boolean
* @memberof DataGridComponent
*/
isEditable(column: DataGridColumnModel): boolean {
/* istanbul ignore else */
if (this.isReadOnly || column.isReadOnly) {
return false;
}
/* istanbul ignore else */
if (
column instanceof DataGridTextColumnModel ||
(column instanceof DataGridTemplateColumnModel &&
column.CellEditingTemplate)
) {
return true;
}
return false;
}
/**
* Grid lines visibility property
*
* @memberof DataGridComponent
*/
@Input()
set gridLinesVisibility(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.GridLinesVisibilityProperty,
value
)
) {
this.modelProxy.GridLinesVisibility = value;
}
}
/**
* Grid lines visibility property
*
* @readonly
* @type {*}
* @memberof DataGridComponent
*/
get gridLinesVisibility(): any {
return this.model.GridLinesVisibility;
}
/**
* sets the readonly property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set selectionMode(value: any) {
/* istanbul ignore else */
if (SelectionMode[value] !== undefined) {
this.modelProxy.SelectionMode = SelectionMode[value];
}
}
/**
* sets the selectedItem property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set selectedItem(value: any) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.SelectedItemProperty,
value
)
) {
this.modelProxy.SelectedItem = value;
}
}
/**
* sets the selectedIndex property of the datagrid
*
* @memberof DataGridComponent
*/
@Input()
set selectedIndex(value: number) {
/* istanbul ignore else */
if (
!this.checkAndRegisterCompatibilityBinding(
DataGridModel.SelectedIndexProperty,
value
)
) {
this.modelProxy.SelectedIndex = value;
}
}
/**
* Gets the columns definitions
*
* @readonly
* @type {any[]}
* @memberof DataGridComponent
*/
get columns(): any[] {
return this.model.Columns.toArray();
}
/**
* Object with datagrid properties and events
*
* @type {DataGridModel}
* @memberof DataGridComponent
*/
@Input()
public model: DataGridModel;
/**
* Event for the current cell changed interaction
*
* @type {EventEmitter<{ sender: DataGridModel; e: any }>}
* @memberof DataGridComponent
*/
@Output() currentCellChanged: EventEmitter<{
sender: DataGridModel;
e: any;
}> = new EventEmitter();
/**
* Occurs when the SelectedItem or SelectedItems property value changes.
*
* @type {EventEmitter<{ sender: DataGridModel; e: any }>}
* @memberof DataGridComponent
*/
@Output() selectionChanged: EventEmitter<{ sender: DataGridModel; e: any }> =
new EventEmitter();
/**
* flag that allows the selection using model's properties changed outside of the component
*
* @memberof DataGridComponent
*/
private internalselectionFlag = false;
/**
* setter for the selectionflag property in case the component is inherited
*
* @memberof DataGridComponent
*/
set selectionFlag(value: boolean) {
if (this.dataGridComponent) {
this.dataGridComponent.internalselectionFlag = value;
}
this.internalselectionFlag = value;
}
/**
* getter for the selectionflag property in case the component is inherited
*
* @memberof DataGridComponent
*/
get selectionFlag(): boolean {
if (this.dataGridComponent) {
return this.dataGridComponent.internalselectionFlag;
} else {
return this.internalselectionFlag;
}
}
/**
* Custom sorting strategy configuration to be used by the
* template column
*
* @type {ISortingStrategy}
* @memberof DataGridComponent
*/
customSortingStrategy: ISortingStrategy;
/**
* Array that contains header styles for each column
*
* @type {DataTemplate[]}
* @memberof DataGridComponent
*/
columnHeaderStylesArray: DataTemplate[];
/**
* Flag to check the grid rendered event emitter
*
* @type {boolean}
* @memberof DataGridComponent
*/
rendered = false;
/**
* IgxGrid component
*
* @type {IgxGridComponent}
* @memberof DataGridComponent
*/
@ViewChild('grid', { read: IgxGridComponent })
public gridRef: IgxGridComponent;
/**
* Grid reference instance
*
* @readonly
* @type {IgxGridComponent}
* @memberof DataGridComponent
*/
get grid(): IgxGridComponent {
return this.gridRef;
}
/**
* Flag to know if the component is ready to render
*
* @type {boolean}
* @memberof DataGridComponent
*/
isInitialized = false;
/**
* Flag to know if the items source is already loaded
*
* @type {boolean}
* @memberof DataGridComponent
*/
protected isItemsSourceLoaded = false;
/**
* Event manager to change the order of certain events
*
* @protected
* @type {XamDataGridEventManager}
* @memberof DataGridComponent
*/
protected eventManager: XamDataGridEventManager;
/**
* ModelProxy is copy of model, used on the component initial building to prevent crashes with external bindings.
*
* @protected
* @type {DataGridModel}
* @memberof DataGridComponent
*/
protected modelProxy: DataGridModel = ModelProxy.create<DataGridModel>();
/**
* Flag to check when the grid has calculated the first column width
*
* @private
* @type {boolean}
* @memberof DataGridComponent
*/
private isColumnsWidthSet = false;
/**
* Cached latest grid width used to determine if the columns should be calculated again
*
* @private
* @type {number}
* @memberof DataGridComponent
*/
private cachedGridWidth = 0;
/**
* Forces the calculation of the columns width
*
* @private
* @type {boolean}
* @memberof DataGridComponent
*/
private forcedColumnsWidthCalc = false;
/**
* Tolerance of grid columns width mechanism
*
* @private
* @type {number}
* @memberof DataGridComponent
*/
private toleranceGridColumnWidth = 18;
/**
* Forces the calculation of the columns width for special values
*
* @private
* @type {boolean}
* @memberof DataGridComponent
*/
private requiredSpecialValuesSizeReCalc = false;
/**
* Construct a new DataGridComponent.
* Register a subscription for the viewBoxesStateService.
* If the name of the class is DataGridComponent, then do a resize. Otherwise, set the flag to true.
* @param {DataGridModel} injectedModel - DataGridModel - this is the model that is injected into the
* component.
* @param {ChangeDetectorRef} cd - ChangeDetectorRef
* @param {Injector} injector - Injector
* @param {ViewBoxesStateService} viewBoxesStateService - ViewBoxesStateService - this is a service
* that is used to notify the grid that it needs to resize.
*/
public constructor(
@Optional() private injectedModel: DataGridModel,
private cd: ChangeDetectorRef,
private injector: Injector,
protected viewBoxesStateService: ViewBoxesStateService
) {
super(cd, injector);
this.eventManager = new XamDataGridEventManager(this);
this.model = injectedModel;
this.viewBoxesSubscription = this.viewBoxesStateService
.getObserver()
.subscribe(() => {
if (this.constructor.name === 'DataGridComponent') {
this.doResize();
} else {
this.reCalcSize = true;
}
});
}
/**
* Handler for the model's properties change
*
* @param {string} [name]
* @memberof DataGridComponent
*/
modelChangeHandler(name?: string): void {
if (!this.dataGridComponent) {
this.selectedItemChangedHandler(name);
/* istanbul ignore else */
if (name === 'ItemsSource') {
this.processItemsSourceChange();
}
if (name === 'AreRowDetailsFrozen' && this.igxGrid) {
this.applyRowDetailsFrozen();
}
if (name === 'AutosizeLastColumn') {
this.evaluateLastColumnWidth();
}
if (name === 'HeadersVisibility') {
this.headersVisibilityHandler();
}
super.modelChangeHandler(name);
}
}
/**
* Process selected item or selected index change
*
* @param {string} [name]
* @memberof DataGridComponent
*/
selectedItemChangedHandler(name: string): void {
if (!this.selectionFlag || !this.igxGrid) return;
if (name === 'SelectedItem' && this.model.SelectedItem !== null) {
this.selectRows([this.model.SelectedItem]);
} else if (name === 'SelectedIndex' && this.model.SelectedIndex !== null) {
this.selectRows([this.itemsSource[this.model.SelectedIndex]]);
}
}
/**
* Process the itemsSource Change
*
* @param {string} [name]
* @memberof DataGridComponent
*/
processItemsSourceChange() {
this.showOverlay = this.model.ItemsSource?.internalArray > 0;
if (!this.grid) return;
if (this.isItemsSourceSorteable()) {
this.expandDetails();
} else if (this.model.ItemsSource?.internalArray) {
this.grid.data = [...this.model.ItemsSource.internalArray];
}
if (
this.isColumnsWidthSet &&
this.model.Visibility === true &&
!this.grid.cdr?.['destroyed'] &&
this.isReCalcColumnsWidthOnItemSourceChanged
) {
setTimeout(() => {
this.setColumnsWidth(true);
});
}
this.isItemsSourceLoaded = true;
}
/**
* Returns template in header style
*
* @readonly
* @type {*}
* @memberof DataGridComponent
*/
getTemplateInHeaderStyle(columns: DataGridColumnModel[]): DataTemplate[] {
return columns.map((column: DataGridColumnModel) => {
const dataTemplate = column.HeaderStyle?.Setters.toArray().find(
(x) => x.Property === 'ContentTemplate'
)?.Value as DataTemplate;
return dataTemplate ?? null;
});
}
/**
* Handler for the columns change event
*
* @param {*} e
* @param {CollectionChangeInfo} args
* @memberof DataGridComponent
*/
modelColumnsChangeHandler(e: any, args: CollectionChangeInfo) {
this.columnHeaderStylesArray = this.getTemplateInHeaderStyle(this.columns);
this.detectChangesAction();
}
/**
* Handler for the ScrollIntoView method
*
* @param {number} row
* @param {number} col
* @memberof DataGridComponent
*/
scrolledIntoViewHandler(row: number, col: number) {
setTimeout(() => {
if (col === -1) {
this.igxGrid.navigateTo(row);
} else {
this.igxGrid.navigateTo(row, col);
}
}, 10);
}
/**
* Handler for the selectedRow Event of the igx-grid
*
* @param {*} e
* @memberof DataGridComponent
*/
selectedRowHandler(e: IRowSelectionEventArgs): void {
this.model.SelectedItems = new SimpleList<any>(e.newSelection);
this.modelChangeHandler('SelectedItem');
const addedItems: SimpleList<any> = new SimpleList<any>(e.added);
const removedItems: SimpleList<any> = new SimpleList<any>(e.removed);
const selectedArgs = new SelectionChangedEventArgs(
removedItems,
addedItems
);
const params = { sender: this.model, e: selectedArgs };
this.model.SelectionChanged.fire([params.sender, params.e]);
this.selectionChanged.emit(params);
this.selectionFlag = true;
}
/**
* Handler for the selectedCell Event of the igx-grid
*
* @param {*} $e
* @memberof DataGridComponent
*/
selectedHandler(e: IGridCellEventArgs): void {
const params = { sender: this.model, e };
this.selectionFlag = false;
this.model.SelectedIndex = e?.cell.row.index;
this.model.SelectedItem = e?.cell.row.data;
this.selectionFlag = true;
this.model.CurrentColumn =
e && e.cell.column
? this.model.Columns.toArray()[e.cell.column.index]
: null;
this.model.CurrentCellChanged.fire([params.sender, params.e]);
this.currentCellChanged.emit(params);
}
/**
* Method that returns the value of the selection mode and transform it to the igxGrid value
*
* @return {*} {string}
* @memberof DataGridComponent
*/
getSelectionMode(): string {
switch (this.model.SelectionMode) {
case SelectionMode.Single:
return 'single';
case SelectionMode.Extended:
return 'multiple';
default:
return 'multiple';
}
}
/**
* Method that allows the automatic generation of columns
*
* @memberof DataGridComponent
*/
generateColumns(): void {
if (this.itemsSource != null) {
const ds = Array.isArray(this.itemsSource)
? this.itemsSource
: this.itemsSource?.internalArray;
if (ds && ds[0]) {
Object.keys(ds[0]).forEach((column) => {
const tempCol = new DataGridTextColumnModel();
tempCol.Header = column;
const boundColumn = new Binding(column);
tempCol.Binding = boundColumn;
this.model.Columns.add(tempCol);
});
}
}
}
/**
* Returns the correct header template to be used
* in case a custom header template was required.
*
* @param {*} column
* @memberof DataGridComponent
*/
columnHeaderTemplate(index: number): DataTemplate {
return this.columnHeaderStylesArray?.[index];
}
/**
* Called whenever sorting action is done
* Avoids the sorting 'None' state
*
* @param {*} e
* @memberof DataGridComponent
*/
sortingHandler(e: any): void {
if (this.isItemsSourceSorteable()) {
this.sortItemsSource(e.sortingExpressions);
} else {
const sortingExpressions = e.sortingExpressions;
if (sortingExpressions.length > 0)
this.lastSortingExpression = sortingExpressions;
else {
e.cancel = true;
this.lastSortingExpression[0].dir = SortingDirection.Asc;
this.igxGrid.sort(this.lastSortingExpression);
}
}
}
/**
* Method that allows the single sort
*
* @param {*} e
* @memberof DataGridComponent
*/
removeSorting(e: any): void {
this.igxGrid.sortingExpressions = e.length ? e : [e];
}
/**
* Sets a scss class to the grid row base on the GridLinesVisibility property
*
* @return {*} {object}
* @memberof DataGridComponent
* @source https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/conditional-cell-styling#demo
*/
public gridLinesVisibilityClasses = {
'grid-row-override': true,
'horizontal-grid-lines': (row: RowType) =>
this.gridLinesVisibility == 'Horizontal',
'vertical-grid-lines': (row: RowType) =>
this.gridLinesVisibility == 'Vertical',
'all-grid-lines': (row: RowType) => this.gridLinesVisibility == 'All',
'none-grid-lines': (row: RowType) => this.gridLinesVisibility == 'None',
};
/**
* Angular lifecycle
*
* @memberof DataGridComponent
*/
ngOnInit(): void {
super.ngOnInit();
this.model = this.model || this.injectedModel || new DataGridModel();
this.setupModel(this.model);
this.customSortingStrategy = new CustomSortingStrategy();
this.model.ScrolledIntoView.addHandler(this.scrolledIntoViewHandler, this);
}
/**
* Angular lifecycle
*
* @memberof DataGridComponent
*/
ngAfterContentInit(): void {
super.ngAfterContentInit();
if (this.dataGridComponent && this.columnsComponent) {
this.dataGridComponent.columnsComponent = this.columnsComponent;
}
setTimeout(() => {
const tempCols = this.columnsComponent?.allColumns.toArray();
if (tempCols) {
tempCols.forEach((tempcolumn) => {
if (this.model.Columns.indexOf(tempcolumn.model) === -1) {
// Only add columns that does not exists on code behind
this.model.Columns.add(tempcolumn.model);
}
});
}
if (this.autoGenerateColumns) {
this.generateColumns();
}
this.isInitialized = true;
this.detectChangesAction();
this.model.Columns.CollectionChanged.addHandler(
this.modelColumnsChangeHandler,
this
);
}, 0);
this.registerTabListener();
}
/**
* If the injectorBase is not null, then get the tabService from the injectorBase, and if the
* tabService is not null, then subscribe to the tabActiveService.
* if the subscribe is called, then the tabActiveService will recalculate the dataGrid column size.
*
* @returns The return value is a Subscription object.
* @memberof DataGridComponent
*/
registerTabListener(): void {
if (this.injectorBase == null) {
return;
}
const tabService = this.injectorBase.get<TabItemService>(
TabItemService as Type<TabItemService>,
'not found' as any
) as any;
if (tabService == null) {
return;
}
this.tabActiveService = tabService.tabSelectedEvent.subscribe(
(tabSelected) => {
const tabIndex = this.injectorBase.get<TabIndexService>(
TabIndexService as Type<TabIndexService>,
'not found' as any
) as any;
/* istanbul ignore else */
if (
tabIndex &&
tabIndex !== 'not found' &&
tabIndex.currentTabId === tabService.selectedTab
) {
this.setColumnsWidth(true);
}
}
);
}
/**
* Angular lifecycle
*
* @memberof DataGridComponent
*/
ngAfterViewInit(): void {
super.ngAfterViewInit();
setTimeout(() => {
this.syncSelectedItem();
// Assign row details if it is an extended grid
if (this.dataGridComponent && this.rowDetailsTemplate) {
this.dataGridComponent.rowDetailsTemplate = this.rowDetailsTemplate;
}
this.expandDetails();
this.applyRowDetailsFrozen();
this.updateInheritedHandlers();
this.eventManager.register();
this.columnHeaderStylesArray = this.getTemplateInHeaderStyle(
this.columns
);
this.afterViewInitCalled = true;
this.headersVisibilityHandler();
}, 0);
}
/**
* Method that updates the handlers of the child datagrid with the parent datagrid ones.
*
* @memberof DataGridComponent
*/
updateInheritedHandlers(): void {
if (this.dataGridComponent) {
this.dataGridComponent.selectedHandler = this.selectedHandler.bind(this);
this.dataGridComponent.selectedRowHandler =
this.selectedRowHandler.bind(this);
}
}
/**
* Syncs model SelectedItem property with selectedItem of the IgxGrid.
*
* @memberof DataGridComponent
*/
syncSelectedItem() {
if (this.itemsSource != null) {
if (this.model.SelectedItem !== null && this.igxGrid) {
this.selectRows([this.model.SelectedItem]);
} else if (this.model.SelectedIndex !== null && this.igxGrid) {
this.selectRows([this.itemsSource[this.model.SelectedIndex]]);
}
}
this.selectionFlag = true;
}
/**
* Angular lifecycle
*
* @memberof DataGridComponent
*/
ngOnDestroy(): void {
super.ngOnDestroy();
this.model.Columns.CollectionChanged.removeHandler(
this.modelColumnsChangeHandler,
this
);
this.model.ScrolledIntoView.removeHandler(
this.scrolledIntoViewHandler,
this
);
this.eventManager.destroy();
this.viewBoxesStateService.clear();
this.viewBoxesSubscription?.unsubscribe();
this.gridRef = null;
this.igxGridsChild = null;
this.dataGridComponent = null;
this.tabActiveService?.unsubscribe();
}
/**
* Angular lifecycle
* In charge of triggering the first and any other re-evaluation of the columns width calculation
*
* @memberof DataGridComponent
*/
ngDoCheck(): void {
super.ngDoCheck();
/* istanbul ignore */
if (
!this.grid?.['_init'] &&
this.afterViewInitCalled &&
(!this.isColumnsWidthSet || this.shouldReCalcColumnsWidth()) &&
this.isGridVisible &&
this.isColumns
) {
const reCalcSpecialValues =
this.requiredSpecialValuesSizeReCalc || !this.isColumnsWidthSet;
this.setColumnsWidth(reCalcSpecialValues);
this.isColumnsWidthSet = true;
}
}
/**
* Event emitted when the underlying igx-grid is considered 'ready' in the DOM.
*
* @memberof DataGridComponent
*/
renderedHandler() {
this.rendered = true;
}
/**
* Evaluate columns to apply width
*
* @memberof DataGridComponent
*/
evaluateColumns(): void {
let hasStarValues = false;
let failedSpecialCases = false;
/* istanbul ignore else */
if (this.grid?.columns) {
this.grid.columns.forEach((col, index) => {
const colModel = this.getColumnModelByIndex(index);
if (colModel) {
const colWidhtToApply = colModel.WidthResolved;
if (
colWidhtToApply.UnitType !== DataGridLengthUnitType.Star &&
colWidhtToApply.UnitType !== DataGridLengthUnitType.Pixel
) {
failedSpecialCases =
failedSpecialCases ||
!this.setColumnWidthSpecialCase(col, colWidhtToApply);
} else if (colWidhtToApply.UnitType === DataGridLengthUnitType.Star) {
hasStarValues = true;
}
}
});
setTimeout(() => {
this.forcedColumnsWidthCalc = hasStarValues || failedSpecialCases;
this.requiredSpecialValuesSizeReCalc = failedSpecialCases;
}, 50);
}
}
/**
* Evaluates if there is any left space for the las column to take
* so no blank spaces are remained
*
* @memberof DataGridComponent
*/
evaluateLastColumnWidth(): void {
const lastCol = this.grid?.columns[this.grid.columns.length - 1];
if (lastCol) {
const usedPixelSize = GridUtils.getGridUsedWidth(
this.grid.columns,
0,
lastCol.index
);
const remainingWidth = this.grid.calcWidth - usedPixelSize;
const finalWidth =
remainingWidth <= lastCol.minWidthPx
? lastCol.minWidthPx
: remainingWidth;
lastCol.width = finalWidth.toString();
}
}
/**
* When the window is resized, set the column widths, clear the view boxes state, and if the overlay
* is showing, hide it after 300ms.
*
* @memberof DataGridComponent
*/
doResize(): void {
this.setColumnsWidth(true);
this.viewBoxesStateService.clear();
if (this.showOverlay) {
setTimeout(() => {
this.showOverlay = false;
this.cd.detectChanges();
}, 300);
}
}
/**
* Hides igx-grid headers row to replicate Silverlight behavior.
*
* @type {void}
* @memberof DataGridComponent
*/
headersVisibilityHandler(): void {
if (!this.isInitialized || !this.grid?.nativeElement) return;
const headerRow = this.grid.nativeElement.querySelector(
'igx-grid-header-row'
);
if (this.headersVisibility === DataGridHeadersVisibility.None) {
this.renderer2.addClass(headerRow, 'headersVisibilityNone');
} else {
this.renderer2.removeClass(headerRow, 'headersVisibilityNone');
}
}
/**
* Validates is the grid is already rendered on screen
*
* @return {boolean}
* @memberof DataGridComponent
*/
get isGridVisible(): boolean {
if (!this.grid) return false;
const rect = this.grid.nativeElement.getBoundingClientRect();
return (
this.rendered &&
this.grid.calcWidth &&
rect.width >= this.grid.calcWidth &&
this.grid.calcHeight &&
rect.height >= this.grid.calcHeight
);
}
/**
* Validates is the grid has any columns
*
* @return {boolean}
* @memberof DataGridComponent
*/
get isColumns(): boolean {
return this.grid.columns.length > 0;
}
/**
* Called once after rendering of the DataGrid.
* Setups the width property for the column models based on the grid `DataGridLengthModel` property.
* It is a no-op for Auto, InitialAuto and Star width values.
*
* @protected
* @memberof DataGridComponent
*/
protected setColumnsWidth(isRendering = false): void {
if (isRendering) {
this.evaluateColumns();
}
this.calculateAndSetNonSpecialColumnsWidth();
}
/**
* Indicates if the columns width calculation mechanism should be trigger again
*
* @private
* @returns {boolean}
* @memberof DataGridComponent
*/
private shouldReCalcColumnsWidth(): boolean {
return (
(this.grid.calcWidth !== this.cachedGridWidth &&
Math.abs(this.grid.calcWidth - this.cachedGridWidth) >=
this.toleranceGridColumnWidth) ||
this.forcedColumnsWidthCalc
);
}
/**
* Calculates and sets the columns width used for numeric and star values.
*
* @protected
* @memberof DataGridComponent
*/
protected calculateAndSetNonSpecialColumnsWidth() {
if (!this.grid) return;
this.cachedGridWidth = this.grid.calcWidth;
this.forcedColumnsWidthCalc = false;
if (this.grid.columns) {
const columnModels = this.grid.columns
.map((col, index) => this.getColumnModelByIndex(index))
.filter((model) => model != null);
this.calculateStarColumnsWidth(columnModels);
this.calculateNumericColumnsWidth(columnModels);
}
}
/**
* Calculates column width for numeric columns.
*
* @protected
* @param {DataGridColumnModel[]} columnModels
* @memberof DataGridComponent
*/
protected calculateNumericColumnsWidth(columnModels: DataGridColumnModel[]) {
const numericColumnModels = columnModels.filter(
(model) => model.WidthResolved.UnitType === DataGridLengthUnitType.Pixel
);
for (const model of numericColumnModels) {
model.CalculatedWidth = model.WidthResolved.Value.toString();
}
}
/**
* Calculates column width for star columns.
*
* @protected
* @param {DataGridColumnModel[]} columnModels
* @return {void}
* @memberof DataGridComponent
*/
protected calculateStarColumnsWidth(
columnModels: DataGridColumnModel[]
): void {
const [starTotalSpace, usedPixelSize] = this.getGridRemainSpaceInfo();
const starColumnModels = columnModels.filter(
(model) => model.WidthResolved.UnitType === DataGridLengthUnitType.Star
);
const starValues = {
percentPerStar: 0,
starTotalSpace: starTotalSpace,
usedPixelSize: usedPixelSize,
gridTotalSpace: this.grid.calcWidth,
starColumnModels: starColumnModels,
};
this.calculatePercentPerStar(starValues);
/* istanbul ignore else */
if (starValues.percentPerStar <= 0) {
this.setColumnsToMinimumWidth(starColumnModels);
return;
}
while (!this.calculateStarColumnsWidthLoop(starValues)) {
this.calculatePercentPerStar(starValues);
}
}
/**
* Calculates width percent that should be given to each star unit.
*
* @protected
* @param {{percentPerStar: number, starTotalSpace: number, usedPixelSize: number, gridTotalSpace:number}} starValues
* @memberof DataGridComponent
*/
protected calculatePercentPerStar(starValues: {
percentPerStar: number;
starTotalSpace: number;
usedPixelSize: number;
gridTotalSpace: number;
}) {
const freeSpacePercent =
(1 - starValues.usedPixelSize / starValues.gridTotalSpace) * 100;
starValues.percentPerStar = freeSpacePercent / starValues.starTotalSpace;
}
/**
* Calculates column width for star columns. If some star column gets assigned
* a fixed width, it recalculates `usedPixelSize` and `starTotalSpace` and
* returns `false`, to indicate that width should be recalculated for all
* remaining star columns.
*
* @protected
* @param {{percentPerStar: number, starTotalSpace: number, usedPixelSize: number, gridTotalSpace:number, starColumnModels: DataGridColumnModel[]}} starValues
* @return {*} {boolean} `true` if width for all star columns was calculated, `false` otherwise.
* @memberof DataGridColumnModel
*/
protected calculateStarColumnsWidthLoop(starValues: {
percentPerStar: number;
starTotalSpace: number;
usedPixelSize: number;
gridTotalSpace: number;
starColumnModels: DataGridColumnModel[];
}): boolean {
for (const model of starValues.starColumnModels) {
const colWidth = starValues.percentPerStar * model.WidthResolved.Value;
const actualMinWidth = model.ActualMinWidth;
if (actualMinWidth > starValues.gridTotalSpace * (colWidth / 100)) {
// Column minimum width is higher than assigned star space.
// Assign minimum width, treat this column as fixed size, and recalculate other star columns width again.
model.CalculatedWidth = actualMinWidth.toString();
starValues.usedPixelSize += actualMinWidth;
starValues.starTotalSpace -= model.WidthResolved.Value;
this.removeModel(starValues.starColumnModels, model);
return false;
} else {
model.CalculatedWidth = `${colWidth}%`;
}
}
return true;
}
/**
* Removes `model` from the `models` array.
*
* @protected
* @param {DataGridColumnModel[]} models
* @param {DataGridColumnModel} model
* @memberof DataGridComponent
*/
protected removeModel(
models: DataGridColumnModel[],
model: DataGridColumnModel
) {
const idx = models.findIndex((x) => x === model);
if (idx !== -1) {
models.splice(idx, 1);
}
}
/**
* Sets widths to `MinWidth` for all given columns.
*
* @protected
* @param {DataGridColumnModel[]} starColumnModels
* @memberof DataGridComponent
*/
protected setColumnsToMinimumWidth(starColumnModels: DataGridColumnModel[]) {
for (const model of starColumnModels) {
model.CalculatedWidth = model.ActualMinWidth.toString();
}
}
/**
* Sets the igx column size for special scenarios using autosize
*
* @protected
* @param {*} col
* @param {DataGridLengthModel} columnWidth
* @memberof DataGridComponent
*/
protected setColumnWidthSpecialCase(
col: IgxColumnComponent,
columnWidth: DataGridLengthModel
): boolean {
try {
switch (columnWidth.UnitType) {
// Note that for both the following width types only the initially rendered columns
// will be affected.
case DataGridLengthUnitType.SizeToCells:
case DataGridLengthUnitType.Auto:
col.autosize();
break;
case DataGridLengthUnitType.SizeToHeader:
col.autosize(true);
break;
default:
break;
}
} catch {
return false;
}
return true;
}
/**
* Gets the remaining available space
*
* @protected
* @returns
* @memberof DataGridComponent
*/
protected getGridRemainSpaceInfo() {
let starTotalSpace = 0;
let usedPixelSize = 0;
/* istanbul ignore else */
if (this.grid?.columns) {
this.grid.columns.forEach((col, index) => {
const colModel = this.getColumnModelByIndex(index);
if (colModel?.Visibility) {
switch (colModel.WidthResolved.UnitType) {
case DataGridLengthUnitType.Pixel:
usedPixelSize += colModel.WidthResolved.Value;
break;
case DataGridLengthUnitType.Star:
starTotalSpace += colModel.WidthResolved.Value;
break;
default:
usedPixelSize += this.getColumnCalcPixelWidth(col, colModel);
break;
}
}
});
}
return [starTotalSpace, usedPixelSize];
}
/**
* Gets the column current used pixel width.
*
* @protected
* @param {IgxColumnComponent} col
* @param {DataGridColumnModel} model
* @return {*} {number}
* @memberof DataGridComponent
*/
protected getColumnCalcPixelWidth(
col: IgxColumnComponent,
model: DataGridColumnModel
): number {
const min = model.MinWidth ?? 0;
const max = model.MaxWidth ?? Infinity;
return clamp(col.calcPixelWidth, min, max);
}
/**
*
* @private
* @param {number} index
* @return {*} {(DataGridColumnModel | undefined)}
* @memberof DataGridComponent
*/
private getColumnModelByIndex(
index: number
): DataGridColumnModel | undefined {
return this.model.Columns.getItem(index);
}
/**
* Returns if there is at least one row rendered
*
* @memberof DataGridComponent
*/
get igxRowsRendered(): boolean {
return this.igxGrid?.dataRowList?.toArray().length > 0;
}
/**
* Should returns false when
* the rowDetailsVisibilityMode is collapsed
*
* @private
* @return {*} {boolean}
* @memberof DataGridComponent
*/
isDetailsVisible(): boolean {
return (
this.rowDetailsVisibilityMode !==
DataGridRowDetailsVisibilityMode.Collapsed
);
}
/**
* Returns if the column is sortable
*
* @private
* @param {DataGridColumnModel} column
* @returns {boolean}
* @memberof DataGridComponent
*/
isColSortable(
column: DataGridColumnModel | DataGridTemplateColumnModel
): boolean {
const template: boolean = (column as DataGridTemplateColumnModel)
.CellTemplate
? column.SortMemberPath?.length > 0
: true;
return this.canUserSortColumns && column.CanUserSort && template;
}
/** Always display the details */
get visibleDetails(): boolean {
return (
this.rowDetailsVisibilityMode === DataGridRowDetailsVisibilityMode.Visible
);
}
/**
* Validates if the columns width should be re-evaluated when item source changes always or only the first time
* If its called always it can impact performance, specially when filtering rows
*
* @memberof DataGridComponent
*/
get isReCalcColumnsWidthOnItemSourceChanged(): boolean {
return (
this.reCalcColumnsWidthOnItemSourceChanged || !this.isItemsSourceLoaded
);
}
/**
* Expand IgxGrid Details section
* Add a class to the grid that hides the expanding row icon
*
* @private
* @memberof DataGridComponent
*/
private expandDetails(): void {
if (this.visibleDetails && this.igxGrid) {
const renderer = this.injectorBase.get(Renderer2);
renderer.removeClass(this.igxGrid.nativeElement, 'hideExpansion');
renderer.addClass(this.igxGrid.nativeElement, 'hideExpansion');
this.igxGrid.expandAll();
}
}
/**
* Apply class to igxGrid if the property
* AreRowDetailsFrozen property is set
*
* @private
* @memberof DataGridComponent
*/
private applyRowDetailsFrozen() {
const renderer = this.injectorBase.get(Renderer2);
/* istanbul ignore else */
if (this.igxGrid) {
renderer.removeClass(this.igxGrid.nativeElement, 'rowDetailsFrozen');
if (this.areRowDetailsFrozen) {
renderer.addClass(this.igxGrid.nativeElement, 'rowDetailsFrozen');
}
}
}
/**
* Selects a set of rows within the grid, make sure to clear cell selections first as
* cell selection happens by user clicking on a cell (singlor o with Ctrl)
* or by setting a cell as selected (cell.selected = true), events like changing
* the items source or selecting new rows don't necessary clear previous cell selections,
* so we will make sure to start with a clean slate
*
* @private
* @param {any[]} rowIDs
* @memberof DataGridComponent
*/
private selectRows(rowIDs: any[]) {
this.igxGrid.clearCellSelection();
this.igxGrid.selectRows(rowIDs, true);
}
/**
* Indicates whether the underlying item source collection provides sorting capabilities
*
* @private
* @return {*} {boolean} true if the underlying items source has at least one sort description
* @memberof DataGridComponent
*/
private isItemsSourceSorteable(): boolean {
return !!this.itemsSource?.SortDescriptions;
}
/**
* Flag to mark that itemsSource.SortDescription is being updated to avoid reentrance
*
* @private
* @memberof DataGridComponent
*/
private updatingSort = false;
/**
* Sorts the underlying collection view by updating its sort description to the elements
* clicked in the grid
*
* @private
* @param {any[]} sortExpressions the infragistics grid sorting expressions to use
* @memberof DataGridComponent
*/
private sortItemsSource(sortExpressions: any[]): void {
if (!this.updatingSort) {
this.updatingSort = true;
this.itemsSource.SortDescriptions.clear();
sortExpressions.forEach((expr) =>
this.itemsSource.SortDescriptions.add(
new SortDescription(
expr.fieldName,
expr.dir === SortingDirection.Asc
? ListSortDirection.Ascending
: ListSortDirection.Descending
)
)
);
this.updatingSort = false;
}
}
/**
* Called whenever column moving action is being ended
*
* @param {*} event
* @memberof DataGridComponent
*/
columnMovingEndHandler(event: any) {
const sourceIndex = event.source.index;
const targetIndex = event.target.index;
if (
(this.frozenColumnCount &&
sourceIndex < this.frozenColumnCount &&
targetIndex >= this.frozenColumnCount) ||
(sourceIndex >= this.frozenColumnCount &&
targetIndex < this.frozenColumnCount)
) {
event.cancel = true;
} else {
//Manually switching the columns positions in the model columns collection
const sourceColumn = this.model.Columns.internalArray[sourceIndex];
const targetColumn = this.model.Columns.internalArray[targetIndex];
const sourceColumnTemplate = this.columnHeaderTemplate(sourceIndex);
const targetColumnTemplate = this.columnHeaderTemplate(targetIndex);
this.model.Columns.internalArray[sourceIndex] = targetColumn;
this.model.Columns.internalArray[targetIndex] = sourceColumn;
if (sourceColumnTemplate || targetColumnTemplate) {
this.columnHeaderStylesArray[sourceIndex] = targetColumnTemplate;
this.columnHeaderStylesArray[targetIndex] = sourceColumnTemplate;
}
}
}
/**
* Keydown event handler.
*
* @param {IGridKeydownEventArgs} event
* @memberof DataGridComponent
*/
keyDownHandler(e: IGridKeydownEventArgs): void {
const key = (e.event as KeyboardEvent).key;
if (key == 'ArrowRight' && this.arrowRight(e.event as KeyboardEvent)) {
e.cancel = true;
return;
} else if (key == 'ArrowLeft' && this.arrowLeft(e.event as KeyboardEvent)) {
e.cancel = true;
return;
}
const params = { sender: this.model, e: this };
this.model.KeyDownHandler(params);
}
/**
* Handler for arrowRight keydown event
*
* @param {KeyboardEvent} event
* @memberof DataGridComponent
*/
arrowRight(event: KeyboardEvent): boolean {
const position = (<HTMLInputElement>event.target).selectionStart + 1;
const value = (<HTMLInputElement>event.target).value;
if (position > value?.toString().length || value === null) {
return false;
}
return true;
}
/**
* Handler for arrowLeft keydown event
*
* @param {KeyboardEvent} event
* @memberof DataGridComponent
*/
arrowLeft(event: KeyboardEvent): boolean {
const position = (<HTMLInputElement>event.target).selectionEnd - 1;
if (position < 0) {
return false;
}
return true;
}
}
<div *ngIf="isInitialized && visibility" class="autoHeightWidth">
<wm-loading-overlay
[show]="showOverlay && EnableFullLoaded"
></wm-loading-overlay>
<igx-grid
#grid
[data]="itemsSourceArray"
cellSelection="single"
displayDensity="compact"
[hideRowSelectors]="true"
[moving]="canUserReorderColumns"
[rowClasses]="gridLinesVisibilityClasses"
[rowHeight]="dataGridRowHeight"
[rowSelection]="getSelectionMode | memoize: model.SelectionMode"
[style.background-color]="background"
[style.border-color]="borderBrush"
(columnResized)="columnResizedHandler($event)"
(dataChanged)="dataChanged($event)"
(rendered)="renderedHandler()"
(rowSelectionChanging)="selectedRowHandler($event)"
(selected)="selectedHandler($event)"
(sorting)="sortingHandler($event)"
(sortingDone)="removeSorting($event)"
(columnMovingEnd)="columnMovingEndHandler($event)"
(gridKeydown)="keyDownHandler($event)"
>
<ng-container *ngIf="itemsSource && columns">
<igx-column
*ngFor="let column of columns; let i = index"
[field]="
column.CellTemplate
? column.SortMemberPath
: column.Binding?.Path?.path
"
[header]="column.Header"
[cellTemplate]="
column.DataType === 'boolean' ? customBooleanTemplate : null
"
[headerTemplate]="
columnHeaderTemplate(i) || columnHeaderStyle ? customHeader : null
"
[editable]="isEditable(column)"
[resizable]="canUserResizeColumns && column.CanUserResize"
[pinned]="i < frozenColumnCount"
[movable]="column.CanUserReorder"
[sortable]="isColSortable(column)"
[sortStrategy]="column.CellTemplate ? customSortingStrategy : null"
[width]="column.CalculatedWidth"
[minWidth]="column.MinWidth.toString()"
[maxWidth]="column.MaxWidth"
[hidden]="column.MaxWidth === 0 || column.Width?.AbsoluteZero"
>
<ng-template #customHeader>
<!-- prettier-ignore -->
<div
*ngIf="columnHeaderStyle && !columnHeaderTemplate(i)"
class="custom-header"
[ngStyle]="columnHeaderStyle | styleInfo:null"
>{{ column.Header || column.Binding?.Path?.path }}</div>
<ng-container let *ngIf="columnHeaderTemplate(i)">
<div [ngStyle]="column.HeaderStyle | styleInfo: null">
<ng-container
*ngComponentOutlet="
columnHeaderTemplate(i).TemplateComponentConstructor;
injector: column
| toInjector: columnHeaderTemplate(i).declaringContext
"
>
</ng-container>
</div>
</ng-container>
</ng-template>
<ng-template #customHeaderColumn> </ng-template>
<ng-template
igxCell
let-cell="cell"
let-value
*ngIf="column.CellTemplate?.templateRef"
>
<ng-container
[ngTemplateOutlet]="column.CellTemplate.templateRef"
[ngTemplateOutletContext]="{ context: cell.row.data }"
>
</ng-container>
</ng-template>
<ng-template
igxCell
let-context="cell.row.data"
*ngIf="column.CellTemplate?.TemplateComponentConstructor"
>
<ng-container
*ngComponentOutlet="
column.CellTemplate.TemplateComponentConstructor;
injector: context
| toInjector: column.CellTemplate?.declaringContext
"
>
</ng-container>
</ng-template>
<ng-template
igxCell
let-cell="cell"
let-value
*ngIf="!column.CellTemplate && column.Binding?.Path?.path === '.'"
>
<div class="dataGridTextColumn">{{ cell.row.data }}</div>
</ng-template>
<ng-template
*ngIf="column.CellEditingTemplate"
igxCellEditor
let-cell="cell"
>
<ng-container
[ngTemplateOutlet]="column.CellEditingTemplate.templateRef"
[ngTemplateOutletContext]="{ context: cell.row.data }"
>
</ng-container>
</ng-template>
</igx-column>
</ng-container>
<ng-container
*ngIf="
rowDetailsTemplate &&
(isDetailsVisible | memoize: rowDetailsVisibilityMode)
"
>
<ng-template igxGridDetail let-dataItem>
<ng-container
[ngTemplateOutlet]="rowDetailsTemplate"
[ngTemplateOutletContext]="{ context: dataItem }"
>
</ng-container>
</ng-template>
</ng-container>
</igx-grid>
</div>
<ng-template igxCell let-context="cell" #customBooleanTemplate>
<igx-checkbox
[(ngModel)]="context.value"
[disableRipple]="!context.editable"
[disableTransitions]="!context.editable"
[readonly]="!context.editable"
class="igx-checkbox"
>
</igx-checkbox>
</ng-template>
./data-grid.component.scss
@import '../../scss/styles.scss';
@import '~igniteui-angular/lib/core/styles/themes/index';
:host ::ng-deep {
.headersVisibilityNone {
display: none;
}
.igx-grid-th {
.igx-grid-th__title {
opacity: unset;
overflow-wrap: break-word;
text-overflow: clip;
overflow: visible;
line-height: normal;
white-space: pre;
width: 100%;
height: 100%;
display: grid;
}
&__icons {
.sort-icon {
color: $xam-grid-header-sort-icon-color;
opacity: unset;
&:hover {
color: $xam-grid-header-sort-icon-hover-color;
}
&::after {
background: transparent;
}
}
}
&--active {
box-shadow: none;
}
}
.igx-grid-thead__wrapper {
color: unset;
.igx-chip__item {
color: unset;
}
}
.igx-grid__tbody-content {
color: unset;
}
.igx-grid__tbody {
.igx-grid__tr {
.igx-grid__td {
font-size: inherit;
padding: $grid-cell-padding;
.dataGridTextColumn {
white-space: pre;
}
div {
width: inherit;
}
}
}
.igx-grid__tr--even {
background-color: $xam-grid-background-color-even-row;
color: unset;
}
.igx-grid__tr--odd {
color: unset;
}
.igx-grid__tr:hover:not(.igx-grid__tr--selected) {
background-color: $xam-grid-background-color-hover;
}
.igx-grid__tr:hover:not(.igx-grid__tr--selected)
+ .igx-grid__tr-container:not(.igx-grid__tr-container--active) {
background-color: $xam-grid-background-color-hover;
}
.igx-grid__tr--selected,
.igx-grid__td--selected {
background-color: $xam-grid-background-color-selected;
}
.igx-grid__tr--selected + .igx-grid__tr-container {
box-shadow: none;
background-color: $xam-grid-background-color-selected;
}
.igx-grid__tr-container--active {
box-shadow: none;
}
}
.igx-checkbox {
margin-right: 1px;
}
}
$custom-grid-theme: grid-theme(
$resize-line-color: $xam-grid-column-resize-splitter-background,
);
@include css-vars($custom-grid-theme);