HI,

Could you provide example how to use DxPopup. I was able to create empty Popup windows but was not able to populate it with any content inside it.
Many thanks.

If i try this:

<dx-popup [visible]="true" [title]="'SuperTitle'">
    HELLO
</dx-popup>

It shows the popup with the title but doesn't show "Hello" in the content.

If I try to use it with Templates:

<dx-popup [visible]="true" [title]="'SuperTitle'">
    <div *dxTemplate="let data = data of 'contentTemplate'">
        Hello
    </div>
</dx-popup>

It doesn't show anything

Hello,
How we can achieve cell customization in Angular 2 as given for angular 1 in link below:
http://js.devexpress.com/Demos/WidgetsGallery/#demo/data_grid-templates-cell_customization/angular
Kindly provide some demo/example for angular2 cell customization in dataGrid.

Regards,
Ali

When i Change Paging enabled/disable the grid doesn't refresh properly. I have to change the datasource to get it working.

Calling repaint() and/or refresh() doesn't work.

http://angularjs.blogspot.com/2016/06/rc3-now-available.html

https://angular.io/docs/ts/latest/cookbook/dynamic-form.html

ideally using template binding to a custom items template and a title template.

The code below doesn't work:

<dx-scroll-view>
    <div>Some scrollable content</div>
</dx-scroll-view>

The 'npm install devextreme-angular2' command should force the jQuery npm package to install.

Hello,

Have you any example to use pivot grid with angular2 ?

Thx,

YB

I try to add the edit button but it doesn't appear and there are no errors.
My configuration :
[editing]='{ mode: "batch", allowUpdating: true, allowAdding: true, allowDeleting: true }'

Hello,

I try to resize my grid columns but can't.

You can see my configuration :

<dx-data-grid style="height: auto; width: 90%"
                              [columns]='tbDataColumns'
                              [dataSource]='dataTransacExtrem'
                              [paging]='{
                                    pageSize: 10
                                    }'
                              [pager]='{
                                    showNavigationButtons: true
                                    }'
                              [editing]='{
                                    mode: "batch",
                                    allowUpdating: true,
                                    allowAdding: true,
                                    allowDeleting: true
                                    }'
                              [cacheEnabled]="true"
                              [allowColumnReordering]="true"
                              [filterRow]="{
                                    visible: true
                              }"
                              [export]="{
                                    enabled: true,
                                    fileName: 'Employees',
                                    allowExportSelectedData: true
                              }"
                              [allowColumnResizing]="true"
                              [searchPanel]='{
                                    visible: true,
                                    width: 240,
                                    placeholder: "Search..."
                              }'>

                </dx-data-grid>

And the result in my web app :

When I try to resize columns with mouse I can't, the columns doesn't resize.

Any solutions ?

Thx

YB

Now the DevExtreme bundles are used and don't allow taking all possible advantages of using WebPack and other build tools.

Hi,

in your chart zooming sample of DevExtreme
http://js.devexpress.com/Demos/WidgetsGallery/#demo/charts-advanced_features-zooming_and_scrolling
there is a function
zoomArgument(startValue, endValue)
this seems not to be available via your Angular2 mappings

Could you please provide me with an example using the DxPopOver widget ?

Best regards and thanks

When I install the devextreme-angular2 npm package into an Ionic 2 application and try to use DevExtreme widgets inside it, I've got the 'No Directive annotation found on DxButton' error.

Hi,

Setting FirstDayOfWeek in DxScheduler sets the days wrong. In the sample page it works: DxScheduler

Thank You

Minor issue because we can access the instance with @ViewChild

If we obtain a reference to an Angular 2 component:

@ViewChild(DxButton) 
myButton:DxButton

and try to change its property:

this.myButton.text = "New value";
//this.myButton.instance.option("text"); <= returns old value

the corresponding option is not changed.

I'm unable to find the solution to capture the click event on the dxMap component.
And being able to capture the location.

I thought it would be something like this.

<dx-map [(markers)]="markers" (click)="mapOnClick($e)"></dx-map>

  mapOnClick(e) {
    alert('mapOnClick location:' + e.location);
  }

But thats not working
Thanks in advance

I try to use the 100% width of my screen but the chart are created at rectangle with width of 400 px.
I have try class "full-width" without succes.
I have try to fix the parent container size and set the child chart at auto or pourcentage without succes.
Have you a solution for fix it?
Thx
YB

Firefox
Google Chrome

As a workaround, apply CSS like style="height: 500px; width: 500px; display: block" to your dx-data-grid element.

Hello,

When I configure more than 10 columns for "dx-data-grid", this error appear :

