FlexGridDetailProvider Class
File
wijmo.grid.detail.js
Module
wijmo.grid.detail

Implements detail rows for FlexGrid controls.

To add detail rows to a FlexGrid control, create an instance of a FlexGridDetailProvider and set the createDetailCell property to a function that creates elements to be displayed in the detail cells.

For example:

import { FlexGrid } from '@mescius/wijmo.grid';
import { FlexGridDetailProvider } from '@mescius/wijmo.grid.detail';

// create FlexGrid to show categories let gridCat = new FlexGrid('#gridCat', { itemsSource: getCategories(); });
// add detail rows showing products in each category let detailProvider = new FlexGridDetailProvider(gridCat, { createDetailCell: (row) => { let cell = document.createElement('div'); new FlexGrid(cell, { itemsSource: getProducts(row.dataItem.CategoryID) }); return cell; } });

The FlexGridDetailProvider provides a detailVisibilityMode property that determines when the detail rows should be displayed.

The default value for this property is **ExpandSingle**, which adds collapse/expand icons to the row headers.

The example below shows how you can use a FlexGridDetailProvider to add different types of detail to the rows in a FlexGrid:

{@sample Grid/Rows/RowDetail/Overview/purejs Example}

Constructor

constructor

constructor(grid: FlexGrid, options?: any): FlexGridDetailProvider

Initializes a new instance of the FlexGridDetailProvider class.

Parameters
Returns
FlexGridDetailProvider

Properties

createDetailCell

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;
};

Type
ICreateDetailCell

detailVisibilityMode

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

The default value for this property is **DetailVisibilityMode.ExpandSingle**.

Type
DetailVisibilityMode

disposeDetailCell

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.

Type
IDisposeDetailCell

grid

Gets the FlexGrid that owns this FlexGridDetailProvider.

Type
FlexGrid

isAnimated

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

The default value for this property is **false**.

Type
boolean

keyActionEnter

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

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

Type
KeyAction

maxHeight

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.

Type
number

rowHasDetail

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.

Type
IRowHasDetail

Methods

getDetailRow

getDetailRow(row: any): DetailRow

Gets the detail row associated with a given grid row.

Parameters
  • row: any

    Row or index of the row to investigate.

Returns
DetailRow

hideDetail

hideDetail(row?: Row | number): void

Hides the detail row for a given row.

Parameters
  • row: wijmo.grid.Row | number Optional

    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

Gets a value that determines if a row has details to show.

Parameters
  • row: any

    Row or index of the row to investigate.

Returns
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: wijmo.grid.Row | number, hideOthers?: boolean): void

Shows the detail row for a given row.

Parameters
  • row: wijmo.grid.Row | number

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

  • hideOthers: boolean Optional

    Whether to hide details for all other rows.

Returns
void