Our blazing fast Grid component built with pure JavaScript

Post by conn.finn »


I was developing using version 5.6.1 of the grid library and noticed that my group sorter functions were no longer working as previously implemented. I was relying on calculated getter properties that I was accessing using the originalData accessor on the model record. Now, it just returns undefined.

This is my group sorter function:

  rowGroupSorter(record1, record2) {
    // Within groups we want to sort by the selected column sort. Returning `null` tells Bryntum to sort by column instead of row group. 
    if (record1.originalData.isAssignedToTerritory === record2.originalData.isAssignedToTerritory) {
      return null;

// Otherwise, we want to sort AccountRecords into 2 row groups. In this case, we want to display the `isAssignedToTerritory === true` group first.
return record1.originalData.isAssignedToTerritory ? -1 : 1;

I can see when serializing the JS object that the originalData.isAssignedToTerritory data is present, but not accessible using dot notation.

Attached is a screenshot of what I was seeing in the browser console during debugging.

Do I need to modify the way I'm doing group sorting or should this still work?

sorter-function-debug.png (191.31 KiB) Viewed 267 times

Post by marcio »


originalData is not a public API, so it shouldn't be used. Are you able to access directly the property inside your model?

Best regards,

Post by Animal »

As Marcio said, that's a private property.

But there's a lot of context we're not seeing here.

Like how did your originalData property come to contain a property named "originalData.isAssignedToTerritory"? That must have taken some strange conversion code to inject that into there.

Post by conn.finn »

Using the originalData property has allowed me to access some getter properties on the underlying class that encapsulates each record as it returns exactly the class instance I constructed and passed into the grid. isAssignedToTerritory is a getter property.

export default class AccountRecord {
  get isAssignedToTerritory() {
    return !this.isDropped && !this.isPendingDrop;

Post by Animal »

Waits so you are passing AccountRecord instances as the data of new Records?

Post by conn.finn »

We populate the grid's row data store with instances of our custom AccountRecord class. This class also has getters, an example of one above, that we use throughout our implementation of the grid.

Post by Animal »

Well, the store is not populated with them. They are wrapped in instances of Model. If you want to put things into Stores, extend the Model class.

export default class AccountRecord extends Model {
    static fields = [{
        name : 'isAssignedTerritory',
        type : 'boolean'
    ...etc... all the other fields used by the UI...

Post Reply