Uncaught (in promise): Unsupported number of argument for pure functions: 11

zone.js:461 Unhandled Promise rejection: Unsupported number of argument for pure functions: 11 ; Zone: angular ; Task: Promise.then ; Value: BaseException {message: "Unsupported number of argument for pure functions: 11", stack: "Error: Unsupported number of argument for pure fun…ty_binder.js:168:9)↵ at Array.forEach (native)"}

Thx

For instance, I have a chart widget with its 'series' option bound:

<dx-chart [dataSource]="dataSource" [series]="series"></dx-chart>

series = {
    argumentField: "day",
    valueField: "oranges",
    name: "My oranges",
    type: "bar",
    color: '#ffa500'
}

Then, I would like to update the 'series.name' property and see the chart updated in the UI. In this case, I have to change the reference to the whole 'series' object in order to force the Angular 2 change detection mechanism work.

Below is a sample:

import { Component, OnInit } from '@angular/core';
import { DxList } from 'devextreme-angular2';

@Component({
    template: `
        <dx-list [(items)]="items" height="300px">
        </dx-list>

        <div *ngFor='let t of items'>
            <span>{{t.text}}</span>
        </div>
    `,
    directives: [DxList]
})

export class ListsPage implements OnInit {
    items = [{ text: 1}, { text: 2 }];

    updateItems() {
        this.items.push({ text: 3});    
    }

    ngOnInit() {
        setTimeout(() => this.updateItems(), 3000);
    }

    constructor() {}
}

Hi,

Before devextreme-angular2 i can automatically configure the adapter for the dxValidator like this

<div data-ng-model="vm.data" dx-text-area="{...}" dx-validator="vm.validationrules">

Now i can use Custom Validation Engine with [isValid] and [validationError] and works as you showed in the example.

The problem is that I already have a lot of validationRules defined in my app ->validationrules = { validationRules: [{ type: "required" }] };
Is there a simple way to associate the validationRules to the editor? [validationRules]="validationrules"?
Is there a way to associate an Editor with a DxValidator? [validator]="validatorRef/instance/etc"? Transclusion maybe?
If the proper way is to configure the adapter manually, can you provide an example?

Thank You so much.

For SPA( Angular ) development, the async file load send a thank you. It's optimize and minimize page load and enable javascript module management.

Since 16.1.5 I can't resize columns. The cursor and the vertical line appears but i can't drag it.

It Throws
dx.all.js:18 Uncaught TypeError: l is not a constructorctor @ dx.all.js:18t @ dx.all.js:9t.getBlob @ dx.all.js:18t.export @ dx.all.js:20exportToExcel @ dx.all.js:60onItemClick @ dx.all.js:60execute @ dx.all.js:13_executeAction @ dx.all.js:13execute @ dx.all.js:13(anonymous function) @ dx.all.js:16l @ dx.all.js:16_itemEventHandlerImpl @ dx.all.js:40_itemEventHandler @ [...]

I've already import jszip. I've working this before changing to devextreme-angular 2 and v:16.1

Hi,

I would like to know how to integrate devExtreme-angular2 library with angular CLI build tool.
How to configure 'evextreme-angular2' for the following files in angular CII
system-config.ts
angular-cli-build.js
index.html

Hello. Can you help me with error:

Exception: Call to Node module failed with error: ReferenceError: DevExpress is not defined

in

node_modules\devextreme-angular2\core\dx.component.js:2:10

I add devextreme-angular2 to project with execute

npm i devextreme-angular2

In project i use webpack.

Thank you.

It seems that is not working. The button is showed but I can't click it.

Hello. I have some problem with run example. After npm install i execute npm start, but return error. Add a npm-debug.log. Thank you.
npm-debug.txt

Learning Angular 2 from scratch, not sure how to get these to work.

Other components I can see in the examples.

I want to know if you have planned to transform your jquery component in angular2 component ?
Your response will determine the purchase or of your library.

Is this component ready?
I get an exception: "zone.js:260 Uncaught RangeError: Maximum call stack size exceeded"

DxVectorMap is working as expected.

If enableProdMode() is not called, the 'Expression has changed after it was checked' error occurs when running the application from the ./examples folder.

How can i use DxTemplate to customize cellTemplate in dxDataGrid?

Before:

<div data-options="dxTemplate:{ name:'buttonDeleteCellTemplate' }">
    <div dx-button="{bindingOptions: {onClick: 'vm.buttonClicked'}, 'text': 'Delete'}"></div>
</div>

in Column:
{ dataField: 'whatever', dataType: 'string', caption: 'superCaption' cellTemplate: 'buttonDeleteCellTemplate' }

