Row Details

Sometimes rows are bound to data objects that contain more information than would fit easily on a regular grid.

In these scenarios, you may want to use the FlexGridDetailProvider class that is included with the wijmo.grid.detail module. The FlexGridDetailProvider will create a details section for each row that users can expand to see the rest of the data.

You can add anything you want to the detail row, including other grids. The sample below shows both how to display the data in another grid, as well as within standard HTML elements.

Learn about FlexGrid | FlexGrid API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; // import * as wjCore from '@mescius/wijmo'; import * as wjOdata from '@mescius/wijmo.odata'; import * as wjGrid from '@mescius/wijmo.grid'; import * as wjGridDetail from '@mescius/wijmo.grid.detail'; import * as wjInput from '@mescius/wijmo.input'; // // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // get OData categories and products const url = 'https://services.odata.org/Northwind/Northwind.svc'; const categories = new wjOdata.ODataCollectionView(url, 'Categories', { fields: ['CategoryID', 'CategoryName', 'Description'] }); const products = new wjOdata.ODataCollectionView(url, 'Products'); // // shared column definitions const categoryColumns = [ { binding: 'CategoryName', header: 'Category Name', width: '*' }, { binding: 'Description', header: 'Description', width: '2*' } ]; // // get products for a given category const _catToProductMap = new Map(); function getProducts(categoryID) { let categoryProducts = _catToProductMap.get(categoryID); if (!categoryProducts) { categoryProducts = products.items.filter(product => (product.CategoryID === categoryID)); _catToProductMap.set(categoryID, categoryProducts); } return categoryProducts; } // // // grid with HTML detail const htmlDetail = new wjGrid.FlexGrid('#htmlDetail', { autoGenerateColumns: false, columns: categoryColumns, itemsSource: categories, isReadOnly: true, }); // // html detail provider const dpHtml = new wjGridDetail.FlexGridDetailProvider(htmlDetail, { // use animation when showing details isAnimated: true, // // create detail cells for a given row createDetailCell: function (row) { // build detail content for the current category const cat = row.dataItem; const prods = getProducts(cat.CategoryID); let html = `ID: <b>${cat.CategoryID}</b><br />`; html += `Name: <b>${cat.CategoryName}</b><br />`; html += `Description: <b>${cat.Description}</b><br />`; html += `Products: <b>${prods.length} items</b><br />`; html += '<ol>'; prods.forEach(product => { html += `<li>${product.ProductName}</li>`; }); html += '</ol>'; // // create and return detail cell const cell = document.createElement('div'); cell.innerHTML = html; return cell; }, }); // // // grid with grid detail const gridDetail = new wjGrid.FlexGrid('#gridDetail', { autoGenerateColumns: false, columns: categoryColumns, itemsSource: categories, isReadOnly: true, }); // // grid detail provider const initialOptions = { // specifies when and how the row details are displayed detailVisibilityMode: wjGridDetail.DetailVisibilityMode.ExpandSingle, // // maximum height of the detail rows, in pixels maxHeight: null, // // whether to use animation when showing row details isAnimated: true, // // action to perform when the ENTER key is pressed keyActionEnter: wjGridDetail.KeyAction.None, // // callback function that determines whether a row has details rowHasDetail: null, // // function that creates detail cells createDetailCell: function (row) { const cell = document.createElement('div'); new wjGrid.FlexGrid(cell, { headersVisibility: wjGrid.HeadersVisibility.Column, isReadOnly: true, autoGenerateColumns: false, itemsSource: getProducts(row.dataItem.CategoryID), columns: [ { header: 'ID', binding: 'ProductID' }, { header: 'Name', binding: 'ProductName' }, { header: 'Qty/Unit', binding: 'QuantityPerUnit' }, { header: 'Unit Price', binding: 'UnitPrice' }, { header: 'Discontinued', binding: 'Discontinued' }, ], }); return cell; }, }; const dpGrid = new wjGridDetail.FlexGridDetailProvider(gridDetail, initialOptions); // // create detailVisibilityMode selector const detailVisibilityModeMenu = new wjInput.Menu('#detailVisibilityMode', { selectedIndexChanged: (s, e) => { if (s.selectedIndex > -1) { formatMenuHeader(s); dpGrid.detailVisibilityMode = s.selectedValue; } }, header: 'detailVisibilityMode', displayMemberPath: 'header', selectedValuePath: 'value', itemsSource: [ { header: 'Code', value: wjGridDetail.DetailVisibilityMode.Code }, { header: 'Selection', value: wjGridDetail.DetailVisibilityMode.Selection }, { header: 'ExpandSingle', value: wjGridDetail.DetailVisibilityMode.ExpandSingle }, { header: 'ExpandMulti', value: wjGridDetail.DetailVisibilityMode.ExpandMulti }, ], }); detailVisibilityModeMenu.selectedValue = initialOptions.detailVisibilityMode; // // create maxHeight selector const maxHeightMenu = new wjInput.Menu('#maxHeight', { selectedIndexChanged: (s, e) => { if (s.selectedIndex > -1) { formatMenuHeader(s); dpGrid.maxHeight = s.selectedValue; } }, header: 'maxHeight', displayMemberPath: 'header', selectedValuePath: 'value', itemsSource: [ { header: 'null', value: null }, { header: '100', value: 100 }, { header: '200', value: 200 }, { header: '300', value: 300 }, { header: '400', value: 400 }, { header: '500', value: 500 }, ], }); maxHeightMenu.selectedValue = initialOptions.maxHeight; // // create isAnimated selector const isAnimatedMenu = new wjInput.Menu('#isAnimated', { selectedIndexChanged: (s, e) => { if (s.selectedIndex > -1) { formatMenuHeader(s); dpGrid.isAnimated = s.selectedValue; } }, header: 'isAnimated', displayMemberPath: 'header', selectedValuePath: 'value', itemsSource: [ { header: 'False', value: false }, { header: 'True', value: true }, ], }); isAnimatedMenu.selectedValue = initialOptions.isAnimated; // // create keyActionEnter selector const keyActionEnterMenu = new wjInput.Menu('#keyActionEnter', { selectedIndexChanged: (s, e) => { if (s.selectedIndex > -1) { formatMenuHeader(s); dpGrid.keyActionEnter = s.selectedValue; } }, header: 'keyActionEnter', displayMemberPath: 'header', selectedValuePath: 'value', itemsSource: [ { header: 'None', value: wjGridDetail.KeyAction.None }, { header: 'ToggleDetail', value: wjGridDetail.KeyAction.ToggleDetail }, ], }); keyActionEnterMenu.selectedValue = initialOptions.keyActionEnter; // // create rowDetails selector const rowDetailsMenu = new wjInput.Menu('#rowDetails', { selectedIndexChanged: (s, e) => { if (s.selectedIndex > -1) { formatMenuHeader(s); dpGrid.rowHasDetail = s.selectedValue ? null : (row => !(row.dataItem.CategoryID % 2)); } }, header: 'rowDetails', displayMemberPath: 'header', selectedValuePath: 'value', itemsSource: [ { header: 'All', value: true }, { header: 'Even rows only', value: false }, ], }); rowDetailsMenu.selectedValue = initialOptions.rowHasDetail; // // function formatMenuHeader(menu) { let index = menu.header.indexOf(':'); if (index !== -1) { menu.header = menu.header.substring(0, menu.header.indexOf(':')) + wjCore.format(': <b>{header}</b>', menu.selectedItem); } else { menu.header = menu.header + wjCore.format(': <b>{header}</b>', menu.selectedItem); } } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid Row Details</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <h3>HTML in Row Details</h3> <p> This grid shows product categories on each row. Expanding the rows shows an HTML element with information about the products in that category: </p> <div id="htmlDetail"></div> <h3>Grids in Row Details</h3> <p> You can add anything you want to the detail rows, including other grids. This example shows the same categories, but the detail row uses another grid to show the products: </p> <div id="gridDetail"></div> <div class="grid-options"> <div id="detailVisibilityMode"></div> <div id="maxHeight"></div> <div id="isAnimated"></div> <div id="keyActionEnter"></div> <div id="rowDetails"></div> </div> </div> </body> </html>
.wj-flexgrid { max-height: 350px; } body { margin-bottom: 20pt; } .grid-options .wj-menu { margin: 0.25em 0.5em 0.25em 0; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);