DevExtreme and Aurelia integration
DevExtreme support angular directives as shown on this example page for dxDataGrid. How can I achieve the same with Aurelia?
Examples showing the integration:
https://www.youtube.com/watch?v=iIZj6hOFg0o
http://blog.falafel.com/getting-started-with-devexpress-and-angularjs/
DevExtreme does not support integration with Aurelia out-of-the-box.
But you can try to create the Custom Elements for some DevExtreme widget.
You may want to check out the work of Stefan Heim. He's created some prototype examples of DevExtreme/Aurelia integration. There's a GitHub repository and demo available:
https://github.com/stenet/aurelia-devextreme
http://stefan.96.lt
The most basic scenario follows these 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 is the tricky part...in aurelia_project open aurelia.json and add this to vendor-bundle.js dependencies (can also use dx.all):
{
"name": "devextreme",
"path": "../node_modules/devextreme/dist",
"main": "js/dx.web"
}
Add the 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 will look like this:
app.html
<template>
<div id="grid"></div>
</template>
app.js
export class App {
attached() {
$('#grid').dxDataGrid({
dataSource: [{id: 1, name: 'Test'}]
});
}
}