Now?

Hi,

This is a though one.

If you have a componentA with transclusion like this:

<div *ngIf="dataSource"> 
    <ng-content></ng-content>
</div>

And in a componentB:

<componentA>
    <dx-text-box [(value)]="datafield" [IsValid]="whatever" [validationError]="{ message: 'Invalid'}"></dx-text-box>  
</componentA> 

When dataSource is null first and then it gets a value. With this circunstances the dxValidator doesn't show Properly. The problem is the <div *ngIf="**dataSource**"> and Transclusion together.

An easy work around is changing de *ngIf to the child and it works:

    <ng-content></ng-content>

And in a componentB:

<componentA>
    <dx-text-box *ngIf="dataSource" [(value)]="datafield" [validationError]="{ message: 'Invalido'}"></dx-text-box>  
</componentA> 

Thank You.

The two-way DxForm binding doesn't seem to work at all. I've provided a repro sample at the following URL:

https://github.com/marcelgood/DxFormBindingIssue

See README.md for instructions on how to reproduce the issues.

To add a button to a DxToolbar you declare it as a DxButton configuration object as follows:

in your host component TS code:

import { Component } from '@angular/core';
import { DxToolbar } from 'devextreme-angular2';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [DxToolbar]
})
export class AppComponent {
  toolbarItems = [{
            location: 'before',
            widget: 'dxButton',
            options: {
                text: 'Press me',
                icon: 'refresh',
                onClick: function() {
                    alert("Hello world!");
                }
            }
        }
    ];
}

in your HTML template:

<dx-toolbar [items]="toolbarItems"></dx-toolbar>

It doesn't seem to be natural. It's better to declare this as follows:

import { Component } from '@angular/core';
import { DxToolbar, DxToolbarItems, DxButton } from 'devextreme-angular2';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [DxToolbar, DxToolbarItems, DxButton]
})
export class AppComponent {
  sayHello() {
    alert("Hello world!");
  }
}

<dx-toolbar>
  <dx-toolbar-items location="before">
    <dx-button text="Press me" (onClick)="sayHello()" icon="refresh"></dx-button>
  </dx-toolbar-items>
</dx-toolbar>

Hi,

Need to update metadata for this component too. At least adaptivityEnabled.

Thank You

Screen

Project

Hello,

Have you any example to use DataGrid with angular-2 while passing settings in json from component not directly in the view ?

For example:

    <dx-data-grid [dataSource]="projects"
                  [allowColumnResizing]="true"
                  [hoverStateEnabled]="false"
                  [allowColumnReordering]="true"
                [searchPanel]="{visible: true}"
                  [paging]="{pageSize: 5}"
                 [pager]="{showInfo:true,showNavigationButtons:true,showPageSizeSelector:true}"
                  [rowAlternationEnabled]="true"
                  [selection]="{mode: 'none'}"
                  [editing]="{mode: 'form',allowUpdating: true,allowDeleting: true,allowAdding: true, texts:{addRow: 'Add a project'}}"
                  [export]="{enabled: true,fileName:'Projects',allowExportSelectedData: true}"
                  [groupPanel]="{visible: true}"
                  [filterRow]="{visible: true,applyFilter: 'auto'}"
                  [selection]="{mode: 'single'}">
    </dx-data-grid>

How we can pass json objects from component to view? while in above example json objects are directly mentioned in view.

Regards,
Ali

Hello,

I want to use DxDateBox with a german date format DD.MM.YYYY set as displayformat.

As this didn't work out of box, I contacted DevExpress Support (we have a Universal Subscription).

They told me to include globalize. https://github.com/jquery/globalize

At the end it is working, but I'm not sure if I did it the best way ...

I installed it via

npm install globalize cldr-data --save

Afterwards I changed the following files

Angular-cli-build.js

vendorNpmFiles: [
  (...)
  'devextreme/dist/js/dx.all.js',
  'devextreme/dist/css/*.css',
  'devextreme/dist/css/icons/*.*',
  'devextreme-angular2/**/*.+(js|js.map)'    ,
  'ng2-bootstrap/**/*',
  'moment/min/**',
  'globalize/dist/**',                <----
  'cldrjs/dist/**'                    <----
]

system-config.js

const map: any = {
    'devextreme-angular2': 'vendor/devextreme-angular2',        
    moment: 'vendor/moment/min/moment.min.js',
    globalize: 'vendor/globalize/dist/globalize.js',     <----
    'symbol-observable': 'vendor/rxjs/node_modules/symbol-observable',
    'ng2-bootstrap': 'vendor/ng2-bootstrap',
};

