List View Selection

Content Type: Widget
Categories: Data

Overview

A widget that simplifies making a list view with single or multi-select functionality

Documentation

Demo urlhttps://widgettesting105-sandbox.mxapps.io/p/advanced-listview-controls

For a better view of the documentation checkout the GitHub ReadMe

List View Selection

A widget that simplifies making a list view with single or multi-select functionality




Check boxes / Radio buttons

Highlight a row

Features


  • Can select a single object or a set of objects


  • Option to have a check box, radio buttons, or highlight the row


  • Ability to run an action when the selection changes


  • Supports keyboard navigation

Usage

1. Domain model

You need a non-persistent page helper object that has an association with the entity that is listed in the list view.

In this case, my list view returns Vehicles

2. Nanoflow DS_ListViewContext

You need a Nanoflow that receives an object from the list view's row, adds it to a list, and returns the list.

This is required due to a technical limitation. Use a nanoflow to minimize overhead.

3a. Checkboxes / Radio buttons

Add the widget to a column of your list view content

Set the widget settings according to your domain model

Reference type Should the user be able to select an object or a list of objects

Reference The association from your non-persistent page helper to the objects being shown in the list view

Data source The Nanoflow created in step 2


3b. Highlight a row

Add the widget as the root of your list view content.

Set the widget settings according to your domain model

Reference type Should the user be able to select an object or a list of objects

Reference The association from your non-persistent page helper to the objects being shown in the list view

Data source The Nanoflow created in step 2

Dynamic class name The class name applied to the widget's child container when this row is selected.

Note: you will need to use some CSS/SCSS to make the widget's container the full height and width of the row. Remove the padding from the li and add it to the class you put for dynamic class name


Demo project

https://widgettesting105-sandbox.mxapps.io/p/advanced-listview-controls


Issues, suggestions and feature requests

https://github.com/bsgriggs/mendix-listview-selection/issues


Development and contribution

Benjamin Griggs

Releases

Version: 1.1.0
Framework Version: 9.18.0
Release Notes: - added keyboard navigation
Version: 1.0.0
Framework Version: 9.18.0
Release Notes: Initial release - Can select a single object or a set of objects - Option to have a check box, radio buttons, or highlight the row - Ability to run an action when the selection changes