DataObjectSelect

DataObjectSelect is a wrapper around the MUI Select that automatically adds options from a data object. It fetches data using only the data handler of the data object, which means you can use a data object that is used other places as well.

Usage

All properties on the MUI Select component can be used on DataObjectSelect. In addition you have to give DataObjectSelect a data object to fetch data from. If you want to use data binding, you can use the BoundDataObjectSelect variant.

Data object filter

A filter string can be passed to the data object using the filter property. All parameters in the data object will be ignored. If no filter property is given, data will be fetched without any filters, even if there are filter parameters configured on the data object.

Option labels and values

By default, DataObjectSelect will try to use fields named ID and Description as value and label respectively. You can override this in 2 ways:

1. With the valueField and labelField properties to indicate which fields we should get the value and label from

2. With the getOptionLabel and getOptionValue properties, where we can pass a function that takes a record of the data object as the only argument and returns the value/label.

It is of course possible to mix these properties, for example using the valueField and getOptionLabel properties together.

If you use pass both the valueField and the getOptionValue properties, or both the labelField and the getOptionLabel properties to the component, getOptionValue/getOptionLabel will be called first, but fall back to labelField/optionField if the functions return null or undefined.

Nullable

If the field you are editing is nullable, you can set the nullable property to true. This will add an empty option at the beginning of the options list.

Properties

These are the properties available in addition to the MUI Select properties:

Name	Type	Optional	Description
dataObject	DataObject<T>	no	The data object to fetch options from
filter	string	yes	Filter to use when fetching data
fullWidth	boolean	yes	Whether the component should grow to fit all available space
nullable	boolean	yes	Adds a blank option at the beginning of the options list
blankLabel	string	yes	If nullable is enabled, you can set a label for the empty option with this property. Default is an empty string
valueField	string	yes	Name of the field in the dataObject that should be used for option values
labelField	string	yes	Name of the field in the dataObject that should be used for labels on the options
getOptionValue	(record: T) => string	yes	Function that takes a record from the data object and returns a value for the option
getOptionLabel	(record: T) => string	yes	Function that takes a record from the data object and returns a label for the option

BoundDataObjectSelect

BoundDataObjectSelect is a wrapper around DataObjectSelect that binds the value selected to the data object found in the nearest DataObjectProvider. Use just like DataObjectSelect, except you must also give a field property to indicate which field the value should be bound to.