Devextreme-angular: How to import DevExpress.data.CustomStore ?

Created on 19 Oct 2016 · 6Comments · Source: DevExpress/devextreme-angular

How to import DevExpress.data.CustomStore into TypeScript?

The only place I found this declaration is in devextreme/dist/ts/dx.all.d.ts. However, when I try

import { CustomStore } from 'devextreme/dist/ts/dx.all';

it doesn't work. It gives: [ts] File 'devextreme/dist/ts/dx.all.d.ts' is not a module. -- which is comprehensible, since there isn't a dx.all.js in this same folder.

For the sake of completion: I'm trying to port this code from Angular 1.5:

    this.gridDataStore = new DevExpress.data.CustomStore({
        load: (loadOptions) => $q.resolve(this.getBuffer(loadOptions.skip, loadOptions.skip + loadOptions.take)),
        totalCount: () => $q.resolve(this.data.length),
        update: (key, values) => { this.data[key.a] = values.c; return $q.resolve(values); }
    });

Using
"devextreme-angular2": "^16.1.7"
"typescript": "2.0.3"

question

Source

fdcastel

Most helpful comment

You can do this in version 16.2. Recently, we published an alpha version of 16.2: 16.2.1-alpha.1. With this version, you can declare CustomStore like this:

import CustomStore from "devextreme/data/custom_store";

orders = new CustomStore({
    load: (opts) => {
        return new Promise((resolve, reject) => {
            resolve([{ text: "Test" }]);
        });
    },
    totalCount: (opts) => {
        return new Promise((resolve, reject) => {
            resolve(1);
        });
    }
});

GH165.zip

GoshaFighten on 21 Oct 2016

🎉4

All 6 comments

BTW: I'm using angular-cli and I did follow the instructions from #110. (I added jquery.min.js and dx.all.js in the "scripts" section of angular-cli.json).

Everything is working fine. I can create a <dx-data-grid> without problems.

The problem is how to create a CustomStore. I simply don't know how to "teach" TypeScript compiler where it is.

fdcastel on 19 Oct 2016

@fdcastel
I think you are getting the Cannot find name 'DevExpress' error when tsc compiles our component. To resolve the issue, declare DevExpress in the following way:

declare let DevExpress: any;
GH165.zip

GoshaFighten on 20 Oct 2016

👎1 👍1

Thank you very much for the tips and for the sample, @GoshaFighten! 👍

I'm already using the :any declaration to work around this. 😉

But... So... there's no way to get strong types definitions for now? I really thought we could use the d.ts 😞

fdcastel on 21 Oct 2016

You can do this in version 16.2. Recently, we published an alpha version of 16.2: 16.2.1-alpha.1. With this version, you can declare CustomStore like this:

import CustomStore from "devextreme/data/custom_store";

orders = new CustomStore({
    load: (opts) => {
        return new Promise((resolve, reject) => {
            resolve([{ text: "Test" }]);
        });
    },
    totalCount: (opts) => {
        return new Promise((resolve, reject) => {
            resolve(1);
        });
    }
});

GH165.zip

GoshaFighten on 21 Oct 2016

🎉4

Whoa! That's exactly what I was waiting for. :) 👍

I'm seeing that now there's support for import only specific modules instead of entire dx! Nice!

We could close this one. I'll certainly have more questions about the new modules but I'll open a new issue for this :)

Thank you very much, @GoshaFighten !

fdcastel on 21 Oct 2016

Hello @GoshaFighten ,
I implemented this approach, however, when in batch edit mode, update method gets called on each cell changed, which is not sufficient, i want to call the server once, not multiple time. And yes, i saw this http://jsfiddle.net/t24jt5mj/ which is still not very helpful. Is there a way to get to the save changes button event?