Skip to content

Instantly share code, notes, and snippets.

@mattduffield
Last active July 13, 2021 12:24
Show Gist options
  • Save mattduffield/1d30fe06b43e341d741fd7b60fceedf7 to your computer and use it in GitHub Desktop.
Save mattduffield/1d30fe06b43e341d741fd7b60fceedf7 to your computer and use it in GitHub Desktop.
Wijmo Grid - Light DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dumber Gist</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<base href="/">
</head>
<!--
Dumber Gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to "main" (data-main attribute on script)
which is your src/main.js.
-->
<body>
<my-app></my-app>
<script src="/dist/entry-bundle.js" data-main="main"></script>
<!-- <script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/custom-elements-es5-adapter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>
<!-- Wijmo web component mode -->
<script>
window['wj-control-is-element'] = true;
</script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" />
</body>
</html>
{
"dependencies": {
"@grapecity/wijmo.webcomponents.all": "^5.20211.795-nightly.d20210710.t020125",
"@webcomponents/webcomponentsjs": "^2.5.0",
"aurelia": "latest"
}
}
import Aurelia from 'aurelia';
import { MyApp } from './my-app';
Aurelia.app(MyApp).start();
<!--
Try to create a paired css/scss/sass/less file like my-app.scss.
It will be automatically imported based on convention.
-->
<!--
There is no bundler config you can change in Dumber Gist to
turn on shadow DOM.
But you can turn shadow DOM on by adding a meta tag in every
html template:
<use-shadow-dom>
<use-shadow-dom></use-shadow-dom>
-->
<h1>${message}</h1>
<style>
.wj-flexgrid {
height: auto;
max-height: 300px;
}
</style>
<wjc-flex-grid id="gridIntro">
<wjc-flex-grid-filter></wjc-flex-grid-filter>
<wjc-flex-grid-column binding="country" header="Country" width="*">
</wjc-flex-grid-column>
<wjc-flex-grid-column binding="date" header="Date">
</wjc-flex-grid-column>
<wjc-flex-grid-column binding="downloads" header="Downloads">
</wjc-flex-grid-column>
</wjc-flex-grid>
import '@grapecity/wijmo.webcomponents.input';
import '@grapecity/wijmo.webcomponents.grid';
import '@grapecity/wijmo.webcomponents.grid.filter';
import { $, $$ } from './util.js';
export class MyApp {
message = 'Hello Aurelia 2!';
attaching() {
setTimeout(() => {
this.loadGrid();
}, 250);
}
loadGrid() {
function getCountries() {
return [
'US', 'Canada', 'Mexico', 'Brazil',
'Germany', 'UK', 'France', 'Italy', 'Spain', 'Portugal',
'Japan', 'China', 'Korea'
];
}
function getProducts() {
return [
'Phones', 'Cars', 'Planes', 'Boats', 'Computers' ,'Watches'
];
}
function getData(cnt) {
var data = [],
countries = getCountries(),
products = getProducts(),
today = new Date();
for (var i = 0; i < cnt; i++) {
data.push({
id: i,
date: wijmo.DateTime.addDays(today, -Math.random() * 365),
country: countries[i % countries.length],
product: products[i % products.length],
active: i % 5 != 0,
transactions: {
downloads: Math.round(Math.random() * 200000),
sales: Math.random() * 100000,
expenses: Math.random() * 50000
},
});
}
return data;
}
let gridIntro = document.querySelector('#gridIntro');
gridIntro.itemsSource = getData(100);
}
}
export const collectAllElementsDeep = (selector = null, root, cachedElements = null) => {
let allElements = [];
if (cachedElements) {
allElements = cachedElements;
} else {
const findAllElements = function(nodes) {
for (let i = 0, el; el = nodes[i]; ++i) {
allElements.push(el);
// If the element has a shadow root, dig deeper.
if (el.shadowRoot) {
findAllElements(el.shadowRoot.querySelectorAll('*'));
}
}
}
if(root.shadowRoot) {
findAllElements(root.shadowRoot.querySelectorAll('*'));
}
findAllElements(root.querySelectorAll('*'));
}
return allElements.filter(el => el.matches(selector));
}
export const $ = (selector = null, root = document) => {
const [first = null] = collectAllElementsDeep(selector, root);
return first;
}
export const $$ = (selector = null, root = document) => {
return collectAllElementsDeep(selector, root);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment