Understanding the Store

The primary data container in Bryntum is the Store. Stores hold the data that powers all Bryntum widgets. Items within stores are often called records. A record is an instance of the Model or one of the Model subclasses.

But you can't use Store itself in Bryntum Scheduler Pro. Instead, you have to use one of the subclasses that extend the Store class, such as AssignmentStore or ResourceStore. We also refer to these subclasses as stores.

For example, you can use ResourceStore in a Bryntum Scheduler Pro:

new SchedulerPro({
  resourceStore : {
    data: [
      { id : 1, name : "ABBA", country : "Sweden" },
      { id : 2, name : "Beatles", country : "UK" }
    ]
  }
});

Different stores are used for different Bryntum components.

Bryntum SchedulerPro uses the following Stores to hold data.

Store	Description
ResourceStore	Holds a collection of resources
EventStore	Holds a collection of events
AssignmentStore	Holds a collection of assignments
DependencyStore	Holds a collection of dependencies
TimeRangeStore	Holds a collection of time ranges
ResourceTimeRangeStore	Holds a collection of resource time ranges

A store uses a Model as the blueprint for each row (called record) it holds.

Store	Model
ResourceStore	ResourceModel
EventStore	EventModel
AssignmentStore	AssignmentModel
DependencyStore	DependencyModel
TimeRangeStore	TimeRangeModel
ResourceTimeRangeStore	ResourceTimeRangeModel

Similar to the Store, Model is also extended as ResourceModel, EventModel and so on.

Although we recommend loading all your stores from a single endpoing, you can also load each store separately using readUrl.

new SchedulerPro({
  assignmentStore : {
    autoLoad : true, // auto loads the data when store is initiated
    readUrl  : "data/assignment.json",
  }
});

Data formats

Stores can accept arrays of JavaScript or JSON data in either of the following structures:

• Flat data
• Tree data

Flat data

You can use non-hierarchical flat data in a Store, such as the following JavaScript array:

[
  { id : 1, name : 'Dan Stevenson', city : 'Los Angeles', age : 24 },
  { id : 2, name : 'Talisha Babin', city : 'Paris', age : 27 },
  { id : 3, name : 'Maxim Gagarin', city : 'Moscow', age : 34 },
  { id : 4, name : 'Linda Johansson', city : 'Stockholm', age : 29 }
];

Tree data

You can also put hierarchical tree data in a Store by using the children property to create nested relationships between data objects. The following JavaScript object is an example of tree data:

[
    {
        id       : 1,
        name     : "ABBA",
        country  : "Sweden",
        children : [
            { id : 2, name : "Agnetha" },
            { id : 3, name : "Bjorn" },
            { id : 4, name : "Benny" },
            { id : 5, name : "Anni-Frid" }
        ]
    }
]

Interacting with Store data

You can perform multiple actions on the information contained in stores, such as filtering or sorting the data within a Store by one or more of its fields, or finding and retrieving a specific record from within a Store.

For example, you can sort the Store data by one or more fields as follows:

const store = new Store({
  sorters : [
    { field : 'age', ascending : false } // descending
  ]
});

You can also filter the records within a Store as follows:

// filters the record to find the ones that have "powers : 'Martial arts'"
store.filter({ 
    property : 'powers', 
    value    : 'Martial arts'
});

Alternatively, you can turn on the filter feature to let the user apply their own filters on the SchedulerPro component.

You may want to take a look at our filtering demo.

To learn more, visit our guide to using a Store. You can also take a look at our features documentation.

Continue reading: Interacting with the server