Skip to content

TypeScript ListViewModels

In addition to TypeScript ViewModels for interacting with instances of your data classes in TypeScript, Coalesce will also generated a List ViewModel for loading searched, sorted, paginated data from the server.

These ListViewModels, like the ViewModels, are dependent on Knockout and are designed to be used directly from Knockout bindings in your HTML.

Base Members

The following members are defined on BaseListViewModel<> and are available to the ListViewModels for all of your model types:

modelKeyName: string

Name of the primary key of the model that this list represents.

includes: string

String that is used to control loading and serialization on the server. See Includes String for more information.

items: KnockoutObservableArray<TItem>

The collection of items that have been loaded from the server.

addNewItem: (): TItem

Adds a new item to the items collection.

deleteItem: (item: TItem): JQueryPromise<any>

Deletes an item and removes it from the items collection.

queryString: string

An arbitrary URL query string to append to the API call when loading the list of items.

Search criteria for the list. This can be easily bound to with a text box for easy search behavior. See [Search] for a detailed look at how searching works in Coalesce.

isLoading: KnockoutObservable<boolean>

True if the list is loading.

isLoaded: KnockoutObservable<boolean>

True once the list has been loaded.

load: (callback?: any): JQueryPromise<any>

Load the list using current parameters for paging, searching, etc Result is placed into the items property.

message: KnockoutObservable<string>

If a load failed, this is a message about why it failed.

getCount: (callback?: any): JQueryPromise<any>

Gets the count of items without getting all the items. Result is placed into the count property.

count: KnockoutObservable<number>

The result of getCount(), or the total on this page.

totalCount: KnockoutObservable<number>

Total count of items, even ones that are not on the page.

nextPage: (): void

Change to the next page.

nextPageEnabled: KnockoutComputed<boolean>

True if there is another page after the current page.

previousPage: (): void

Change to the previous page.

previousPageEnabled: KnockoutComputed<boolean>

True if there is another page before the current page.

page: KnockoutObservable<number>

Page number. This can be set to get a new page.

pageCount: KnockoutObservable<number>

Total page count

pageSize: KnockoutObservable<number>

Number of items on a page.

orderBy: KnockoutObservable<string>

Name of a field by which this list will be loaded in ascending order.

If set to "none", default sorting behavior, including behavior defined with use of [DefaultOrderBy] in C# POCOs, is suppressed.

orderByDescending: KnockoutObservable<string>

Name of a field by which this list will be loaded in descending order.

orderByToggle: (field: string): void

Toggles sorting between ascending, descending, and no order on the specified field.

Model-Specific Members

Configuration

static coalesceConfig: Coalesce.ListViewModelConfiguration<PersonList, ViewModels.Person>

A static configuration object for configuring all instances of the ListViewModel's type is created. See ViewModel Configuration.

coalesceConfig: Coalesce.ListViewModelConfiguration<PersonList, ViewModels.Person>

An per-instance configuration object for configuring each specific ListViewModel instance is created. See ViewModel Configuration.

Filter Object

public filter: {
    personId?: string
    firstName?: string
    lastName?: string
    gender?: string
    companyId?: string
} = null;

For each exposed scalar property on the underlying EF POCO, filter will have a corresponding property. If the filter object is set, requests made to the server to retrieve data will be passed all the values in this object via the URL's query string. These parameters will filter the resulting data to only rows where the parameter values match the row's values. For example, if filter.companyId is set to a value, only people from that company will be returned.

These parameters all allow for freeform string values, allowing the server to implement any kind of filtering logic desired. The Standard Data Source will perform the following depending on the property type:

  • Dates with a time component will be matched exactly.
  • Dates with no time component will match any dates that fell on that day.
  • Strings will match exactly unless an asterisk is found, in which case they will be matched with string.StartsWith.
  • Enums will match by string or numeric value. Multiple comma-delimited values will create a filter that will match on any of the provided values.
  • Numeric values will match exactly. Multiple comma-delimited values will create a filter that will match on any of the provided values.

Example usage:

ts
var list = new ListViewModels.PersonList();
list.filter = { lastName: "Erickson" };
list.load();

Static Method Members

public readonly namesStartingWith = new Person.NamesStartingWith(this);
public static NamesStartingWith = class NamesStartingWith extends Coalesce.ClientMethod<PersonList, string[]> { ... };

For each exposed Static Method on your POCO, the members outlined in Methods - Generated TypeScript will be created.

DataSources


public dataSources = ListViewModels.PersonDataSources;
public dataSource: DataSource<Person> = new this.dataSources.Default();

For each of the Data Sources on the class, a corresponding class will be added to a namespace named ListViewModels.<ClassName>DataSources. This namespace can always be accessed on both ViewModel and ListViewModel instances via the dataSources property, and class instances can be assigned to the dataSource property.


Coalesce is a free and open-source framework created by IntelliTect to fill our desire to create better apps, faster. IntelliTect is a high-end software architecture and development consulting firm based in Spokane, Washington.

If you're looking for help with your software project, whether it be a Coalesce application, other technologies, or even just an idea, reach out to us at info@intellitect.com — we'd love to start a conversation! Our clients range from Fortune 100 companies to local small businesses and non-profits.