DevExtreme Examples
A set of sample applications that will help you get started with DevExtreme.
DevExtreme Modules
Each example in this section holds a simple application containing a dxButton widget with an alert dialog. It is enough to demonstrate how to link the required DevExtreme modules to the application using RequireJS, SystemJS, webpack or jspm with jQuery, AngularJS, Angular, Knockout, React or Vue approach. All examples require Node.js and npm to install DevExtreme package and its dependencies. Basic principles of working with these tools would be also helpful.
| Used Technologies: | Example Name: |
|---|---|
| RequireJS with jQuery | requirejs-jquery |
| webpack with jQuery | webpack-jquery |
| jspm with jQuery | jspm-jquery |
| RequireJS with AngularJS | requirejs-angularjs |
| webpack with AngularJS | webpack-angularjs |
| jspm with AngularJS | jspm-angularjs |
| RequireJS with Knockout | requirejs-knockout |
| webpack with Knockout | webpack-knockout |
| jspm with Knockout | jspm-knockout |
| Angular Universal | universal-angular |
| webpack with React | webpack-react |
| webpack with Vue | webpack-vue |
DevExtreme Angular Integration
An example in this section demonstrates how to build an application via rollup with devextreme-angular using AoT compilation.
| Used Technologies: | Example Name: |
|---|---|
| rollup with devextreme-angular | rollup-angular |
An example in this section demonstrates how create an application via angular-cli with devextreme-angular and devextreme-intl.
| Used Technologies: | Example Name: |
|---|---|
| angular-cli with devextreme-angular and devextreme-intl | intl-angular |
The following examples demonstrate how to use DevExtreme Globalize integration in SystemJS and Webpack environments. Each example in this section holds a simple application containing a DataGrid widget localized to "de" locale.
| Used Technologies: | Example Name: |
|---|---|
| SystemJS with Angular and Globalize | systemjs-angular-globalize |
| Webpack with Angular and Globalize | webpack-angular-globalize |
An example in this section demonstrates how create an Angular Univeral application via angular-cli with devextreme-angular.
| Used Technologies: | Example Name: |
|---|---|
| angular-universal with devextreme-angular and devextreme-intl | universal-angular |
DataGrid and PivotGrid - Working with Remote Data
Examples in this section demonstrate the use of the DevExtreme DataGrid and PivotGrid widgets with remote data. Each example holds a solution containing a single page application with a DataGrid or PivotGrid widget that works with remote data served by a Web API or MVC 5 controller.
| Used Technologies: | Example Name: |
|---|---|
| DataGrid with Web API | datagrid-webapi |
| PivotGrid with Web API | pivotgrid-webapi |
| DataGrid in an MVC 5 App | datagrid-mvc5 |