Our blazing fast Grid component built with pure JavaScript


Post by jhfelectric »

Hello,

Recently, the "Aggregation column demo" has been added to your samples page and this scenario is exactly my needs.
Thanks for that !
I have a hard time translating the demo's code to work in a Vue project, specially where/how I should declare the extended classes Item and CalculatedColumn. I have studied all the Vue examples but nothing comes close.
Can you help ?

Thank you,
Julien


Post by saki »

There is one Vue 2 demo that also uses an extended class and that is Column Types demo. We have folder src/components there and the class extension is in ColorColumn.js therein. The file is then imported before the class is needed, Vue.app in this case:

import './components/ColorColumn.js';

I'd suggest to place your extensions in a separate folder, one per file, and then to import them as needed.


Post by jhfelectric »

Hi Saki,
Thanks for your reply. I should have been more specific.
I have indeed used the ColumnTypes demo as a template, so yes, my CalculatedColumn class sits in a file src/components/CalculatedColumn.js, and I reference it from the App.vue file.
I tried the same idea for the Item class.
If I import the Item.js file inside App.vue, I get

Uncaught ReferenceError: Item is not defined
    at eval (AppConfig.js?ffee:5) etc...

If I import the Item.js file inside AppConfig.js, I get

Item.js:12 Uncaught TypeError: Super expression must either be null or a function
    at _inherits (Item.js:12)
    at eval (Item.js?dcc5:4) etc...

Here is my scr/components/Item.js file

import { GridRowModel } from '@bryntum/grid-vue';

// Define a custom data model to use in the tree store
export class Item extends GridRowModel {
    static get fields() {
        return [
            { name : 'category' },
            { name : 'name' },
            { name : 'price', type : 'number' },
            { name : 'quantity', type : 'number' },
            { name : 'total', type : 'number' }
        ];
    }

get total() {
    return this.price * this.quantity;
}
}

Item.exposeProperties();

Thanks again for any help


Post by saki »

Would you please post the complete code that I can build and run? Cannot say anything before stepping into it.


Post by jhfelectric »

Hi,
I have copy/pasted the files here https://codesandbox.io/s/eloquent-forest-yovw7
Of course this doesn't work because it's missing the npm packages, but you can still view the files.


Post by saki »

Well, I need to run it. Can you please zip you app, without node_modules, and post here the zip? What I need is to copy it on my disk and build it, run it and debug it to find the problem. Reading sources w/o running does not help.


Post by jhfelectric »

Zip is attached

Attachments
columntypes_modified.zip
(1.11 MiB) Downloaded 64 times

Post by saki »

I have adjusted imports, move them where needed and it worked. You can use a diff tool to find all changes. Here is the working code.

Note: I have used the licensed version of grid for testin, please change it back to trial in package.json:

    "@bryntum/grid": "npm:@bryntum/grid-trial@4.3.3",
Attachments
columntypes_modified.zip
(1017.79 KiB) Downloaded 64 times

Post by jhfelectric »

Hi again Saki,
Thanks for your help so far, I did manage to have the grid load and display using your code.
I have downloaded your zip, changed the grid to trial in package.json, ran npm install and finally ran npm run start.
Unfortunately, I am unable to edit values. When I double-click on a price, I get

grid.module.js?94dd:9 Uncaught (in promise) TypeError: grid.expandTo is not a function
    at CellEdit.value (grid.module.js?94dd:9)
    at CellEdit._callee46$ (grid.module.js?94dd:9)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:294)
    at Generator.eval [as next] (runtime.js?96cf:119)
    at asyncGeneratorStep (grid.module.js?94dd:1)
    at _next (grid.module.js?94dd:1)
    at eval (grid.module.js?94dd:1)
    at new Promise (<anonymous>)
    at CellEdit.eval (grid.module.js?94dd:1)

Is this a trial version limitation ?
Thx


Post by saki »

It is because grid is not configured with treeFeature. The features should look like this:

    summaryFeature : true,
    treeFeature : true,

Post Reply