/** User packages configuration. */
const packages: any = {
  'devextreme-angular2':        { main: 'index.js', defaultExtension: 'js' }, 
  'vendor/ng2-bootstrap': {        defaultExtension: 'js' },
  'symbol-observable': { main: 'index.js', defaultExtension: 'js' }    
};

Then I added the following to my index.html

<script type="text/javascript" src="vendor/cldrjs/dist/cldr.js"></script>
<script type="text/javascript" src="vendor/cldrjs/dist/cldr/event.js"></script>
<script type="text/javascript" src="vendor/cldrjs/dist/cldr/supplemental.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/number.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/currency.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/date.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/message.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/plural.js"></script>
<script type="text/javascript" src="vendor/globalize/dist/globalize/relative-time.js"></script>

Is there a better way of packaging?
at least the html looks ugly

public onContextMenuPreparing(e: any) {
if (e.target == 'content') {
e.items = this.contextMenuItems;
}
return e;
}

The event is called but the context menu doesn't show

I cant move popup Windows like columnChooser or DxPopUp.

With Devextreme 15.* i had the same problem in columnChooser. Maybe it's a bug not related to devextreme-angular2.

Thank you.

This error occured when I try to use your lib with angular2 in my project.

transacstandard:85 Error: ReferenceError: DevExpress is not defined
at Object.eval (http://localhost:5000/js/devextreme-angular2/core/dx.component.js:2:10)
at eval (http://localhost:5000/js/devextreme-angular2/core/dx.component.js:88:4)
at eval (http://localhost:5000/js/devextreme-angular2/core/dx.component.js:89:3)
at Object.eval (http://localhost:5000/js/devextreme-angular2/index.js:5:10)
Evaluating http://localhost:5000/js/devextreme-angular2/core/dx.component.js
Evaluating http://localhost:5000/js/devextreme-angular2/index.js
Evaluating http://localhost:5000/app/components/devextreme/devextreme.js
Evaluating http://localhost:5000/app/components/main/main.component.js
Evaluating http://localhost:5000/app/boot.js
Error loading http://localhost:5000/app/boot.js

I try to use devextreme like that in my system.config.js

 // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        'rxjs': 'js/rxjs',
        '@angular': 'js/@angular',
        'angular2-in-memory-web-api': 'js/angular2-in-memory-web-api',
        'ng2-bootstrap/ng2-bootstrap': 'js/',
        'moment': 'js/moment',
        'ng2-select': 'js/ng2-select',
        'ng2-bootstrap': 'js/ng2-bootstrap',
        'toastr': 'js/toastr.min.js',
        'devextreme-angular2':  'js/devextreme-angular2'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'boot.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
        'angular2-cookie': { main: 'core.js', defaultExtension: 'js' },
        "moment": { defaultExtension: 'js' },
        'ng2-select': { defaultExtension: 'js' },
        'ng2-bootstrap': { defaultExtension: 'js' },
        'toastr': { defaultExtension: 'js' },
        'devextreme-angular2': { main: 'index.js', defaultExtension: 'js' } 
    };: 

And I import the lib :
import { DxButton, DxCheckBox, DxSwitch, DxTextBox, DxTextBoxValueAccessor, DxTextArea, DxNumberBox, DxDateBox, DxProgressBar, DxSlider, DxRangeSlider, DxLoadIndicator, DxAutocomplete, DxSelectBox, DxTagBox, DxRadioGroup, DxColorBox, DxCalendar, DxTemplate, DxList, DxPopup, DxChart, DxDataGrid } from 'devextreme-angular2';

Should be type instead of format. Accepted values 'date' | 'time' | 'datetime'. It seems that date-box.d.ts reflects old api.

According to your DevExtreme documentation I have to call
DevExpress.config({ defaultCurrency: 'EUR' });
for setting another default currency than USD.

Is it possible to include this DevExpress object in your angular 2 mappings?

It would be great if I can import it like
import { DevExpress} from 'devextreme-angular2';
and use it as described.

If this is not possible, how can I use it instead (Angular 2 with TypeScript)?

in the app.component.html if you replace this

<dx-list [grouped]="true" style="height: 600px" [items]="[ { key: 'Notebook', items: [ 'Supernote JG867', 'Ultranote VP334', 'Meganote LS952' ] }, { key: 'Netbook', items: [ 'Supernet HY834', 'Ultranet KN354', 'Meganet ME830' ] } ]">

with

<dx-list [grouped]="true" style="height: 600px" [items]="listData">

where

this.listData is defined in the app.component.ts using exactly the same javascript as above. The app no longer displays list data