List View

A list view is a list based view of a collections entities and provides additional functionality beyond a normal tree view such as pagination for large collections, custom data views, searching and bulk actions.

Configuring a list view

The list view configuration is a sub configuration of a FluidityCollectionConfig instance and is accessing via it’s ListView method.

ListView(Lambda listViewConfig = null) : FluidityListViewConfig<TEntityType>

Accesses the list view config of the given collection.

// Example
collectionConfig.ListView(listViewConfig => {
    ...
});

Changing the page size

SetPageSize(int pageSize) : FluidityListViewConfig<TEntityType>

Sets the number of items to display per page for the given list view.

// Example
listViewConfig.SetPageSize(20);

Defining data views

Data views allow you to define multiple, pre-filtered views of the same data source which can be toggled between via the list view UI. This can be useful when entities exist in different states and you want a way to toggle between them.

AddDataView(string name, Lambda whereClauseExpression) : FluidityListViewConfig<TEntityType>

Adds a data view with the given name and where clause filter expression. Expression must be a boolean expression.

// Example
listViewConfig.AddDataView("Active", p => p.IsActive);

SetDataViewsBuilder<TDataViewsBuilder>() : FluidityListViewConfig<TEntityType>

Sets the list views data views builder which allows you to define the data views dynamically at run time. See Data Views Builders API documentation for more info.

// Example
listViewConfig.SetDataViewsBuilder<PersonDataViewsBuilder>();

Adding a bulk action

AddBulkAction<TBulkActionType>() : FluidityListViewConfig<TEntityType>

Adds a bulk action of the given type to the list view. See Bulk Actions API documentation for more info.

// Example
listViewConfig.AddBulkAction<ExportBulkAction>();

---

AddBulkAction(FluidityBulkAction bulkAction) : FluidityListViewConfig<TEntityType>

Adds the provided bulk action to the list view. See Bulk Actions API documentation for more info.

// Example
listViewConfig.AddBulkAction(new ExportBulkAction());

Changing the list view layout

By default the list view will use the built in Umbraco table and grid list view layouts however you can provide your own custom layouts. If you provide a layout, then it will replace the defaults, so if you still want the defaults as options, you’ll need to add these again explicitly. To do this, you’ll need to call AddLayout<TListViewLayoutType> for each one you want to add with a TListViewLayoutType parameter of FluidityTableListViewLayout or FluidityGridListViewLayout.

AddLayout<TListViewLayoutType>() : FluidityListViewConfig<TEntityType>

Adds a list view layout of the given type to the list view. See List View Layouts API documentation for more info.

// Example
listViewConfig.AddLayout<MyCustomListViewLayout>();

---

AddLayout(FluidityListViewLayout listViewLayout) : FluidityListViewConfig<TEntityType>

Adds the provided list view layout to the list view. See List View Layouts API documentation for more info.

// Example
listViewConfig.AddLayout(new MyCustomListViewLayout());

Adding a field to the list view

AddField(Lambda propertyExpression, Lambda propertyConfig = null) : FluidityListViewFieldConfig<TEntityType, TValueType>

Adds the given property to the list view.

// Example
listViewConfig.AddField(p => p.FirstName, fieldConfig => {
    ...
});

Changing the heading of a field

SetHeading(string heading) : FluidityListViewFieldConfig<TEntityType, TValueType>

Sets the heading for the list view field.

// Example
fieldConfig.SetHeading("First Name");

Formatting the value of a field

SetFormat(Lambda formatExpression) : FluidityListViewFieldConfig<TEntityType, TValueType>

Sets the format expression for the list view field.

// Example
fieldConfig.SetFormat((v, p) => $"{v} years old");