If Enabled State Locale we not see any records

[vadim@lab-event.com]

SchedulerPro/Grid Version 5.6.8

We use the SchedulerPro 5.6.8 library to work with Grid, because if we use both Scheduler and Grid with different libraries, our styles break (but now about something else)

If we enable StateProvider.setup('local'), then the records are displayed on the first boot, but on the second boot (after the state has been registered in local storage) we no longer see them until we call the refreshRows function.

{
    "appendTo": {
        "_prevClass": "w-100 bryntum-grid-container"
    },
    "loadMask": "Chargement en cours",
    "stateId": "gridEventsListing",
    "autoHeight": false,
    "rowHeight": 38,
    "height": "80vh",
    "minHeight": "80vh",
    "fixedRowHeight": true,
    "features": {
        "stripe": true,
        "quickFind": true,
        "excelExporter": true,
        "cellMenu": false,
        "filterBar": {
            "keyStrokeFilterDelay": 1500
        },
        "regionResize": true
    },
    "selectionMode": {},
    "columns": {
        "data": [
            {
                "id": "created_at",
                "field": "created_at",
                "text": "DATE ENREGISTREMENT",
                "flex": 1,
                "type": "date",
                "htmlEncode": false,
                "editor": false
            },
            {
                "id": "company_name",
                "field": "company_name",
                "text": "CLIENT",
                "flex": 1,
                "htmlEncode": false,
                "editor": false
            },
            {
                "id": "customer_name",
                "field": "customer_name",
                "text": "CONTACT",
                "flex": 1,
                "htmlEncode": false,
                "editor": false
            },
            {
                "id": "phone",
                "field": "phone",
                "text": "TEL CONTACT",
                "flex": 1,
                "htmlEncode": false,
                "editor": false
            },
            {
                "id": "email",
                "field": "email",
                "text": "Email",
                "flex": 1,
                "htmlEncode": false,
                "editor": false
            },
            {
                "id": "incremental_code",
                "field": "incremental_code",
                "text": "Code événement",
                "flex": 1,
                "htmlEncode": false,
                "editor": false
            },
            {
                "id": "event_name",
                "field": "event_name",
                "text": "TITRE DU PROJET",
                "flex": 1,
                "htmlEncode": false,
                "editor": false
            },
            {
                "id": "dates",
                "field": "dates",
                "text": "DATE EVENEMENT",
                "type": "date",
                "flex": 1,
                "htmlEncode": false,
                "editor": false
            },
            {
                "id": "date_target",
                "field": "date_target",
                "text": "DATE OBJECTIF",
                "type": "date",
                "flex": 1,
                "htmlEncode": false,
                "editor": false
            },
           // ....
            {
                "id": "action",
                "type": "action",
                "text": "Actions",
                "width": 100,
                "region": "right",
                "actions": [
                    {
                        "cls": "fas fa-pencil-alt",
                        "tooltip": "Modifier"
                    },
                    {
                        "cls": "fas fa-envelope",
                        "tooltip": "Envoyer un mail"
                    },
                    {
                        "cls": "fas fa-copy",
                        "tooltip": "Dupliquer"
                    }
                ]
            }
        ],
        "listeners": {}
    },
    "useRestfulMethods": false,
    "restfulFilter": false,
    "sendAsFormData": false,
    "store": {
        "readUrl": "/api/v3/event/index",
        "headers": {
            "accept": "application/json",
            "Authorization": ""
        },
        "modelClass": null,
        "params": {
            "active": 1,
            "tag_user": "",
            "winOrLost": 5,
            "type": 0,
            "customerId": "",
            "companyId": "",
            "startDate": "2024-03-20",
            "endDate": "2024-04-19"
        },
        "pageParamName": "page",
        "sortParamName": "sort",
        "filterParamName": "filter",
        "pageSize": 15,
        "autoLoad": false,
        "listeners": {},
        "fetchOptions": {},
        "useRestfulMethods": false,
        "restfulFilter": false,
        "sendAsFormData": false
    },
    "listeners": {},
    "bbar": {
        "type": "pagingtoolbar"
    },
    "tbar": false,
    "subGridConfigs": {
        "locked": {
            "minWidth": 100
        },
        "left": {
            "width": 240,
            "minWidth": 240
        },
        "middle": {
            "flex": 1
        },
        "right": {
            "width": 100,
            "minWidth": 100
        }
    },
    "emptyText": "Aucun enregistrement à afficher"
}

