Hi,
I am running this basic Grid in Vue:
<script lang="ts">
import EnLocale from '@bryntum/scheduler/locales/scheduler.locale.En';
import {LocaleManager, Grid, DateHelper, AjaxStore, GridRowModel, StringHelper} from '@bryntum/scheduler';
import {BryntumGrid} from '@bryntum/scheduler-vue-3';
import {reactive} from "vue";
export default {
components: {BryntumGrid},
setup() {
LocaleManager.registerLocale('En', {
...EnLocale,
desc: 'En',
locale: {
DateHelper: {
locale: "da-DK",
weekStartDay: 1
}
}
});
LocaleManager.applyLocale('En');
const grid = reactive({
appendTo: 'journal-container',
ref: 'journalGrid',
cls: 'd-journal',
store: new AjaxStore({
modelClass: GridRowModel,
readUrl: '/api/client/v2/journal',
pageParamName: 'page',
sortParamName: 'sort',
filterParamName: 'filter',
pageSize: 100,
}),
features: {
filterBar: {
compactMode: false,
filter: {property: 'start_date', operator: "sameDay", value: new Date()}
},
stripe: true,
},
columns: [
{text: 'Team', field: "team_name", flex: 1}, // TODO: Translate
{type: 'date', format: 'YYYY-MM-DD', text: 'Start', field: 'start_date', flex: 1}, // TODO: Translate..
{type: 'date', format: 'YYYY-MM-DD', text: 'End', field: 'end_date', flex: 1,}, // TODO: Translate..
{type: 'time', format: 'HH:mm', text: 'Start', field: 'start_time', flex: 1,}, // TODO: Translate..
{type: 'time', format: 'HH:mm', text: 'End', field: 'end_time', flex: 1,}, // TODO: Translate..
{text: 'Type', field: 'type', hidden: true, flex: 1,}, // TODO: Translate..
],
bbar: {
type: 'pagingtoolbar'
}
})
return {
grid
}
}
}
</script>
<template>
<div class="h-full">
<div id="journal-container">
<BryntumGrid ref="journalGrid" v-bind="grid" />
</div>
</div>
</template>
<style>
#journal-container {
display: flex;
flex-direction: row;
flex: 1 1 100%;
margin: 2px;
padding: 2px;
height: 100%;
}
</style>
Check out this video: https://www.dropbox.com/s/wbhe2wqv0f74t55/Screen%20Recording%202023-01-05%20at%2013.30.37.mov?dl=0
The counter bottomright responds to my filtering but not the grid. For you to play around with, I am attaching the two requests being returned from my backend, one with 14 rows and the other with 1 row.
Why is the counter updating but not the grid?