Integration of DevExtreme and Aurelia
DevExtreme supports angular directives as shown in this example page for dxDataGrid . How can I achieve this with Aurelia?
Examples showing integration:
source to share
DevExtreme does not support Aurelia integration out of the box.
But you can try to create Custom Items for some kind of DevExtreme widget.
source to share
You can check out the work of Stefan Heim. He created several prototypes of DevExtreme / Aurelia integration examples. There's a GitHub repository and demo available there:
https://github.com/stenet/aurelia-devextreme
source to share
The most basic scenario follows the following steps:
1) Create a new Aurelia app with aurelia-cli: au new
2) Install jquery:
npm install jquery --save
3) Install devextreme:
npm install devextreme --save
Here's the tricky part ... in aurelia_project open aurelia.json and add this depending on vendor-bundle.js (dx.all can also be used):
{
"name": "devextreme",
"path": "../node_modules/devextreme/dist",
"main": "js/dx.web"
}
Add devextreme css to index.html:
<head>
...
<!-- DevExtreme themes -->
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.light.css" />
...
</head>
And then a simple example in app.js and app.html would look like this:
app.html
<template>
<div id="grid"></div>
</template>
app.js
export class App {
attached() {
$('#grid').dxDataGrid({
dataSource: [{id: 1, name: 'Test'}]
});
}
}
source to share