Lack of reactivity with Grid and AjaxStore

[marciogurka]

Forum post

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 the video attached.

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."

Screen.Recording.2023-01-05.at.13.30.37.mov

Response samples
response samples.zip

[isglass]

@marciogurka I am not able to reproduce it, have pushed my test on branch 5885-filterbar-remote. See slack for more info

[knobel-dk]

@marciogurka I am not able to reproduce it, have pushed my test on branch 5885-filterbar-remote. See slack for more info

Hi @isglass

I think it got fixed as part of #5884

[isglass]

@knobel-dk Excellent! Thanks for informing, I'll close this ticket