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