[]
        
(Showing Draft Content)

Wijmo_Angular2_Grid_Detail.Wjflexgriddetail

WjFlexGridDetail Class

Angular 2 directive for FlexGrid DetailRow templates.

The wj-flex-grid-detail directive must be specified on a <ng-template> template element contained in a wj-flex-grid component.

The wj-flex-grid-detail directive is derived from the FlexGridDetailProvider class that maintains detail rows visibility, with detail rows content defined as an arbitrary HTML fragment within the directive tag. The fragment may contain Angular 2 bindings, components and directives. The row and item template variables can be used in Angular 2 bindings that refer to the detail row's parent Row and Row.dataItem objects.

Heirarchy

Properties

createDetailCell

createDetailCell: ICreateDetailCell

Gets or sets the callback function that creates detail cells.

The callback function takes a Row as a parameter and returns an HTML element representing the row details. For example:

// create detail cells for a given row
dp.createDetailCell = (row) => {
    let cell = document.createElement('div');
    new FlexGrid(cell, {
        itemsSource: getProducts(row.dataItem.CategoryID),
        headersVisibility: 'Column'
    });
    return cell;
};

detailVisibilityMode

detailVisibilityMode: DetailVisibilityMode

Gets or sets a value that determines when row details are displayed.

The default value for this property is DetailVisibilityMode.ExpandSingle.

disposeDetailCell

disposeDetailCell: IDisposeDetailCell

Gets or sets the callback function that disposes of detail cells.

The callback function takes a Row as a parameter and disposes of any resources associated with the detail cell.

This function is optional. Use it in cases where the createDetailCell function allocates resources that are not automatically garbage-collected.

grid

grid: FlexGrid

Gets the FlexGrid that owns this FlexGridDetailProvider.

initialized

initialized: EventEmitter<any>

This event is triggered after the component has been initialized by Angular, that is all bound properties have been assigned and child components (if any) have been initialized.

isAnimated

isAnimated: boolean

Gets or sets a value that indicates whether to use animation when showing row details.

The default value for this property is false.

isInitialized

isInitialized: boolean

Indicates whether the component has been initialized by Angular. Changes its value from false to true right before triggering the initialized event.

keyActionEnter

keyActionEnter: KeyAction

Gets or sets the action to perform when the ENTER key is pressed.

The default setting for this property is KeyAction.None, which lets the grid handle the key. The other option is KeyAction.ToggleDetail, which handles the Enter key to toggle the display of the row details.

maxHeight

maxHeight: number | null

Gets or sets the maximum height of the detail rows, in pixels.

The default value for this property is null, which means there's no upper limit to the detail row height.

rowHasDetail

rowHasDetail: IRowHasDetail

Gets or sets the callback function that determines whether a row has details.

The callback function takes a Row as a parameter and returns a boolean value that indicates whether the row has details. For example:

// remove details from items with odd CategoryID
dp.rowHasDetail = (row) => {
    return row.dataItem.CategoryID % 2 == 0;
};

Setting this property to null means all regular data rows (not group rows or new item templates) have details.

Methods

created

  • created(): void
  • If you create a custom component inherited from a Wijmo component, you can override this method and perform necessary initializations that you usually do in a class constructor. This method is called in the last line of a Wijmo component constructor and allows you to not declare your custom component's constructor at all, thus preventing you from a necessity to maintain constructor parameters and keep them in synch with Wijmo component's constructor parameters.

    Returns void

getDetailRow

hideDetail

  • hideDetail(row?: Row | number): void
  • Hides the detail row for a given row.

    Parameters

    • Optional row: Row | number

      Row or index of the row that will have its details hidden. This parameter is optional. If not provided, all detail rows are hidden.

    Returns void

isDetailAvailable

  • isDetailAvailable(row: any): boolean

isDetailVisible

  • isDetailVisible(row: any): boolean
  • Gets a value that determines if a row's details are visible.

    Parameters

    • row: any

      Row or index of the row to investigate.

    Returns boolean

showDetail

  • showDetail(row: Row | number, hideOthers?: boolean): void
  • Shows the detail row for a given row.

    Parameters

    • row: Row | number

      Row or index of the row that will have its details shown.

    • Optional hideOthers: boolean

      Whether to hide details for all other rows.

    Returns void