Our blazing fast Grid component built with pure JavaScript


Post by dev team »

Issue
We are experiencing issues when checking the Store for changes.

this.grid.store.changes;

A large % of attempts will resolve in no changes which will not proceed with our desired implementation. This affects:

  • Model Create
  • Model Edit

Current Implementation

@Method()
  public async loadData<T extends object>(data: T[]): Promise<void> {
    if (!Array.isArray(data)) {
      data = [];
    }

this.store.data = data;

if (this.autoSizeOnDataLoad) {
  await this.resizeColumns();
}
  }
private get storeFields() {
    const arr = Array.isArray(this.columns) ? this.columns : [];
    return arr.filter(column => !this.columnTypes.includes(column.type)).map(({ field: name, storeType, type }) => ({
      name,
      type: storeType || type,
    }));
  }

private buildGridConfig(): Partial<GridConfig> {
    const config = {
      id: this.gridId,
      appendTo: this.host,
      height: '100vh',
      ...
      store: {
        fields: this.storeFields,
        sorters: this.columnConfig?.sorters ?? [],
        listeners: {
 })

Post by dev team »

As an additional note, we are using Model.set() within an iteration. This sometimes will display the changes from the Store, but there doesn't seem to be any reproduction steps consistently.

https://www.bryntum.com/docs/grid/api/Core/data/Model#function-set

for (const jobKey in job) {
      record.set(jobKey, job[jobKey]);
    }

Post by alex.l »

Hi dev team,

Unfortunately, the code you shared doesn't look relevant to me. We need more context here.

Try to set data like this:

record.set(job);

And see if it fix the problems you experienced.

All the best,
Alex


Post by dev team »

Hi Alex.

As we are using a custom editor created using StencilJS, we take the Model from the store for a particular row, hydrate the forms and present.

From here the user can edit any data and click save. This will evaluate what data has been changed from the originalData to the new Model and emit the diff.

@State() jobDiff: Partial<Job> & Object = {};

saveJob() {
    const tabKeys = Object.keys(this.tabValidity);

if (tabKeys.every((k) => this.tabValidity[k].valid)) {
  const duration = this.calculateDiffDuration();
  if (duration != null) {
    this.jobDiff = {
    ...this.jobDiff,
      duration,
    };
  }

  // patch the object with additional values
  this.saveClicked.emit(this.jobDiff);
}
else {
  console.warn(this.tabValidity);
}
  }
  

A separate StencilJS component will listen for the saveClicked event and essentially flow through to where we will be checking if the grid.store.changes has any values. This is where this issue lies. It seems to be inconsistent to whether we will have changes hydrated at this time. If not then record.revertChanges(); is called rolling back user input.

private get changes(): { added: JobModel[], modified: JobModel[], removed: JobModel[] } {
    return this.store.changes as { added: JobModel[], modified: JobModel[], removed: JobModel[] };
}

private async handleJobPatchCreation(record: JobModel) {
    const changes = this.changes;

if (changes) {

  if (changes?.modified) {
    const modified: Partial<Job>[] = changes.modified.map((j: JobModel) => {
      return j.modifications;
    });
    // Generate the jsonPatchDocument
    const jobUpdate: JobPatch[] = jobUpdated(this.jobs, modified);

    //Emit an event with the payload.
    this.jobUpdated.emit(jobUpdate);
  }
  if (changes?.added) {
    // Generate the jsonPatchDocument
    const jobAdd: JobPatch[] = jobAdded(changes.added);

    // Filter out the operations to just be the Job add and not any of the Bryntum metadata
    jobAdd[0].operations = jobAdd[0].operations.filter(addOperation => addOperation.path === '/_data');

    this.jobAdded.emit(jobAdd);
  }
  this.store.commit();
}
else {
  record.revertChanges();
}
  }

Post by alex.l »

Now it's even harder than before :) I have no idea how reproduce it, so let's try to check theories.
Do you have all fields you changed in data model of your store?
https://bryntum.com/docs/grid/api/Core/data/Store#property-modelClass
https://bryntum.com/docs/grid/api/Core/data/Store#config-fields
https://bryntum.com/docs/grid/api/Core/data/Model

All the best,
Alex


Post Reply