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.
app.vue
index.html
Copy to CodeMine
<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 setup>
import { ODataCollectionView } from "@mescius/wijmo.odata";
import { ref, onMounted } from "vue";
const categories = ref([]);
const products = ref([]);
const detailVisibilityMode = ref("ExpandSingle");
const maxHeight = ref(0);
const isAnimated = ref(true);
const keyActionEnter = ref("None");
const evenRowHasDetail = ref(false);
const _catToProductMap = ref(null);
const rowHasDetailFn = row => !(row.dataItem.CategoryID % 2);
onMounted(function () {
const url = "https://services.odata.org/Northwind/Northwind.svc";
categories.value = new ODataCollectionView(url, "Categories", {
fields: ["CategoryID", "CategoryName", "Description"],
});
products.value = new ODataCollectionView(url, "Products");
_catToProductMap.value = new Map();
});
function getProducts(categoryID) {
let categoryProducts = _catToProductMap.value.get(categoryID);
if (!categoryProducts) {
categoryProducts = products.value.items.filter((product) => product.CategoryID === categoryID);
_catToProductMap.value.set(categoryID, categoryProducts);
}
return categoryProducts;
}
function itemClicked(propref, s, e) {
if (s.selectedIndex > -1) {
if (propref == "detailVisibilityMode") {
detailVisibilityMode.value = s.selectedValue;
} else if (propref == "maxHeight") {
maxHeight.value = s.selectedValue;
} else if (propref == "isAnimated") {
isAnimated.value = s.selectedValue;
} else if (propref == "keyActionEnter") {
keyActionEnter.value = s.selectedValue;
} else if (propref == "evenRowHasDetail") {
evenRowHasDetail.value = s.selectedValue;
}
}
}
</script>
<style>
.wj-flexgrid {
max-height: 350px;
}
body {
margin-bottom: 20pt;
}
.grid-options .wj-menu {
margin: 0.25em 0.5em 0.25em 0;
}
</style>Feedback
Submit and view feedback for