Our blazing fast Grid component built with pure JavaScript


Post by Mercury »

Hello,

is there a prepared "base fiddle" which allows useage of Bryntum componens with vue?
Sadly I am currently not able to reach the "examples" side (https://www.bryntum.com/examples/grid/) therefore I am posting questions which potentially are solved in there.

I have 2 classes (typescript):

export default class Person {
    readonly personId: number;
    readonly cats: Cat[];
    readonly randomInfo: string;
}
export default class Cat {
    readonly catId: number;
    readonly randomInfo: string;
}

Now I want to show this data in a tree grid with 3 columns, example:

PersonId | CatId | RandomInfo
1        |       | This is a person
         | 1     | First Cat
         | 2     | Second Cat

So my first problem ist using the "cats" property instead of a "children" property, is this possible?
If I switch to children I get the tree to show up, but I am still not able to handle empty data.
My current code looks like this:

<template>
    <bryntum-grid
    class="fill-size"
    :columns="personHeaders"
    :data="persons"
    :treeFeature="true"
    :readOnly="true"
    >
    </bryntum-grid>
</template>

//...
private personHeaders: any = [
        { text: 'PersonId', field: 'personId', type: 'tree'},
        { text: 'CatId', field: 'catId'},
        { text: 'RandomInfo', field: 'randomInfo'},
]

which results in roughly this:

PersonId              | CatId | RandomInfo
1                     |       | This is a person
_generatedClassDefEx1 |       | First Cat
_generatedClassDefEx2 |       | Second Cat

So how could I handle data which is only present in some of the tree entities? (personId for Persons and catId for Cats)

Thanks for your help in advance and Best Regards,
Mercury


Post by mats »

We have this field to control where 'children' are read from: https://bryntum.com/docs/scheduler/#Core/data/Model#property-childrenField-static


Post by Mercury »

Thanks this seems to be what I am looking for.
How would I apply this setting in vue context?

The grid component has no "model" or "childrenField" option. Passing it in my columns definition wont do anything either.
The examples in the documentation show overwriting the Model class, which is not part of the local npm package, seems pretty hacky overwriting something outside of the npm scope.

While I found the class I need to overwrite in the sources (grid-4.0.3/lib/Core/data/Model) this currently wont compile. The error is most likely on my side, but as mentioned earlier this whole approach feels hacky and wrong...

Module parse failed: Unexpected token (605:28)
File was processed with these loaders:
 * ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
|             base        = meta.super.fields,
|             fieldsInfo  = meta.fields = {
                defs : base?.defs.slice() ?? [],
|
|                 // Set to true when an instance's data object is run through exposeProperties

Whats the reason for not allowing something like that?

{ text: 'PersonId', field: 'personId', type: 'tree', childrenField: 'cats' },

Post by saki »

Use the following pattern to set the childrenField value:

    import { Model } from 'bryntum-grid';

    Model.childrenField = 'cats';

This is the simplest way that work without extending of Model. There is a static setter that does all internal housekeeping related to childrenField, so importing Model and assigning the new value is the way to go.

It should be done before the grid is created. I have tried it the main App.vue and in the Vue grid component and both worked.


Post by Mercury »

Thanks for your answers.
The last solution seems to be "global" and only possible when there is exactly 1 bryntum-grid in my application, right?
I looked into the options and will most likely overwrite my model classes with something like that:

    
cats: Cat[]; children = () => this.cats;

Best Regards,
Mercury


Post by mats »

Yes, you should of course subclass our Model class, add your own fields and then redefine your model to have its own custom childrenField.


Post Reply