CellMaker Hyperlinks

The CellMaker class provides a simple way to create custom cells of common types.

This sample shows how to use the CellMaker class to create cells with hyperlinks.

You can specify provide custom text for the links, an href that specifies the link target, and attributes for the link.

If you prefer, you may also specify a handler for the link's click event instead of an href.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { CellMaker } from '@grapecity/wijmo.grid.cellmaker'; import { FlexGrid } from '@grapecity/wijmo.grid'; import { getData, getCountries } from './data'; document.readyState === 'complete' ? init() : window.onload = init; function init() { new FlexGrid('#theGrid', { showMarquee: true, selectionMode: 'MultiRange', autoGenerateColumns: false, columns: [ { binding: 'id', header: 'ID', isReadOnly: true, width: 80 }, { binding: 'country', header: 'Country', dataMap: getCountries() }, // link with bound text and no href (uses click event) { header: 'Simple Link', binding: 'country', cellTemplate: CellMaker.makeLink({ click: (e, ctx) => alert('Clicked Link ** ' + ctx.item.country + ' **') }) }, // link with fixed text and bound href { header: 'Real Link', binding: 'country', cellTemplate: CellMaker.makeLink({ text: 'Visit <b>${item.country}</b>', href: '${item.url}', attributes: { target: '_blank', rel: 'noopener noreferrer', tabIndex: -1 } // no need for click handler, the link navigates automatically }) } ], itemsSource: getData(1000) }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid CellMaker: Hyperlinks</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"> <div id="theGrid"></div> </div> </body> </html>
export function getCountries() { return 'US,Germany,UK,Japan,Italy,Greece'.split(','); } export function getData(cnt) { let countries = getCountries(), data = []; for (var i = 0; i < cnt; i++) { let country = countries[i % countries.length]; data.push({ id: i, country: country, url: 'https://en.wikipedia.org/wiki/Tourism_in_' + country, downloads: Math.round(Math.random() * 1000), sales: Math.random() * 2000, expenses: Math.random() * 1000, checked: i % 4 == 0, history: getValues(3 + Math.random() * 20, 100), img: 'https://cdn.grapecity.com/wijmo/images/' + (i % 4 + 1) + '.png', rating: Math.floor(Math.random() * 5) }); } return data; } function getValues(cnt, max) { let values = [], val = Math.random() * max; for (let i = 0; i < cnt; i++) { val = Math.min(max, val + (Math.random() - 0.5) * max / 5); values.push(val); } return values; }
.wj-flexgrid { max-height: 300px; } .wj-flexgrid .wj-cell { padding: 6px 10px; }
(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', '@grapecity/wijmo': 'npm:@grapecity/wijmo/index.js', '@grapecity/wijmo.input': 'npm:@grapecity/wijmo.input/index.js', '@grapecity/wijmo.styles': 'npm:@grapecity/wijmo.styles', '@grapecity/wijmo.cultures': 'npm:@grapecity/wijmo.cultures', '@grapecity/wijmo.chart': 'npm:@grapecity/wijmo.chart/index.js', '@grapecity/wijmo.chart.analytics': 'npm:@grapecity/wijmo.chart.analytics/index.js', '@grapecity/wijmo.chart.animation': 'npm:@grapecity/wijmo.chart.animation/index.js', '@grapecity/wijmo.chart.annotation': 'npm:@grapecity/wijmo.chart.annotation/index.js', '@grapecity/wijmo.chart.finance': 'npm:@grapecity/wijmo.chart.finance/index.js', '@grapecity/wijmo.chart.finance.analytics': 'npm:@grapecity/wijmo.chart.finance.analytics/index.js', '@grapecity/wijmo.chart.hierarchical': 'npm:@grapecity/wijmo.chart.hierarchical/index.js', '@grapecity/wijmo.chart.interaction': 'npm:@grapecity/wijmo.chart.interaction/index.js', '@grapecity/wijmo.chart.radar': 'npm:@grapecity/wijmo.chart.radar/index.js', '@grapecity/wijmo.chart.render': 'npm:@grapecity/wijmo.chart.render/index.js', '@grapecity/wijmo.chart.webgl': 'npm:@grapecity/wijmo.chart.webgl/index.js', '@grapecity/wijmo.gauge': 'npm:@grapecity/wijmo.gauge/index.js', '@grapecity/wijmo.grid': 'npm:@grapecity/wijmo.grid/index.js', '@grapecity/wijmo.grid.detail': 'npm:@grapecity/wijmo.grid.detail/index.js', '@grapecity/wijmo.grid.filter': 'npm:@grapecity/wijmo.grid.filter/index.js', '@grapecity/wijmo.grid.search': 'npm:@grapecity/wijmo.grid.search/index.js', '@grapecity/wijmo.grid.grouppanel': 'npm:@grapecity/wijmo.grid.grouppanel/index.js', '@grapecity/wijmo.grid.multirow': 'npm:@grapecity/wijmo.grid.multirow/index.js', '@grapecity/wijmo.grid.transposed': 'npm:@grapecity/wijmo.grid.transposed/index.js', '@grapecity/wijmo.grid.pdf': 'npm:@grapecity/wijmo.grid.pdf/index.js', '@grapecity/wijmo.grid.sheet': 'npm:@grapecity/wijmo.grid.sheet/index.js', '@grapecity/wijmo.grid.xlsx': 'npm:@grapecity/wijmo.grid.xlsx/index.js', '@grapecity/wijmo.grid.selector': 'npm:@grapecity/wijmo.grid.selector/index.js', '@grapecity/wijmo.grid.cellmaker': 'npm:@grapecity/wijmo.grid.cellmaker/index.js', '@grapecity/wijmo.nav': 'npm:@grapecity/wijmo.nav/index.js', '@grapecity/wijmo.odata': 'npm:@grapecity/wijmo.odata/index.js', '@grapecity/wijmo.olap': 'npm:@grapecity/wijmo.olap/index.js', '@grapecity/wijmo.pdf': 'npm:@grapecity/wijmo.pdf/index.js', '@grapecity/wijmo.viewer': 'npm:@grapecity/wijmo.viewer/index.js', '@grapecity/wijmo.xlsx': 'npm:@grapecity/wijmo.xlsx/index.js', '@grapecity/wijmo.undo': 'npm:@grapecity/wijmo.undo/index.js', '@grapecity/wijmo.interop.grid': 'npm:@grapecity/wijmo.interop.grid/index.js', '@grapecity/wijmo.touch': 'npm:@grapecity/wijmo.touch/index.js', '@grapecity/wijmo.cloud': 'npm:@grapecity/wijmo.cloud/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);