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 ?
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.
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();
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.
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.
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)