| Client-Side API Reference > FlexGrid > wijmo.grid.detail > FlexGridDetailProvider Class |
constructor(grid: FlexGrid, options?: any): FlexGridDetailProvider
Initializes a new instance of the FlexGridDetailProvider class.
FlexGrid that will receive detail rows.
Initialization options for the new FlexGridDetailProvider.
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 = function (row) {
var cell = document.createElement('div');
var detailGrid = new wijmo.grid.FlexGrid(cell, {
itemsSource: getProducts(row.dataItem.CategoryID),
headersVisibility: wijmo.grid.HeadersVisibility.Column
});
return cell;
};
Gets or sets a value that determines when row details are displayed.
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.
Gets or sets a value that indicates whether to use animation when showing row details.
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 = function (row) {
return row.dataItem.CategoryID % 2 == 0;
};
Setting this property to null indicates all rows have details.
hideDetail(row?: any): void
Hides the detail row for a given row.
Row or index of the row that will have its details hidden. This parameter is optional. If not provided, all detail rows are hidden.
isDetailAvailable(row: any): boolean
Gets a value that determines if a row has details to show.
Row or index of the row to investigate.
Implements detail rows for FlexGrid controls.
To add detail rows to a FlexGrid control, create an instance of a createDetailCell property to a function that creates elements to be displayed in the detail cells.
For example:
// create FlexGrid to show categories var gridCat = new wijmo.grid.FlexGrid('#gridCat'); gridCat.itemsSource = getCategories(); // add detail rows showing products in each category var detailProvider = new wijmo.grid.detail.FlexGridDetailProvider(gridCat); detailProvider.createDetailCell = function (row) { var cell = document.createElement('div'); var gridProducts = new wijmo.grid.FlexGrid(cell); gridProducts.itemsSource = getProducts(row.dataItem.CategoryID); return cell; }The 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.