Our blazing fast Grid component built with pure JavaScript


Post by doki »

Hello,

we recently upgraded and now we're getting quite a few warnings that we can't seem to fix. The examples and the documentation couldn't help us or provide examples of what we need to change.

The first warning we always get:

BryntumGridComponent development warning!
Using "features" parameter for configuration is not recommended.
Solution: Use separate parameter for each "features" value to enable reactive updates of the API instance.

And the second:

[Vue warn]: Invalid prop: type check failed for prop "store". Expected , got Object

Might be the issue that we handle the way to provide configs and data wrong.

// vue component
import BryntumGrid from '@bryntum/grid-vue-3/src/BryntumGrid.vue'
import { GRID_CONFIG_PARTS } from '~/grid-configs/PartsConfig'

const grid_parts = ref()
// to work with values/data of the grid
const gridPartsInstance = computed(() => grid_parts.value?.instance?.value)
const gridPartsConfig = reactive(GRID_CONFIG_PARTS({ t, router, refetchParts }))

<BryntumGrid ref="grid_parts" v-bind="gridPartsConfig" @selection-change="rowChanged" />
// the config to export for the grid
// "vm" is to allow translation for the i18n-integration
export const GRID_CONFIG_PARTS = (vm: any) => (
  // load other things from a "default config" 
  ...GRID_CONFIG_DEFAULT(vm),
  store: {
    sorters: [
      { field: 'name', ascending: true },
    ],
  },
  columns: [
    { field: 'name', text: vm.t('name'), flex: 1 },
    {
      field: 'status',
      text: vm.t('statusName'),
      width: 150,
      type: 'template',
      template({ record }: any) {
        const { category, ...status } = record?.data.status
        return createStatusTemplate(category, status.name)
      },
    },
    {
      field: 'created',
      text: vm.t('created'),
      width: 175,
      type: 'template',
      template({ value }: { value: string }) {
        return formatFixedDateString(vm.locale, value)
      },
    },
    {
      type: 'widget',
      showColumnPicker: false,
      draggable: false,
      sortable: false,
      resizable: false,
      hideable: false,
      icon: '',
      width: 60,
      minWidth: 60,
      widgets: [
        {
          type: 'button',
          defaultBindProperty: 'text',
          text: '',
          icon: '',
          menuIcon: '',
          html: IconDotsVertical,
          htmlCls: '!bg-transparent !border-transparent w-full h-full !p-0 !m-0',
          menu: createMenuItems(Context.BUTTON, vm),
        },
      ],
    },
  ],
  features: {
    ...GRID_CONFIG_DEFAULT(vm).features,
    // sort: [{'name', }],
    cellMenu: {
      items: {
        // Disable default items
      },
    },
  },
})

I hope it's at least clear what we try to achieve with this and you can guide us to the way you intended us to make it work.

Regards,
Doki


Post by alex.l »

Hi Doki,

I would recommend you to download sources for 5.2.0 from Customer Zone and check examples in /examples/frameworks/vue-3 folder. We have a bunch of demos with source code.
Also please review code snippets from our guide here https://bryntum.com/docs/grid/guide/Grid/quick-start/vue-3

This is an example of how to import from package:

import {
  BryntumDemoHeader,
  BryntumGrid
} from '@bryntum/grid-vue-3';

BryntumGridComponent development warning!
Using "features" parameter for configuration is not recommended.
Solution: Use separate parameter for each "features" value to enable reactive updates of the API instance.

The error message explains what to do. features notation is not recommended, you need to use separate parameter for each feature. Here is a list of available features https://bryntum.com/docs/grid/guide/Grid/integration/vue/guide#features
Example