[marcio]

Hey vadim,

Thanks for reaching out.

How are you enabling StateProvider.setup('local')? Could you please provide a runnable test case for us to debug and check why your application works like that?

[vadim@lab-event.com]

import {
    Grid,
    TreeGrid,
    GridRowModel,
    DateHelper,
    StateProvider,
    AjaxStore,
    LocaleManager,
    NumberFormat,
    AjaxHelper,
} from "@bryntum/schedulerpro";
import "@bryntum/schedulerpro/source/lib/Grid/localization/FrFr";
import "@bryntum/schedulerpro/source/lib/Grid/localization/En";

import "./grid/zipcelx";
import "../css/grid.css";
import "../sass/grid/labevent.scss";

let language = document.querySelector('html').getAttribute('lang')

if (language === 'en') {
    LocaleManager.applyLocale('En');
} else {
    LocaleManager.applyLocale('FrFr');
}

global.GridNumberFormatter = new NumberFormat({
    locale: 'fr-FR',
    fraction: [0, 2]
});

StateProvider.setup('local');

window.createGrid = (appendTo, options, additional) => {
    return new Grid(Object.assign({
        appendTo: appendTo,
        loadMask: options.loadMask || 'Chargement en cours',
        stateId: options.stateId || appendTo,
        autoHeight: false,
        rowHeight: 38,
        height: '80vh',
        minHeight: '80vh',
        fixedRowHeight: true,
        features: Object.assign(options.features || {}, {
            regionResize: true,
        }),
        selectionMode: options.selectionMode || {},
        columns: {
            data: options.columns,
            listeners: {
                update(e) {
                },
            },
        },
        useRestfulMethods: options.useRestfulMethods || false,
        restfulFilter: options.restfulFilter || false,
        sendAsFormData: options.sendAsFormData || false,
        ...(options.httpMethods ? {httpMethods: options.httpMethods} : {}),
        store: {
            readUrl: options.readUrl || null,
            headers: {
                accept: "application/json",
                Authorization:
                    "Bearer " +
                    document.querySelector("meta[name=token]").getAttribute("content"),
                ...(options.headers ? options.headers : {}),
            },
            modelClass: options.modelClass ?? null,
            params: options.params,
            pageParamName: options.pageParamName || 'page',
            sortParamName: options.sortParamName || 'sort',
            filterParamName: options.filterParamName || 'filter',
            pageSize: options.pageSize || 20,
            autoLoad: options.autoLoad ?? true,
            listeners: options.storeListeners ?? {},
            fetchOptions: options.fetchOptions ?? {},
            useRestfulMethods: options.useRestfulMethods || false,
            restfulFilter: options.restfulFilter || false,
            sendAsFormData: options.sendAsFormData || false,
            ...(options.httpMethods ? {httpMethods: options.httpMethods} : {}),
        },
        listeners: options.listeners,
        bbar: options.bbar || false,
        tbar: options.tbar || false,
        subGridConfigs: {
            locked: {
                minWidth: 100,
            },
            // First region, fixed width
            left: {
                width: 240,
                minWidth: 240,

        },
        // Second region, flex width = will fill available width
        middle: {
            flex: 1
        },
        // Third region, also fixed width
        right: {
            width: options?.subGridConfigs?.right?.width || 100,
            minWidth: options?.subGridConfigs?.right?.minWidth || 100,
        }
    },
    emptyText: options.emptyText || 'Aucun enregistrement à afficher',
}, additional));

return grid;
};

[tasnim]

Hi,

Could you please share a runnable test app that we can run locally with npm i && npm start?
If you're not comfortable sharing it here publicly, you can always send us to support@bryntum.com

Best of luck ,
Tasnim