Premium support for our pure JavaScript UI components


Post by jk@datapult.dk »

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?

Attachments
scratch_8.json
(1.1 KiB) Downloaded 20 times
scratch_7.json
(14.84 KiB) Downloaded 21 times

Post by marcio »

Hey jk,

Could you confirm that the URL is being called with the right parameters and that the data being returned is correct?? Also, could you please confirm how is your Grid filter looks like??

Best regards,
Márcio


Post by jk@datapult.dk »

Thanks, Marcio!

marcio wrote: Thu Jan 05, 2023 4:13 pm

Could you confirm that the URL is being called with the right parameters and that the data being returned is correct??

I attached the two requests in my post. I hereby confirm that the data there is correct.

You will notice that the length of these responses matches the bottom right counter but the grid does not update.

marcio wrote: Thu Jan 05, 2023 4:13 pm

please confirm how is your Grid filter looks like??

Is that not in the video?


Post by marcio »

Oh, I meant the filter property, but ok, I was able to reproduce it and created a ticket for fix that behavior https://github.com/bryntum/support/issues/5885

Best regards,
Márcio


Post by jk@datapult.dk »

Hi. Is there a chance that this bug has been re-introduced in 5.3.0? See this video from my production env (so PII parts have been left out): https://www.dropbox.com/s/aaroyibgqis2pd9/Screen%20Recording%202023-03-15%20at%2015.11.17.mov?dl=0


Post by marcio »

Hey,

Could you confirm that on 5.2.8 (the version that the fix mentioned in the ticket got released) that behavior doesn't happen? It's only on 5.3.0??

Best regards,
Márcio


Post by jk@datapult.dk »

I cannot confirm with 100% certainity, unfortunately.. But there is a bug at the moment.


Post by marcio »

I'll reopen the ticket just to be sure, but if you could confirm, when it's released on 5.2.8 we got a positive feedback, so we need to be sure about that.

Best regards,
Márcio


Post by jk@datapult.dk »

Hi marcio. Unsure if you ever got to open this ticket? Both of these have no status update.

https://github.com/bryntum/support/issues/5884
https://github.com/bryntum/support/issues/5885


Post by alex.l »

Hi, I can't reproduce this issue in our online PHP example, as it described in the ticket. If you able to, please attach steps to reproduce or create a video, it will help us to go forward.

Thank you!

All the best,
Alex


Post Reply