Rendering All Store Data at Once

As of dgrid 1.1.0, the mixin from this tutorial is now available as
dgrid/extensions/SingleQuery, including additional features such as
loadingMessage and noDataMessage support.

The Using Grids and Stores
Tutorial discussed dgrid's OnDemandList and
Pagination components, which read data from
dstore stores. OnDemandList
fetches pages of data as the user scrolls, and Pagination
displays one page of data at a time.

However, there are cases where you might not want paging functionality.
For example, perhaps you have a small in-memory store, and are
interested in re-styling the grid so that its height is determined
by the store's full contents. In this case, the scroll-based rendering
of OnDemandList would be irrelevant, and the paging
style of Pagination would be undesirable.

For such cases, it is trivial to create a mixin which issues a
single range-less query to the store and renders the results all
at once.

Note: This mixin should only be used
with limited sets of data, preferably from in-memory stores, in
order to maintain reasonable performance.

Querying and Rendering All Store Items

Let's create a mixin that extends the refresh method to perform a
range-less query:

You can double-click the mixin code above to select all of it
for easy copying.

The code above overrides List#refresh to call
_StoreMixin#renderQueryResults, which handles fetching and
rendering the data. Filtering and sort still work as expected, as seen in
the demo. This is thanks to the _setCollection and
_applySort methods defined in _StoreMixin, which
this mixin inherits. OnDemandList and Pagination
also inherit _StoreMixin, and it is intended to serve as a
baseline for any customized logic involving store interaction.

Another _StoreMixin feature used above is the
_trackError method, which can be used to wrap store calls.
Errors which occur in calls wrapped by _trackError are emitted
via dgrid-error events, making it possible to react to problems
which occur as a result of operations initiated by dgrid.

Automatically Adjusting Grid Height

As mentioned earlier, one particularly useful scenario for this
type of mixin is when there is a desire to show all of the data
at once, where the grid's height is determined by its contents.
This can be accomplished simply by adding the
dgrid-autoheight class to an instance:

Conclusion

The above examples should provide a good starting point for
use cases which involve rendering the entirety of a store's
data at once. While this isn't appropriate in every application, the
situation presents itself often enough that it makes sense to
standardize this pattern.