Grouping

The grid supports grouping via the source CollectionView. Group the data by one or more properties by adding GroupDescription objects to the grid's collectionView.groupDescriptions. You may also want to hide the columns that are being grouped on in order to avoid showing redundant data.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjCore from '@grapecity/wijmo'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // generate some random data var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), products = 'Phones,Computers,Cameras,Stereos'.split(','), data = []; for (var i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], product: products[i % products.length], downloads: Math.round(100 + Math.random() * 10000), sales: Math.random() * 10000, expenses: Math.random() * 5000, }); } // // basic grouping var theGrid = new wjGrid.FlexGrid('#theGrid', { itemsSource: new wjCore.CollectionView(data, { sortDescriptions: ['country', 'product'], groupDescriptions: ['country', 'product'] }) }); // // select first item (after sorting/grouping) theGrid.select(new wjGrid.CellRange(0, 0), true); // // hide columns being grouped on var theGridHideCols = new wjGrid.FlexGrid('#theGridHideCols', { autoGenerateColumns: false, columns: [ { binding: 'country', header: 'Country', visible: false }, { binding: 'product', header: 'Product', visible: false }, { binding: 'downloads', header: 'Downloads', width: '*' }, { binding: 'sales', header: 'Sales', width: '*' }, { binding: 'expenses', header: 'Expenses', width: '*' }, ], itemsSource: new wjCore.CollectionView(data, { sortDescriptions: ['country', 'product'], groupDescriptions: ['country', 'product'] }) }); // // select first item (after sorting/grouping) theGridHideCols.select(new wjGrid.CellRange(0, 2), true); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Groups</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <p> This example groups the data by country and by product:</p> <div id="theGrid"> </div> <p> This example groups the data by country and product, and hides those columns to achieve a cleaner appearance:</p> <div id="theGridHideCols"> </div> </div> </body> </html> .wj-flexgrid { max-height: 250px; margin:10px 0; } body { margin-bottom: 20px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import * as wjcCore from '@grapecity/wijmo'; import * as wjcGrid from '@grapecity/wijmo.grid'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: wjcCore.CollectionView; hideColsGridData: wjcCore.CollectionView; countries = ['US', 'Germany', 'UK' ,'Japan', 'Italy', 'Greece']; products = ['Phones', 'Computers', 'Cameras', 'Stereos']; // DataSvc will be passed by derived classes constructor() { let dataSource = this._getData(); this.data = new wjcCore.CollectionView(dataSource, { sortDescriptions: [ 'country', 'product' ], groupDescriptions: [ 'country', 'product' ] }); this.hideColsGridData = new wjcCore.CollectionView(dataSource, { sortDescriptions: [ 'country', 'product' ], groupDescriptions: [ 'country', 'product' ] }); } initializeGrid(grid: wjcGrid.FlexGrid) { grid.select(new wjcGrid.CellRange(0,0), true); } initializeHideColsGrid(hideColsGrid: wjcGrid.FlexGrid) { setTimeout(() => { hideColsGrid.select(new wjcGrid.CellRange(0,2), true); }); } private _getData() { // generate some random data let data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: this.countries[i % this.countries.length], product: this.products[i % this.products.length], downloads: Math.round(100 + Math.random() * 10000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } } @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Groups</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <p> This example groups the data by country and by product:</p> <wj-flex-grid #flex [(itemsSource)]="data" (initialized)="initializeGrid(flex)"> </wj-flex-grid> <p> This example groups the data by country and product, and hides those columns to achieve a cleaner appearance:</p> <wj-flex-grid #hideColsGrid [(itemsSource)]="hideColsGridData" (initialized)="initializeHideColsGrid(hideColsGrid)"> <wj-flex-grid-column [binding]="'country'" [header]="'Country'" [visible]="false"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'product'" [header]="'Product'" [visible]="false"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'downloads'" [header]="'Downloads'" [width]="'*'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'sales'" [header]="'Sales'" [width]="'*'"></wj-flex-grid-column> <wj-flex-grid-column [binding]="'expenses'" [header]="'Expenses'" [width]="'*'"></wj-flex-grid-column> </wj-flex-grid> </div> .wj-flexgrid { max-height: 250px; margin:10px 0; } body { margin-bottom: 20px; } <template> <div class="container-fluid"> <p>This example groups the data by country and by product:</p> <wj-flex-grid :itemsSource="gridData" :initialized="initializeGrid"></wj-flex-grid> <p> This example groups the data by country and product, and hides those columns to achieve a cleaner appearance: </p> <wj-flex-grid :itemsSource="hideColsGridData" :initialized="initializeHideColsGrid"> <wj-flex-grid-column :binding="'country'" :header="'Country'" :visible="false"></wj-flex-grid-column> <wj-flex-grid-column :binding="'product'" :header="'Product'" :visible="false"></wj-flex-grid-column> <wj-flex-grid-column :binding="'downloads'" :header="'Downloads'" :width="'*'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'sales'" :header="'Sales'" :width="'*'"></wj-flex-grid-column> <wj-flex-grid-column :binding="'expenses'" :header="'Expenses'" :width="'*'"></wj-flex-grid-column> </wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.grid"; import * as wjcGrid from "@grapecity/wijmo.grid"; import "@grapecity/wijmo.vue2.grid.filter"; import * as wjcCore from "@grapecity/wijmo"; import * as wjcGridFilter from "@grapecity/wijmo.grid.filter"; import "@grapecity/wijmo.vue2.grid.grouppanel"; let App = Vue.extend({ name: "app", data: function() { return { products: ["Phones", "Computers", "Cameras", "Stereos"], countries: ["US", "Germany", "UK", "Japan", "Italy", "Greece"], gridData: null, hideColsGridData: null, }; }, methods: { initializeGrid: function(grid) { grid.select(new wjcGrid.CellRange(0, 0), true); }, initializeHideColsGrid: function(hideColsGrid) { setTimeout(() => { hideColsGrid.select(new wjcGrid.CellRange(0, 2), true); }); }, getData: function() { // generate some random data let data = []; for (let i = 0; i < 200; i++) { data.push({ id: i, country: this.countries[i % this.countries.length], product: this.products[i % this.products.length], downloads: Math.round(100 + Math.random() * 10000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; } }, created: function() { var dataSource = this.getData(); this.gridData = new wjcCore.CollectionView(dataSource, { sortDescriptions: ["country", "product"], groupDescriptions: ["country", "product"] }); this.hideColsGridData = new wjcCore.CollectionView(dataSource, { sortDescriptions: ["country", "product"], groupDescriptions: ["country", "product"] }); } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Groups</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import * as wjcCore from "@grapecity/wijmo"; import * as wjcGrid from "@grapecity/wijmo.grid"; import { getData } from "./data"; class App extends React.Component { constructor(props) { super(props); this.state = { gridData: getData(), hideColsGridData: null }; } render() { return <div className="container-fluid"> <p>This example groups the data by country and by product:</p> <wjGrid.FlexGrid initialized={this.initializeGrid.bind(this)} itemsSource={this.state.gridData}> </wjGrid.FlexGrid> <p> This example groups the data by country and product, and hides those columns to achieve a cleaner appearance: </p> <wjGrid.FlexGrid initialized={this.initializeHideColsGrid.bind(this)} itemsSource={this.state.hideColsGridData}> <wjGrid.FlexGridColumn binding="country" header="Country" visible={false}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="product" header="Product" visible={false}></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="downloads" header="Downloads" width="*"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="sales" header="Sales" width="*"></wjGrid.FlexGridColumn> <wjGrid.FlexGridColumn binding="expenses" header="Expenses" width="*"></wjGrid.FlexGridColumn> </wjGrid.FlexGrid> </div>; } initializeGrid(grid) { grid.select(new wjcGrid.CellRange(0, 0), true); } initializeHideColsGrid(hideColsGrid) { setTimeout(() => { hideColsGrid.select(new wjcGrid.CellRange(0, 2), true); }); } componentDidMount() { let data = getData(); this.setState({ gridData: new wjcCore.CollectionView(data, { sortDescriptions: ["country", "product"], groupDescriptions: ["country", "product"] }), hideColsGridData: new wjcCore.CollectionView(data, { sortDescriptions: ["country", "product"], groupDescriptions: ["country", "product"] }) }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Custom Filter Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexgrid { max-height: 250px; margin: 10px 0; } body { margin-bottom: 20px; } export function getData() { // generate some random data let data = []; let products = ["Phones", "Computers", "Cameras", "Stereos"], countries = ["US", "Germany", "UK", "Japan", "Italy", "Greece"]; for (let i = 0; i < 200; i++) { data.push({ id: i, country: countries[i % countries.length], product: products[i % products.length], downloads: Math.round(100 + Math.random() * 10000), sales: Math.random() * 10000, expenses: Math.random() * 5000 }); } return data; }