Row Details (Vue)

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

This example uses Vue.

<template> <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> <wj-flex-grid :itemsSource="categories" :isReadOnly=true> <wj-flex-grid-column header="Category Name" binding="CategoryName"></wj-flex-grid-column> <wj-flex-grid-column header="Description" binding="Description" width="*"></wj-flex-grid-column> <wj-flex-grid-detail :isAnimated=true v-slot="ctx"> ID: <b>{{ctx.item.CategoryID}}</b><br /> Name: <b>{{ctx.item.CategoryName}}</b><br /> Description: <b>{{ctx.item.Description}}</b><br /> Products: <b>{{getProducts(ctx.item.CategoryID).length}} items</b><br /> <ol> <li v-for="p in getProducts(ctx.item.CategoryID)" v-bind:key="p.ProductID">{{p.ProductName}}</li> </ol> </wj-flex-grid-detail> </wj-flex-grid> <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> <wj-flex-grid :autoGenerateColumns=false :itemsSource="categories" :isReadOnly=true> <wj-flex-grid-column header="Category Name" binding="CategoryName" width="*"></wj-flex-grid-column> <wj-flex-grid-column header="Description" binding="Description" width="2*"></wj-flex-grid-column> <wj-flex-grid-detail v-slot="ctx" :detailVisibilityMode="detailVisibilityMode" :maxHeight="maxHeight" :isAnimated="isAnimated" :keyActionEnter="keyActionEnter" :rowHasDetail="evenRowHasDetail ? rowHasDetailFn : null"> <wj-flex-grid :itemsSource="getProducts(ctx.item.CategoryID)" :isReadOnly="true" headersVisibility="Column"> <wj-flex-grid-column header="ID" binding="ProductID"></wj-flex-grid-column> <wj-flex-grid-column header="Name" binding="ProductName"></wj-flex-grid-column> <wj-flex-grid-column header="Qty/Unit" binding="QuantityPerUnit"></wj-flex-grid-column> <wj-flex-grid-column header="Unit Price" binding="UnitPrice"></wj-flex-grid-column> <wj-flex-grid-column header="Discontinued" binding="Discontinued"></wj-flex-grid-column> </wj-flex-grid> </wj-flex-grid-detail> </wj-flex-grid> <div class="grid-options"> <wj-menu :header="'detailVisibilityMode'" :value="detailVisibilityMode" :itemClicked="itemClicked.bind(this,'detailVisibilityMode')"> <wj-menu-item :value="'Code'">Code</wj-menu-item> <wj-menu-item :value="'Selection'">Selection</wj-menu-item> <wj-menu-item :value="'ExpandSingle'">ExpandSingle</wj-menu-item> <wj-menu-item :value="'ExpandMulti'">ExpandMulti</wj-menu-item> </wj-menu> <wj-menu :header="'maxHeight'" :value="maxHeight" :itemClicked="itemClicked.bind(this,'maxHeight')"> <wj-menu-item :value="0">null</wj-menu-item> <wj-menu-item :value="100">100</wj-menu-item> <wj-menu-item :value="200">200</wj-menu-item> <wj-menu-item :value="300">300</wj-menu-item> <wj-menu-item :value="400">400</wj-menu-item> <wj-menu-item :value="500">500</wj-menu-item> </wj-menu> <wj-menu :header="'isAnimated'" :value="isAnimated" :itemClicked="itemClicked.bind(this,'isAnimated')"> <wj-menu-item :value="true">True</wj-menu-item> <wj-menu-item :value="false">False</wj-menu-item> </wj-menu> <wj-menu :header="'keyActionEnter'" :value="keyActionEnter" :itemClicked="itemClicked.bind(this,'keyActionEnter')"> <wj-menu-item :value="'None'">None</wj-menu-item> <wj-menu-item :value="'ToggleDetail'">ToggleDetail</wj-menu-item> </wj-menu> <wj-menu :header="'rowDetails'" :value="evenRowHasDetail" :itemClicked="itemClicked.bind(this,'evenRowHasDetail')"> <wj-menu-item :value="false">All</wj-menu-item> <wj-menu-item :value="true">Even rows only</wj-menu-item> </wj-menu> </div> </div> </template> <script> import "@mescius/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import { ODataCollectionView } from "@mescius/wijmo.odata"; import * as wjGridDetail from "@mescius/wijmo.grid.detail"; import "@mescius/wijmo.vue2.grid"; import "@mescius/wijmo.vue2.grid.detail"; import "@mescius/wijmo.vue2.input"; let App = Vue.extend({ name: "app", data: function() { return { categories : [], products : [], detailVisibilityMode: 'ExpandSingle', maxHeight: 0, isAnimated: true, keyActionEnter: 'None', evenRowHasDetail: false, }; }, methods: { getProducts(categoryID) { let categoryProducts = this._catToProductMap.get(categoryID); if (!categoryProducts) { categoryProducts = this.products.items.filter( (product) => product.CategoryID === categoryID); this._catToProductMap.set(categoryID, categoryProducts); } return categoryProducts; }, itemClicked: function(prop, s, e) { if (s.selectedIndex > -1) { this[prop] = s.selectedValue; } }, }, beforeCreate: function () { this.rowHasDetailFn = row => !(row.dataItem.CategoryID % 2); }, mounted: function () { const url = 'https://services.odata.org/Northwind/Northwind.svc'; this.categories = new ODataCollectionView(url, 'Categories', { fields: ['CategoryID', 'CategoryName', 'Description'] }); this.products = new ODataCollectionView(url, 'Products'); this._catToProductMap = new Map(); }, }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 350px; } body { margin-bottom: 20pt; } .grid-options .wj-menu { margin: 0.25em 0.5em 0.25em 0; } </style>
<!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.vue'); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } //'*.vue': { loader: 'systemjs-plugin-vue' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@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', "@mescius/wijmo.vue2.chart.analytics": "npm:@mescius/wijmo.vue2.chart.analytics/index.js", "@mescius/wijmo.vue2.chart.animation": "npm:@mescius/wijmo.vue2.chart.animation/index.js", "@mescius/wijmo.vue2.chart.annotation": "npm:@mescius/wijmo.vue2.chart.annotation/index.js", "@mescius/wijmo.vue2.chart.finance.analytics": "npm:@mescius/wijmo.vue2.chart.finance.analytics/index.js", "@mescius/wijmo.vue2.chart.finance": "npm:@mescius/wijmo.vue2.chart.finance/index.js", "@mescius/wijmo.vue2.chart.hierarchical": "npm:@mescius/wijmo.vue2.chart.hierarchical/index.js", "@mescius/wijmo.vue2.chart.interaction": "npm:@mescius/wijmo.vue2.chart.interaction/index.js", "@mescius/wijmo.vue2.chart.radar": "npm:@mescius/wijmo.vue2.chart.radar/index.js", '@mescius/wijmo.vue2.chart.map': 'npm:@mescius/wijmo.vue2.chart.map/index.js', "@mescius/wijmo.vue2.chart": "npm:@mescius/wijmo.vue2.chart/index.js", "@mescius/wijmo.vue2.core": "npm:@mescius/wijmo.vue2.core/index.js", "@mescius/wijmo.vue2.gauge": "npm:@mescius/wijmo.vue2.gauge/index.js", "@mescius/wijmo.vue2.grid.detail": "npm:@mescius/wijmo.vue2.grid.detail/index.js", "@mescius/wijmo.vue2.grid.filter": "npm:@mescius/wijmo.vue2.grid.filter/index.js", "@mescius/wijmo.vue2.grid.grouppanel": "npm:@mescius/wijmo.vue2.grid.grouppanel/index.js", '@mescius/wijmo.vue2.grid.search': 'npm:@mescius/wijmo.vue2.grid.search/index.js', "@mescius/wijmo.vue2.grid.multirow": "npm:@mescius/wijmo.vue2.grid.multirow/index.js", "@mescius/wijmo.vue2.grid.sheet": "npm:@mescius/wijmo.vue2.grid.sheet/index.js", '@mescius/wijmo.vue2.grid.transposed': 'npm:@mescius/wijmo.vue2.grid.transposed/index.js', '@mescius/wijmo.vue2.grid.transposedmultirow': 'npm:@mescius/wijmo.vue2.grid.transposedmultirow/index.js', "@mescius/wijmo.vue2.grid": "npm:@mescius/wijmo.vue2.grid/index.js", "@mescius/wijmo.vue2.input": "npm:@mescius/wijmo.vue2.input/index.js", "@mescius/wijmo.vue2.olap": "npm:@mescius/wijmo.vue2.olap/index.js", "@mescius/wijmo.vue2.viewer": "npm:@mescius/wijmo.vue2.viewer/index.js", "@mescius/wijmo.vue2.nav": "npm:@mescius/wijmo.vue2.nav/index.js", "@mescius/wijmo.vue2.base": "npm:@mescius/wijmo.vue2.base/index.js", '@mescius/wijmo.vue2.barcode.common': 'npm:@mescius/wijmo.vue2.barcode.common/index.js', '@mescius/wijmo.vue2.barcode.composite': 'npm:@mescius/wijmo.vue2.barcode.composite/index.js', '@mescius/wijmo.vue2.barcode.specialized': 'npm:@mescius/wijmo.vue2.barcode.specialized/index.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', //'systemjs-plugin-vue': 'npm:systemjs-plugin-vue/index.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' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, wijmo: { defaultExtension: 'js', } } }); })(this);