DevExtreme support angular directives as shown on this example page for dxDataGrid. How can I achieve the same with Aurelia?
Examples showing the integration:
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:
The most basic scenario follows these steps:
1) Create a new Aurelia app with aurelia-cli: au new
2) Install jquery:
npm install jquery --save3) 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'}]
});
}
}
来源：https://stackoverflow.com/questions/31237680/devextreme-and-aurelia-integration