const useGridConfig = () => {
    return {
        filterBarFeature : {
            compactMode : false,
            filter      : { property : 'city', value : 'Paris' }
        },
        stripeFeature    : true,
        quickFindFeature : true,

[Vue warn]: Invalid prop: type check failed for prop "store". Expected , got Object

To have reactive configs, it needs to be set in setup(). Maybe you did it but just not posted. You can find full code in our examples for Vue3

  setup() {
    const gridConfig = reactive(useGridConfig());

If it didn't help, please attach a runnable test case, we will debug it and try to help you.

We highly recommend to check our upgrade guide after every upgrade to see what's changed
https://bryntum.com/docs/grid/guide/Grid/upgrades/5.0.0
https://bryntum.com/docs/grid/guide/Grid/upgrades/5.0.2
https://bryntum.com/docs/grid/guide/Grid/upgrades/5.0.3
https://bryntum.com/docs/grid/guide/Grid/upgrades/5.1.0
https://bryntum.com/docs/grid/guide/Grid/upgrades/5.2.0

All the best,
Alex


Post by doki »

Hi alex.l,

thanks for the detailed answer!
I'll check out the new documentations you listed.

To have reactive configs, it needs to be set in setup(). Maybe you did it but just not posted. You can find full code in our examples for Vue3

Yes, it is indeed in setup. However, it's done per sugar-syntax of <script setup> - but that shouldn't be an issue.

Thanks again. I'll be back with a reply tomorrow!


Post by doki »

Hi! Thanks to the info I could fix most of the issues which arrived.

There is just one function that doesn't seem to work anymore which did before in regards to the ColumnType "Widget".
We provide the same Contextmenu per right-click in any cell or per button at the end of each row.

How we integrate the button and menu:

const createMenuItems = (context: Context, vm: any) => {
  return {
    headline: {
      text: 'Contextmenu title',
      cls: 'contextmenu-headline',
    },
    newPart: {
      text: vm.t('new'),
      onItem: () => {
        // newPart(vm)
      },
    },
  }
}

const useGridConfig = (vm: any) => {
  return {
    columns: [
      {
        text: vm.t('name'),
        field: 'name',
        flex: 1,
      },
      {
        text: vm.t('age'),
        field: 'age',
        flex: 1,
      },
      {
        text: vm.t('city'),
        field: 'city',
        flex: 1,
      },
      {
        type: 'widget',
        icon: '',
        width: 60,
        minWidth: 60,
        widgets: [
          {
            type: 'button',
            // defaultBindProperty: 'text',
            menuIcon: '',
            html: IconDotsVertical,
            // This does not work anymore
            menu: createMenuItems(Context.BUTTON, vm),
            // Tried also the example from the documentation which doesn't work
            menu: {
              items: [
                {
                  text: 'Click me',
                  onItem: () => console.log('you got clicked'),
                },
              ],
            },
          },
        ],
      },
    ],

// ContextMenu per CellClick
cellMenuFeature: {
  items: {
    ...createMenuItems(Context.GRID, vm),
    // Disable all default contextMenu items
    search: false,
    cut: false,
    removeRow: false,
    copy: false,
    filterStringEquals: false,
    filterNumberEquals: false,
    filterNumberLess: false,
    filterNumberMore: false,
  },
},
  }
}

Would be happy if you could direct me in the right direction.

Some small questions which showed up:

  1. Is there a way to disable the complete default contextmenu with one property?
    As you can see in my example I usually need to set every item I find to false to prevent that.

  2. It seems the grid doesn't always load with the right language the user set. Is there an event or "make sure" way so the grid always loads the correct language?

  3. In regards to icons: We use neither Material Icons nor the FA Icons but either manually created SVG-Icons or Icons from another pack like Heroicons.
    We could prevent the grid from loading the default icons but is there a way to overwrite default icons/buttons with our own?

Thanks for the quick support!
Regards,
Doki


Post by alex.l »

There is just one function that doesn't seem to work anymore which did before in regards to the ColumnType "Widget".

I checked in our examples, all works well to me. Please attach a runnable test case, we will debug your app and find the root cause.

Re. to your questions:

  1. There are features that may be completely disabled
    https://bryntum.com/docs/grid/api/Grid/feature/CellMenu

    cellMenuFeature : false
    

    https://bryntum.com/docs/grid/api/Grid/feature/HeaderMenu
    There is a preventable event https://bryntum.com/docs/grid/api/Grid/feature/CellMenu#event-cellMenuBeforeShow
    return false to prevent menu to show.

  2. How to reproduce that? We don't have such problem in our app.
    You always can find current language using

    LocaleManager.locale.localeName
    // or
    grid.localeManager.locale.localeName
    
  3. Nothing automated to suggest you. If you want to rewrite, you could try to use same css class names, but your own CSS rules. Try to set svg code as backgorund CSS rule to make it possible use SVG as class

    .icon-class {
        [ ... ]
        background: url(icon.svg);`
    }
    

All the best,
Alex


Post by doki »

Hello,

the contextmenu didn't work on our end because of a small mistake. Thanks for the assistance!

Since with the 5.x version now the StateManager was introduced, how would it be used in Vue?
I found the JS-version of it but it seems I can't access the state and some methods like it is in there.

As reference I used the example downloaded and the module of it: https://bryntum.com/examples/grid/state/app.module.js?462681

I currently try to autosave a modified state and restore it on mount (if that is the event/time which it's intended to load the grid state).


Post by alex.l »

Hi doki,

Glad to hear you found the cause.
Please create a new topic for this question. Our forums rule is: on thread - one question.
Thank you!

All the best,
Alex


Post Reply