Initializes a new instance of the Collection class.
Reference to the Firestore that contains this Collection.
Name of the Collection.
JavaScript object containing initialization data (property values and event handlers) for this Collection.
Gets or sets an object where the keys represent calculated fields and the values are expressions (functions or strings).
Calculated fields require proxies. To use them in IE11, you will need a polyfill such as this one: https://www.npmjs.com/package/proxy-polyfill.
Calculated fields can be useful when dealing with external data. For example, you could add a per-capita income field (gnp/pop) or a profit field (revenue-expenses).
Calculated fields are dynamic. If you change the fields used in the calculation, their values are updated automatically. They are also read-only. You may change the value of the properties used to calculate them, but you cannot directly edit the result.
Unlike FlexGrid cellTemplates, calculated fields can be used for sorting, filtering, and grouping. They can also be used with charts and any other Wijmo controls.
Calculated fields can be defined as functions that take a data item as an argument or as strings.
For example, if your data looked like this:
// regular data item
interface IDataItem {
product: string,
brand: string,
unitPrice: number,
qty: number,
shipped: boolean
}
function getData(): IDataItem[] {
return [
{
product: 'Banana',
brand: 'Chiquita',
unitPrice: 45.95,
qty: 12,
discount: .08,
shipped: true
}, ...
]
}
You could add function-based calculated fields this way:
// add calculated properties to IDataItem
interface ICalcDataItem extends IDataItem {
fullName: string;
allCaps: string;
totalPrice: number,
tax: number;
}
let cv = new CollectionView<ICalcDataItem>(getData(), {
calculatedFields: {
fullName: ($: ICalcDataItem) => [$.brand, $.product].join(' '),
allCaps: ($: ICalcDataItem) => $.fullName.toUpperCase(),
totalPrice: ($: ICalcDataItem) => ($.unitPrice * $.qty) * (1 - $.discount),
tax: ($: ICalcDataItem) => $.totalPrice * 0.12
}
});
Function-based calculated fields are usually a better choice than string-based calculated fields because:
1) They provide design-time error checking and command completion, 2) They run faster, and 3) They do not have any issues with content-security policy (CSP).
Alternatively, you could add string-based calculated fields:
let cv = new CollectionView<IDataItem>(getData(), {
calculatedFields: {
fullName: '[$.brand, $.product].join(" ")',
allCaps: '$.fullNameStr.toUpperCase()',
totalPrice: '($.unitPrice * $.qty) * (1 - $.discount)',
tax: '$.totalPrice * 0.12'
});
String expressions may refer to the current item via the context variable '$', which contains the item's original and calculated values.
String-based calculated fields have advantages over function-based calculated fields that may be important in some scenarios:
1) They are slightly more concise, and 2) They can be stored as data and easily changed at run-time.
Gets a value that indicates whether a new item can be added to the collection.
Gets a value that indicates whether the collection view can discard pending changes and restore the original values of an edited object.
Gets a value that indicates whether the pageIndex value can change.
Gets a value that indicates whether this view supports grouping via the groupDescriptions property.
Gets a value that indicates whether items can be removed from the collection.
Gets a value that indicates whether this view supports sorting via the sortDescriptions property.
Gets the item that is being added during the current add transaction.
Gets the item that is being edited during the current edit transaction.
Gets or sets the current item in the view.
Gets the ordinal position of the current item in the view.
Gets or sets a value that causes the Collection to defer commits back to the database.
The default value for this property is false, which causes any changes to the data to be immediately committed to the database.
If you set this property to true, it will automatically set the trackChanges property to true. After this, any changes to the data (including edits, additions, and removals) will be tracked but not committed to the database until you call the commitChanges method to commit the changes, or the cancelChanges method to discard all pending changes.
For example:
import { Firestore} from '@grapecity/wijmo.cloud';
// create Firestore data source
let fs = new Firestore(PROJECT_ID, API_KEY, {
collections: [ 'restaurants' ]
});
let collection = fs.getCollection('restaurants');
// defer commits
collection.deferCommits = true;
// handle commit/cancel changes buttons
let btnCommit = document.getElementById('btn-commit') as HTMLButtonElement,
btnCancel = document.getElementById('btn-cancel') as HTMLButtonElement;
btnCommit.addEventListener('click', () => collection.commitChanges());
btnCancel.addEventListener('click', () => collection.cancelChanges());
collection.hasPendingChangesChanged.addHandler((s, e) => {
btnCommit.disabled = btnCancel.disabled = !collection.hasPendingChanges;
});
Gets or sets an array with the names of the fields to retrieve from the database.
If not provided, all fields are included.
Specifying the field names allows you to load only the data that your application needs, improving performance and reducing network traffic.
For example, the code below loads the 'Customers' table and retrieves data for five fields only (the collection has 11 fields):
import { Firestore, Collection } from '@grapecity/wijmo.cloud';
// get the store (provides credentials)
const store = new Firestore(PROJECT_ID, API_KEY);
// load the Customers collection
const customers = new Collection(store, 'Customers', {
sortDescriptions: ['CustomerID'],
fields: [
'CustomerID',
'CompanyName',
'ContactName',
'City',
'Country'
],
pageSize: 6 // server-side pagination
});
Gets or sets a callback used to determine if an item is suitable for inclusion in the view.
The callback should return true if the item passed in as a parameter should be included in the view.
The default value for this property is null, which means the data is not filtered.
Gets or sets a value that determines whether filtering should be performed on the server when using the Collection class with the FlexGridFilter class.
Server filtering tends to improve performance because less data has to be downloaded. However, server filtering in Firestore has some limitations:
For example, you may combine multiple filter conditions using 'AND', but not 'OR'. That means you could not build a query to get the items where Country is set to "Brazil" OR have Sales greater than 1000.
Also, if you combine equality (==) and range operators (>, >=, <, <=), you will need to create a composite index. You cannot use range operators on multiple fields. And there are no operators for inequality or full text search.
These limitations apply only to server queries. If you download the data, then you can perform whatever filtering operations you want on the client.
For more details on querying Firestore databases, please see https://firebase.google.com/docs/firestore/query-data/queries.
The default value for this property is false.
Gets an array of {@link IPredicate} functions used as filters on this CollectionView.
To be included in the view, an item has to pass the predicate in the filter property as well as all predicates in the filters collection.
Gets or sets a callback that determines whether a specific property of an item contains validation errors.
The method takes as parameters a data item, the property being validated, and a parsing parameter that describes whether the data has already been parsed and applied to the data item (parsing == false), or whether the user was trying to edit the value and entered a value that could not be parsed into the data type expected (parsing == true).
The method returns a string containing an error message, or null if no errors were detected.
For example,
view = new CollectionView(data, {
getError: (item: any, prop: string, parsing: boolean) => {
// parsing failed, show message
if (parsing) {
if (prop == 'date') {
return 'Please enter a valid date in the format "MM/dd/yyyy"';
} else if (prop == 'id') {
return 'Please enter a positive number';
}
}
// check that stored (parsed) data is valid
if (prop == 'date' && item.date < minDate) {
return 'Please enter a date after ' + Globalize.formatDate(minDate, 'd');
} else if (prop == 'id' && item.id < 0) {
return 'Please enter a positive number';
}
}
});
Gets a collection of GroupDescription objects that describe how the items in the collection are grouped in the view.
Gets an array of CollectionViewGroup objects that represents the top-level groups.
Gets a value that determines whether the Collection has pending changes.
See also the deferCommits property and the commitChanges and cancelChanges methods.
Gets a value that indicates whether an add transaction is in progress.
Gets a value that indicates whether an edit transaction is in progress.
Gets a value that indicates whether this view contains no items.
Gets a value that indicates the Collection is currently loading data.
This property can be used to provide progress indicators.
Gets a value that indicates whether the page index is changing.
Gets a value that indicates whether notifications are currently suspended (see beginUpdate and endUpdate).
Gets the total number of items in the view taking paging into account.
Gets items in the view.
Gets an ObservableArray containing the records that were added to the collection since trackChanges was enabled.
Gets an ObservableArray containing the records that were edited in the collection since trackChanges was enabled.
Gets an ObservableArray containing the records that were removed from the collection since trackChanges was enabled.
Gets or sets the number of maximum number of items to load from the database.
The default value for this property is zero, which means no limit is set.
Gets the name of this Collection.
Gets or sets a function that creates new items for the collection.
If the creator function is not supplied, the CollectionView will try to create an uninitialized item of the appropriate type.
If the creator function is supplied, it should be a function that takes no parameters and returns an initialized object of the proper type for the collection.
Gets the total number of pages.
Gets the zero-based index of the current page.
Gets or sets a value that determines whether paging should be performed on the server or on the client.
Use the pageSize property to enable paging.
The default value for this property is false.
Gets or sets the number of items to display on a page.
Gets or sets a value that determines whether the CollectionView should automatically refresh its results (by applying the sort, filter, and grouping operations) after items are edited.
The default value for this property is true, which ensures the collection is always sorted, filtered, and grouped correctly after any edit operations.
Set it to false if you want updates to be deferred when items are edited. In this case, the collection will not be refreshed until the sorting, filtering, and grouping criteria change or until the refresh method is called (Excel behavior).
Gets or sets a function used to compare values when sorting.
If provided, the sort comparer function should take as parameters two values of any type, and should return -1, 0, or +1 to indicate whether the first value is smaller than, equal to, or greater than the second. If the sort comparer returns null, the standard built-in comparer is used.
This sortComparer property allows you to use custom comparison algorithms that in some cases result in sorting sequences that are more consistent with user's expectations than plain string comparisons.
For example, see Dave Koele's Alphanum algorithm. It breaks up strings into chunks composed of strings or numbers, then sorts number chunks in value order and string chunks in ASCII order. Dave calls the result a "natural sorting order".
The example below shows a typical use for the sortComparer property:
import { CollectionView, isString } from '@grapecity/wijmo';
// create a CollectionView with a custom sort comparer
const view = new CollectionView(data, {
sortComparer: (a: any, b: any) => {
return isString(a) && isString(b)
? alphanum(a, b) // use custom comparer for strings
: null; // use default comparer for everything else
}
});
The example below shows how you can use an Intl.Collator to control the sort order:
import { CollectionView, isString } from '@grapecity/wijmo';
// create a CollectionView that uses an Intl.Collator to sort
const collator = window.Intl ? new Intl.Collator() : null;
let view = new CollectionView(data, {
sortComparer: (a, b) => {
return isString(a) && isString(b) && collator
? collator.compare(a, b) // use collator for strings
: null; // use default comparer for everything else
}
});
Gets or sets a function used to convert values when sorting.
If provided, the function should take as parameters a SortDescription, a data item, and a value to convert, and should return the converted value.
This property provides a way to customize sorting. For example, the FlexGrid control uses it to sort mapped columns by display value instead of by raw value.
For example, the code below causes a CollectionView to sort the 'country' property, which contains country code integers, using the corresponding country names:
const countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
view.sortConverter = (sd: SortDescription, item: any, value: any) => {
return sd.property === 'countryMapped'
? countries[value]; // convert country id into name
: value;
}
The next example combines two values so when sorting by country, the view will break ties by city:
view.sortConverter: (sd: SortDescription, item: any, value: any) => {
if (sd.property == 'country') {
value = item.country + '\t' + item.city;
}
return value;
}
Gets an array of SortDescription objects that describe how the items in the collection are sorted in the view.
Gets or sets a value that determines how null values should be sorted.
This property is set to SortNulls.Last by default, which causes null values to appear last on the sorted collection, regardless of sort direction. This is also the default behavior in Excel.
Gets or sets a value that determines whether sort operations should be performed on the server as well as on the client.
Use the sortDescriptions property to specify how the data should be sorted.
The default value for this property is false.
Gets or sets the underlying (unfiltered and unsorted) collection.
Gets the Firestore that contains this Collection.
Gets the total number of items in the view before paging is applied.
Firestore does not provide an efficient way of counting the items in the collection, so this property starts with a high default value. If the user tries to move to a page that is beyond the actual count, the cursor will move to the last page and the property value will be updated automatically.
Gets or sets a value that determines whether the control should track changes to the data.
The default value for this property is false, so the CollectionView does not keep track of which data items have changed.
If you set this property to true, the CollectionView will keep track of changes to the data and will expose them through the itemsAdded, itemsRemoved, and itemsEdited collections.
Tracking changes is useful in situations where you need to update the server after the user has confirmed that the modifications are valid.
After committing or cancelling changes, use the clearChanges method to clear the itemsAdded, itemsRemoved, and itemsEdited collections.
The CollectionView only tracks changes made when the proper CollectionView methods are used (editItem/commitEdit, addNew/commitNew, and remove). Changes made directly to the data are not tracked.
Gets or sets whether to use a stable sort algorithm.
Stable sorting algorithms maintain the relative order of records with equal keys. For example, consider a collection of objects with an "Amount" field. If you sort the collection by "Amount", a stable sort will keep the original order of records with the same Amount value.
The default value for this property is false, which causes the CollectionView to use JavaScript's built-in sort method, which is fast and usually stable.
Chrome provides stable sorting since version 70, and Firefox since version 3. As of ES2019, sort is required to be stable. In ECMAScript 1st edition through ES2018, it was allowed to be unstable.
Setting the useStableSort property to true ensures stable sorts on all browsers (even IE 11), but increases sort times by 30% to 50%.
Adds a new item to the collection.
Calling this methods without any parameters creates a new item, adds it to the collection, and defers refresh operations until the new item is committed using the commitNew method or canceled using the cancelNew method.
The code below shows how the addNew method is typically used:
// create the new item, add it to the collection
var newItem = view.addNew();
// initialize the new item
newItem.id = getFreshId();
newItem.name = 'New Customer';
// commit the new item so the view can be refreshed
view.commitNew();
You can also add new items by pushing them into the sourceCollection and then calling the refresh method. The main advantage of addNew is in user-interactive scenarios (like adding new items in a data grid), because it gives users the ability to cancel the add operation. It also prevents the new item from being sorted or filtered out of view until the transaction is committed.
New items are empty objects by default, unless the colletion has calculatedFields, in which case the new items will have properties set to values that depend on their data types (empty strings for string properties, zero for numeric properties, and null for other data types).
This behavior is convenient since in many cases the calculated fields depend on expressions that rely on strings not being null. But you can customize this behavior by setting the newItemCreator property to a function that creates the new items and initializes them in any way you want.
Item to be added to the collection (optional).
Whether to commit the new item immediately.
The item that was added to the collection, or null if the transaction failed.
Suspend refreshes until the next call to endUpdate.
Cancels all changes by removing all items in the itemsAdded, itemsRemoved, and itemsEdited collections, without committing them to the server.
This method is used with the deferCommits property.
Ends the current edit transaction and, if possible, restores the original value to the item.
Ends the current add transaction and discards the pending new item.
Clears all changes by removing all items in the itemsAdded, itemsRemoved, and itemsEdited collections.
Call this method after committing changes to the server or after refreshing the data from the server.
Commits all pending changes to the server.
Changes are contained in the itemsEdited, itemsAdded, and itemsRemoved collections, and are automatically cleared after they are successfully committed.
The changes are committed in a transaction, so if there are any errors during the operation, none of the changes are applied. For more details on Firestore transactions, please see Firestore Transactions.
See also the deferCommits property.
Optional callback invoked when the commit operation has been completed. The callback takes an XMLHttpRequest parameter contains information about the request results, including error information if any.
Override commitEdit to modify the item in the database.
Override commitNew to add the new item to the database.
Returns a value indicating whether a given item belongs to this view.
Item to seek.
Executes a function within a beginUpdate/endUpdate block.
The collection will not be refreshed until the function finishes.
The deferUpdate method ensures endUpdate is called even if the update function throws an exception.
Function to be executed without updates.
Whether to force a refresh when ending the update.
Begins an edit transaction of the specified item.
Item to be edited.
Resume refreshes suspended by a call to beginUpdate.
Whether to force a refresh when ending the update.
Calculates an aggregate value for the items in this collection.
Type of aggregate to calculate.
Property to aggregate on.
Whether to include only items on the current page.
The aggregate value.
Gets a sub-collection from a data item.
Items in Firestore collections may contain sub-collections.
Unlike arrays, sub-collections are not automatically loaded when the data item (document) is loaded. They must be loaded explicitly using the getSubCollection method.
Sub-collections use the same Firestore and therefore have the same security credentials as the parent collection.
For example:
import { Firestore, Collection } from '@grapecity/wijmo.cloud';
// create the store object
const PROJECT_ID = 'XXXX-YYYY';
const API_KEY = 'ZZZZ';
const store = new Firestore(PROJECT_ID, API_KEY);
// load top-level 'suggestions' collection
const suggestions = new Collection(store, 'suggestions', {
loaded: s => {
console.log(`loaded ${s.items.length} suggestions.`);
// load 'comments' sub-collection for the first suggestion
let comments = new SubCollection(store, s.items[0], 'comments', {
loaded: s => {
console.log(`first suggestion has ${s.items.length} comments.`);
}
});
}
});
Data item that contains the sub-collection.
Name of the sub-collection.
JavaScript object containing initialization data (property values and event handlers) for the sub-collection.
A Collection object containing the sub-collection.
Returns true if this object supports a given interface.
Name of the interface to look for.
Loads or re-loads the collection data.
Whether to keep the cursor position.
Sets the specified item to be the current item in the view.
Item that will become current.
Sets the first item in the view as the current item.
Sets the last item in the view as the current item.
Sets the item after the current item in the view as the current item.
Sets the item at the specified index in the view as the current item.
Index of the item that will become current.
Sets the item before the current item in the view as the current item.
Sets the first page as the current page.
True if the page index was changed successfully.
Sets the last page as the current page.
True if the page index was changed successfully.
Moves to the page after the current page.
True if the page index was changed successfully.
Moves to the page at the specified index.
Index of the page to move to.
True if the page index was changed successfully.
Moves to the page before the current page.
True if the page index was changed successfully.
Raises the collectionChanged event.
Contains a description of the change.
Raises the currentChanged event.
Raises the currentChanging event.
CancelEventArgs that contains the event data.
Raises the error event.
By default, errors throw exceptions and trigger a data refresh. If you want to prevent this behavior, set the RequestErrorEventArgs.cancel parameter to true in the event handler.
RequestErrorEventArgs that contains information about the error.
Raises the hasPendingChangesChanged event.
Raises the loading event.
Raises the pageChanged event.
Raises the pageChanging event.
PageChangingEventArgs that contains the event data.
Raises the sourceCollectionChanged event.
Raises the sourceCollectionChanging event.
CancelEventArgs that contains the event data.
Specifies a field to sort by on the server.
You can call the orderBy method several times to sort on multiple fields.
Sorts created with the orderBy operator are always applied on the server, regardless of the setting of the sortOnServer property.
Name of the field to sort by, or null to clear all sorts.
Whether to sort the field in ascending or descending order.
Re-creates the view using the current sort, filter, and group parameters.
Override remove to remove the item from the database.
Item to be removed from the database.
Removes the item at the specified index from the collection.
Index of the item to be removed from the collection. The index is relative to the view, not to the source collection.
Defines the fields that should be retrieved from the server.
Array containing the names of the fields to be retrieved.
Updates the filter definition based on a known filter provider such as the FlexGridFilter.
Known filter provider, typically an instance of a FlexGridFilter.
Specifies a filter to apply on the server.
You may call the where method several times to create composite filters.
Filters created with the where operator are always applied on the server, regardless of the setting of the filterOnServer property.
Field to filter on, or null to clear all filters.
Filter operator (>, >=, ,!=, ==, <, <=, or IN)
Value to filter by.
Occurs when the collection changes.
Occurs after the current item changes.
Occurs before the current item changes.
Occurs when there is an error reading or writing data.
Occurs when the value of the hasPendingChanges property changes.
See also the deferCommits property.
Occurs when the Collection finishes loading data.
Occurs when the Collection starts loading data.
Occurs after the page index changes.
Occurs before the page index changes.
Occurs after the value of the sourceCollection property changes.
Occurs before the value of the sourceCollection property changes.
Extends the CollectionView class to provide access to document collections in a Firestore object.
Collection objects may be created by setting the {@link collecions} property when creating a Firestore object or by invoking the Collection constructor directly. For example:
import { Firestore, Collection } from '@grapecity/wijmo.cloud'; // create a Firestore with three Collections const PROJECT_ID = 'XXXX-YYYY'; const API_KEY = 'ZZZZ'; let fsNWind = new Firestore(PROJECT_ID, API_KEY, { collections: [ 'Products', 'Categories', 'Suppliers' ] }); // create an additional Collection by calling the constructor let customers = new Collection(fsNWind, 'Customers');
In most applications, the Collection objects are used as data sources for grid controls such as the FlexGrid or MultiRow grid. For example:
import { FireStore, Collection } from '@grapecity/wijmo.cloud'; import { FlexGrid } from '@grapecity/wijmo.cloud'; // create a Firestore with three Collections const PROJECT_ID = 'XXXX-YYYY'; const API_KEY = 'ZZZZ'; let fsNWind = new Firestore(PROJECT_ID, API_KEY, { collections: [ 'Products', 'Categories', 'Suppliers' ] }); // use a Collection as an itemsSource for a FlexGrid control: let theGrid = new FlexGrid('#theGrid', { allowAddNew: true, allowDelete: true, itemsSource: fsNWind.getCollection('Products'), });
This class does not use or require the use of the Firestore client libraries.