DevExtreme and Aurelia integration

Question

DevExtreme support angular directives as shown on this example page for dxDataGrid. How can I achieve the same with Aurelia?

Examples showing the integration:

score 3 · Accepted Answer · answered Jul 07 '15 at 06:23

3

DevExtreme does not support integration with Aurelia out-of-the-box.

But you can try to create the Custom Elements for some DevExtreme widget.

answered Jul 07 '15 at 06:23

Sergey

5,396
3
26
38

Is Aurelia custom element equivalent to directives or HTML web components? – wonderful world Jul 07 '15 at 11:40
According this [article](http://patrickwalters.net/best-parts-of-aurelia-1-composing-custom-elements-templates/): `Custom elements are web components that need to be imported or composed to use.` – Sergey Jul 07 '15 at 12:21
My understanding is custom element follow the html web components standard, I can't find any references but I'm sure it has been mentioned in the various presentations. – Matt McCabe Jul 08 '15 at 10:02
1

Wish DevExpress or MVC 6 or Telerik Kendo had adapters for Aurelia. They are all supporting Angular. – wonderful world Jul 08 '15 at 11:22
1

@wonderfulworld: Aurelia bindings for Kendo are now available: http://blog.durandal.io/2016/01/28/aurelia-and-kendo-ui/ – Matt Jan 29 '16 at 06:33

score 2 · Answer 2 · answered May 19 '17 at 07:09

2

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

answered May 19 '17 at 07:09

scotru

2,563
20
37

smoore4 · Answer 3 · 2018-01-20T04:09:46.570

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'}]
        });

      }
    }

DevExtreme and Aurelia integration

3 Answers3

Linked