import MultiSelectComboBox from 'flexicious-react-datagrid/js/controls/MultiSelectComboBox.js'

public class | source

MultiSelectComboBox

Extends:

react~React.Component → EventDispatcher → UIComponent → TextInput → MultiSelectComboBox

Direct Subclass:

MultiSelectComboBoxEx

A MultiSelectComboBox that implements IMultiSelectDataBoundControl (IFilterControl) and IMultiSelectDataBoundControl (IDataBoundControl) which enables it to be used within the filtering/binding infrasturcture.

Constructor Summary

Public Constructor
public	constructor(tag: *)

Member Summary

Public Members
public	addAllItemText: * Text of the "All" item.
public	allUnchecked: *
public	alwaysVisible: * IF set to true, popup will always be visible, and text box wont.
public	dataField: * Name of the field in the items in the `dataProvider` Array to use as the value of drop-down list.
public	defaultWidth: Number The default width of the mscb
public	dropdownWidth: * Width of the dropdown.
public	filterComparisionType: * This is usually automatically set, you don't have to manually set it, unless you're sending strings as Date objects.
public	filterOperation: * The filter operation to apply to the comparison See the FilterExpression class for a list.
public	filterTriggerEvent: * The event that the filter triggers on.
public	grid: * The grid that the filter belongs to - can be null if filter is used outside the grid
public	gridColumn: * The grid column that the filter belongs to - can be null if filter is used outside the grid
public	hasSearch: * Whether or not there is an active search
public	highlightedRowIndex: * The row currently highlighted on basis of either the keyboard or mouse inputs.
public	iconHeight: * Width of the inside and outside icons
public	iconWidth: * Width of the inside and outside icons
public	insideIcon: * The icon that is displayed outside the textbox, based on the outsideIconPosition property.
public	labelField: * Name of the field in the items in the `dataProvider` Array to display as the label in the TextInput portion and drop-down list.
public	labelFunction: * User-supplied function to run on each item to determine its label.
public	popup: * The Div that contains all the checkboxes.
public	popupHeight: *
public	registered: * Whether or not this control has been registered.
public	searchField: * The field to search on, usually same as the data field.
public	selectedValues: * A List of strings that map to the dataField value of this control, representing the selected items within this control

Method Summary

Public Methods
public	clear()
public	componentDidMountCustom()
public	destroyPopup(force: *)
public	getAddAllItem(): * Flag, when set will cause the associated control to have an Filter.ALL_ITEM Item value, which can then be used by the filtering infrastructure to ignore the column in the search
public	getClassNames(): string[]
public	getDataProvider(): *
public	getIsAllSelected(): boolean Returns true if the all item is selected false otherwise
public	getSelectedItems(item: ):
public	getValue(): * Generic function that returns the value of a IFilterControl
public	highlightRow(row: *)
public	initialize() Initializes the auto complete and watermark plugins
public	isItemSelected(item: ):
public	itemToLabel(data: ): Returns the String that the item renderer displays for the given data object.
public	kill()
public	onDocumentMouseUp(e: *)
public	onOkButton()
public	owns(elem: ):
public	restoreStateAndDestroyPopup()
public	setAddAllItem(value: *)
public	setDataProvider(value: *)
public	setLabel()
public	setSelectedItem(val: *)
public	setValue(val: *) Generic function that sets the value of a IFilterControl
public	showPopup(parent: *)
public	updateCheckBoxes() Updates the value of the current check boxes from selectedValues and dataProvider
public	updateDisplayList(w: , h: )

Inherited Summary

From class EventDispatcher
public	[prop]: *
public	dead: boolean
public	eventListeners: Array A list of event listeners for this event dispatcher object.
public	typeCache: {}
public	addEventListener(context: , type: , listener: *) Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event.
public	constructed()
public	dispatchEvent(event: *): boolean Dispatches an event into the event flow.
public	getClassNames(): string[]
public	getStyle(prop: ): Gets the value of the prop property on this object
public	hasEventListener(type: *): Boolean Returns true if an event listener exists
public	implementsOrExtends(name: *): Boolean Returns true if the class name to check is in the list of class names defined for this class.
public	kill() Removes all event listeners
public	killArray(arr: *) Given an array of event dispatchers, calls the kill method on each of them.
public	removeEventListener(type: , listener: ) Removes a listener from the EventDispatcher object.
public	setStyle(prop: , val: ) Sets the value of the prop property on this object

From class UIComponent
public static	clearPendingUpdates()
public static	flushPendingUpdates()
public	childIndex: number
public	children: *[]
public	childrenWithProps: *[]
public	data: * This is a getter/setter for the data property.
public	domElement: HTMLElement The dom element associated with this UIComponent.
public	domListeners: Array A list of event listeners that are added to the domElement (these create html dom event listeners as opposed to js only event listeners)
public	enabled: boolean Whether or not this control is enabled.
public	errorString: *
public	handCursor: *
public	height: number
public	horizontalScrollPolicy: *
public	includeInLayout: boolean
public	initialized: boolean
public	innerHTML: string
public	invalid: Boolean A flag to store if this object has been marked for invalidation.
public	oldDisplay: *
public	parent: *
public	propertyBag: {}
public	props: *
public	reactElement: ReactElement The react element associated with this UIComponent.
public	state: *
public	tagName: *
public	toolTip: *
public	verticalScrollPolicy: *
public	visible: boolean Whether or not this control is enabled.
public	width: number
public	x: *
public	y: *
public	addChild(child: *) This methods takes another UIComponent object, and adds it to the dom as a child of the domElement of this UIComponent.
public	addChildAt(child: , idx: ) This methods takes another UIComponent object, and adds it to the dom as a child of the domElement of this UIComponent.
public	addDomEventListener(evt: , f: ) When you call addEventListener on a UIComponent, certain events, defined by the domEvents array are also associated with the corresponding domElement.
public	addEventListener(context: , type: , listener: *) Calls super.addEventListener, and for dom based events, also adds a HTML Event listener
public	attachClass(newClass: *)
public	componentDidMount()
public	componentWillMount()
public	componentWillReceiveProps(nextProps: *)
public	componentWillUnmount()
public	componentWillUpdate()
public	detachClass(newClass: *)
public	domEventFired(event: *) The event handler that gets triggered from the HTML DOM.
public	focus()
public	getAllChildren(): *
public	getAttribute(attr: ):
public	getAutomationName(): *
public	getChildAt(idx: ): Returns the child of the domElement at the specified index.
public	getClassNames(): string[]
public	getComponentStyleAttribute(attr: ):
public	getData(): * This is a getter/setter for the data property.
public	getElementByTagName(tag: ):
public	getEnabled(): * Sets the enabled flag
public	getErrorString(val: ):
public	getHandCursor(): *
public	getHandCursor(): *
public	getHeight(): *
public	getHorizontalScrollPolicy(): *
public	getHorizontalScrollPosition(): *
public	getIncludeInLayout(val: ):
public	getInnerHTML(): * Getter for the innerHTML property
public	getPixelHeight(): *
public	getStyleAttribute(attr: ):
public	getText(): * Getter for the text property
public	getVerticalScrollPolicy(): *
public	getVerticalScrollPosition(): *
public	getVisible(val: ): Sets the visible flag
public	getWidth(): *
public	getX(): * Gets the X co ordinate
public	getY(): * Gets the Y co ordinate
public	globalToLocal(ptIn: *): flexiciousNmsp.Point Converts the given global Point to local co-ordinates.
public	initFromProps(props: *)
public	initialize() Any initialization code is supposed to go in this method.
public	invalidateDisplayList() This method will queue the component so the display list will render it once the current frame of execution is over.
public	kill() First, calls super.kill(), which takes out all event listeners.
public	localToGlobal(ptIn: *): flexiciousNmsp.Point Converts the given local Point to global co-ordinates.
public	measureText(textToMeasure: ): {"width": } Returns the width of the given text.
public	mergeObjects(obj1: , obj2: ): *
public	move(x: , y: ) Sets the X and Y co ordinates of the current dom element
public	numChildren(): * Gets the number of children of the dom element associated with this UIComponent.
public	owns(elem: *): Boolean Recursively iterates through the parent hierarchy of the given element to check to see if the current node is in its parent hierarchy.
public	ownsPoint(pt: *): boolean
public	removeAllChildren(child: *)
public	removeChild(child: *) This methods takes another UIComponent object, and removes it from the dom.
public	removeChildAt(idx: *) This methods takes another UIComponent object, and removes it from the dom.
public	removeComponentAttribute(attr: *)
public	removeDomEventListener(evt: , f: ) Removes a previously attached DOM event listener.
public	removeEventListener(type: , listener: ) Calls super.addEventListener, and for dom based events, also removes the previously added HTML Event listener
public	removeEventListenerKeepDomListener(type: , listener: ) Calls super.addEventListener, and for dom based events, also removes the previously added HTML Event listener
public	render(): *
public	setActualSize(w: , h: )
public	setActualSizeFromDomElement()
public	setAttribute(attr: , val: )
public	setAutomationName(val: *)
public	setChildIndex(child: , index: ) Sets the visible flag
public	setComponentStyleAttribute(attr: , val: )
public	setData(val: *) This is important, because the grid looks for a "setData" method on the renderer.
public	setDomElement(elem: *) Sets the domElement of this UIComponent to the specified element, and creates a property on the dom element called component to this.
public	setEnabled(val: *) Sets the enabled flag
public	setErrorString(val: *)
public	setHandCursor(val: *)
public	setHeight(val: ):
public	setHorizontalScrollPolicy(policy: *)
public	setHorizontalScrollPosition(val: ):
public	setIncludeInLayout(val: *)
public	setInnerHTML(val: *) Setter for the innerHTML property
public	setState(newState: *)
public	setStateIfDomPresent(state: , db: )
public	setStateInternal(newState: *)
public	setStyleAttribute(attr: , val: )
public	setText(val: *) Setter for the text property
public	setToolTip(val: *)
public	setVerticalScrollPolicy(policy: *)
public	setVerticalScrollPosition(val: ):
public	setVisible(val: *) Sets the visible flag
public	setWidth(val: ):
public	setX(val: ): Sets the X co ordinate
public	setY(val: ): Sets the Y co ordinate
public	updateDisplayList(w: , h: ) Called as a part of render phase.
public	validateNow()
public	validateNowIfValid()

From class TextInput
public	autoCompleteDataField: string The dataField value associated with autocomplete dropdown.
public	autoCompleteItemRenderer: * Class factory for the dropdown item renderer.
public	autoCompleteLabelField: string The labelField value associated with autocomplete dropdown.
public	autoCompleteLabelFunction: * The labelFunction for the autocomplete dropdown
public	autoCompleteList: *
public	autoCompleteListAlternatingItemColors: number[]
public	autoCompleteMatchType: * Type of the match to filter items.
public	autoCompleteOptions: * Plugin specific options for the autocomplete.
public	autoCompleteRowCount: number RowCount for the autocomplete dropdown.
public	autoCompleteRowHeight: number Row height for the autocomplete dropdown.
public	autoCompleteSource: * The source for the autocomplete dropdown (the list of items).
public	autoCompleteStyleName: * Style name for the auto complete dropdown [Style(name="autoCompleteStyleName", type="String")]
public	autoCompleteWidth: number Width of the autocomplete dropdown.
public	clearTextOnIconClick: * If you specify an Icon Style, setting this variable to true will clear the text on icon click.
public	delayDuration: * The amount of time (in milliseconds) to wait before dispatching the DELAY_CHANGE event.
public	enableAutoComplete: * Enables auto complete behavior.
public	enableDelayChange: * Whether or not to enable the DELAY_CHANGE event.
public	filterComparisionType: * This is usually automatically set, you don't have to manually set it, unless you're sending strings as Date objects.
public	filterOperation: * The filter operation to apply to the comparison See the FilterExpression class for a list.
public	filterTriggerEvent: * The event that the filter triggers on.
public	grid: * The grid that the filter belongs to - can be null if filter is used outside the grid
public	gridColumn: * The grid column that the filter belongs to - can be null if filter is used outside the grid
public	hasSearch: * Whether or not there is an active search
public	iconGap: * The spacing between insideIcon, outsideIcon, and the text input [Style(name="iconGap", type="Number", inherit="no")]
public	iconHeight: * Width of the inside and outside icons
public	iconWidth: * Width of the inside and outside icons
public	idValue: * To enable use of the text input in picker type scenarios where we display a label string in the text input, but expose a store for the ID value.
public	inputMask: * Input mask for the text input
public	inputMaskOptions: * Plugin specific options for the input mask.
public	insideIcon: * The icon that is displayed inside the textbox, based on the insideIconPosition property.
public	insideIconPosition: * The position of the icon that is displayed inside the textbox.
public	maxLength: *
public	onInsideIconClick: * Dispatched when the user clicks on a the icon specified by the insideIcon property
public	onOutsideIconClick: * Dispatched when the user clicks on a the icon specified by the outsideIcon property
public	outsideIcon: * The icon that is displayed outside the textbox, based on the outsideIconPosition property.
public	outsideIconPosition: * The position of the icon that is displayed outside the textbox.
public	registered: * Whether or not this control has been registered.
public	restrict: String Property; indicates the set of characters that a user can enter in the text field.
public	searchField: * The field to search on, usually same as the data field.
public	showIconWhenHasText: * Flag to control whether the icon only shows up when there is text in the box
public	textBoxValue: *
public	timerInstance: *
public	watermark: * The watermark to show when there is no text entered into the text input.
public	watermarkOptions: * Plugin specific options for the watermark.
public	watermarkStyle: * Style to apply to the watermark label
public	width: *
public	addTemplate()
public	applyAutoCompleteValue() Applies the selected item from the list to the autocomplete textbox
public	clear()
public	componentDidMountCustom()
public	destroyAutoComplete() Destroys the autocomplete list.
public	dispatchEvent(evt: ):
public	filterAutoCompete(item: *): boolean Based on the autoCompleteMatchType, filter the autocomplete dataprovider that
public	focus() Sets the focus on the textbox
public	forceFilter() Dispatches the filter programmatic.
public	getClassNames(): string[]
public	getInsideIcon(): * Returns the icon within the text input (This is usually the clear icon)
public	getOutsideIcon(): * Returns the icon outside the span (This is usually the picker icon)
public	getPlaceHolder(): *
public	getText(): *
public	getTextBox(): * Returns the inner text input
public	getValue(): * Generic function that returns the value of a IFilterControl
public	keyDownHandler(e: *)
public	keyUpHandler(event: *) If the mouse is clicked up, and we dont own the target, kill autocomplete.
public	onAutoCompleteItemClick(event: *) Apply the list item value.
public	onAutoCompleteMouseUpHandler(event: *) If the mouse is clicked up, and we dont own the target, kill autocomplete.
public	onFocusIn(event: *)
public	onFocusOut(event: *)
public	onInsideIcon(evt: *) When icon is enabled, handles the click event of the icon.
public	onInsideIconLoad(evt: *)
public	onOutsideIcon(evt: *) When icon is enabled, handles the click event of the icon.
public	onOutsideIconLoad(evt: *)
public	onTextInputDelayedChange(event: *)
public	onTimerComplete(event: *)
public	setDataProvider(val: *) Sets the provided value as the source for the auto complete options.
public	setIconVisible(event: *) Sets the visibility of the icons when there is text in the box on basis of the showIconWhenHasText flag.
public	setMaxLength(len: *)
public	setPlaceHolder(placeHolder: *)
public	setSelection(begin: , end: ) Sets the selection on the text box.
public	setText(val: *)
public	setValue(val: *) Generic function that sets the value of a IFilterControl
public	setWidth(w: *)
public	sizeComponents()
public	validate(evt: *)

Public Constructors

public constructor(tag: *) source

Override:

TextInput#constructor

Params:

Name	Type	Attribute	Description
tag	*

Public Members

public addAllItemText: * source

Text of the "All" item. Defaults to "All"

Properties:

Name	Type	Attribute	Description
addAllItemText	*

public allUnchecked: * source

public alwaysVisible: * source

IF set to true, popup will always be visible, and text box wont.

Properties:

Name	Type	Attribute	Description
alwaysVisible	*

public dataField: * source

Name of the field in the items in the dataProvider Array to use as the value of drop-down list. By default, the control uses a property named data on each Array object and displays it.

However, if the dataProvider items do not contain a data property, you can set the dataField property to use a different property.

. This is also used as the search field.

Properties:

Name	Type	Attribute	Description
dataField	*

public defaultWidth: Number source

The default width of the mscb

public dropdownWidth: * source

Width of the dropdown. If -1, the popup will take the width of the control.

Properties:

Name	Type	Attribute	Description
dropdownWidth	*

public filterComparisionType: * source

This is usually automatically set, you don't have to manually set it, unless you're sending strings as Date objects. When set, will attempt to first convert the current value to the type you specified and then do the conversion. Values : auto,string,number,boolean,date

Override:

TextInput#filterComparisionType

Properties:

Name	Type	Attribute	Description
filterComparisionType	*

public filterOperation: * source

The filter operation to apply to the comparison See the FilterExpression class for a list. Please note, for CheckBoxList and MultiSelectComboBox, this field defaults to "InList" and is ignored when set. Valid values are : "Equals,NotEquals,BeginsWith,EndsWith,Contains,DoesNotContain,GreaterThan,LessThan,GreaterThanEquals,LessThanEquals,InList,NotInList,Between"

Override:

TextInput#filterOperation

Properties:

Name	Type	Attribute	Description
filterOperation	*

public filterTriggerEvent: * source

The event that the filter triggers on. Defaults to "change", or if the filterRenderer supports com.flexicious.controls.interfaces.IDelayedChange, then the delayedChange event.

Override:

TextInput#filterTriggerEvent

Properties:

Name	Type	Attribute	Description
filterTriggerEvent	*

public grid: * source

The grid that the filter belongs to - can be null if filter is used outside the grid

Override:

TextInput#grid

Properties:

Name	Type	Attribute	Description
grid	*

public gridColumn: * source

The grid column that the filter belongs to - can be null if filter is used outside the grid

Override:

TextInput#gridColumn

Properties:

Name	Type	Attribute	Description
grid	*

public hasSearch: * source

Whether or not there is an active search

Override:

TextInput#hasSearch

Properties:

Name	Type	Attribute	Description
hasSearch	*

public highlightedRowIndex: * source

The row currently highlighted on basis of either the keyboard or mouse inputs.

Properties:

Name	Type	Attribute	Description
highlightedRowIndex	*

public iconHeight: * source

Width of the inside and outside icons

Override:

TextInput#iconHeight

Properties:

Name	Type	Attribute	Description
iconHeight	*

public iconWidth: * source

Width of the inside and outside icons

Override:

TextInput#iconWidth

Properties:

Name	Type	Attribute	Description
iconWidth	*

public insideIcon: * source

The icon that is displayed outside the textbox, based on the outsideIconPosition property. [Style(name="outsideIcon", type="Class" , inherit="no")]

Override:

TextInput#insideIcon

Properties:

Name	Type	Attribute	Description
outsideIcon	*

public labelField: * source

Name of the field in the items in the dataProvider Array to display as the label in the TextInput portion and drop-down list. By default, the control uses a property named label on each Array object and displays it.

However, if the dataProvider items do not contain a label property, you can set the labelField property to use a different property.

Properties:

Name	Type	Attribute	Description
labelField	*

public labelFunction: * source

User-supplied function to run on each item to determine its label. By default the control uses a property named label on each dataProvider item to determine its label. However, some data sets do not have a label property, or do not have another property that can be used for displaying as a label.

An example is a data set that has lastName and firstName fields but you want to display full names. You use labelFunction to specify a callback function that uses the appropriate fields and return a displayable String.

The labelFunction takes a single argument which is the item in the dataProvider and returns a String:

 myLabelFunction(item:Object):String

Properties:

Name	Type	Attribute	Description
labelFunction	*

The Div that contains all the checkboxes.

Properties:

Name	Type	Attribute	Description
popup	*

public popupHeight: * source

Properties:

Name	Type	Attribute	Description
popupHeight	*

public registered: * source

Whether or not this control has been registered. This should not be set by your code.

Override:

TextInput#registered

Properties:

Name	Type	Attribute	Description
registered	*

public searchField: * source

The field to search on, usually same as the data field.

Override:

TextInput#searchField

Properties:

Name	Type	Attribute	Description
searchField	*

public selectedValues: * source

A List of strings that map to the dataField value of this control, representing the selected items within this control

Properties:

Name	Type	Attribute	Description
selectedValues	*

Public Methods

public clear() source

Override:

TextInput#clear

public componentDidMountCustom() source

Override:

TextInput#componentDidMountCustom

public destroyPopup(force: *) source

Params:

Name	Type	Attribute	Description
force	*

public getAddAllItem(): * source

Flag, when set will cause the associated control to have an Filter.ALL_ITEM Item value, which can then be used by the filtering infrastructure to ignore the column in the search

Return:

public getClassNames(): string[] source

Override:

TextInput#getClassNames

Return:

string[]

public getDataProvider(): * source

Return:

public getIsAllSelected(): boolean source

Returns true if the all item is selected false otherwise

Return:

boolean

public getSelectedItems(item: ): source

Params:

Name	Type	Attribute	Description
item	*

Return:

public getValue(): * source

Generic function that returns the value of a IFilterControl

Override:

TextInput#getValue

Return:

public highlightRow(row: *) source

Params:

Name	Type	Attribute	Description
row	*

public initialize() source

Initializes the auto complete and watermark plugins

Override:

UIComponent#initialize

public isItemSelected(item: ): source

Params:

Name	Type	Attribute	Description
item	*

Return:

public itemToLabel(data: ): source

Returns the String that the item renderer displays for the given data object.

Params:

Name	Type	Attribute	Description
data	*

Return:

public kill() source

First, calls super.kill(), which takes out all event listeners. Then, removes all the dom event listeners that we add. Then, wipes out the reference on the domElement. Then, wipes out the domElement reference. Finally, removes itself from the display list if its pending validation.

Override:

UIComponent#kill

public onDocumentMouseUp(e: *) source

Params:

Name	Type	Attribute	Description
e	*

public onOkButton() source

public owns(elem: ): source

Recursively iterates through the parent hierarchy of the given element to check to see if the current node is in its parent hierarchy.

Override:

UIComponent#owns

Params:

Name	Type	Attribute	Description
elem	*

Return:

public restoreStateAndDestroyPopup() source

public setAddAllItem(value: *) source

Params:

Name	Type	Attribute	Description
value	*

public setDataProvider(value: *) source

Sets the provided value as the source for the auto complete options.

Override:

TextInput#setDataProvider

Params:

Name	Type	Attribute	Description
value	*

public setLabel() source

public setSelectedItem(val: *) source

Params:

Name	Type	Attribute	Description
val	*

public setValue(val: *) source

Generic function that sets the value of a IFilterControl

Override:

TextInput#setValue

Params:

Name	Type	Attribute	Description
val	*

public showPopup(parent: *) source

Params:

Name	Type	Attribute	Description
parent	*

public updateCheckBoxes() source

Updates the value of the current check boxes from selectedValues and dataProvider

public updateDisplayList(w: , h: ) source

Called as a part of render phase.

Override:

UIComponent#updateDisplayList

Params:

Name	Type	Attribute	Description
w	*
h	*

MultiSelectComboBox

Extends:

Direct Subclass:

Constructor Summary

Member Summary

Method Summary

Inherited Summary

Public Constructors

public constructor(tag: *) source

Override:

Params:

Public Members

public addAllItemText: * source

Properties:

public allUnchecked: * source

public alwaysVisible: * source

Properties:

public dataField: * source

Properties:

public defaultWidth: Number source

public dropdownWidth: * source

Properties:

public filterComparisionType: * source

Override:

Properties:

public filterOperation: * source

Override:

Properties:

public filterTriggerEvent: * source

Override:

Properties:

public grid: * source

Override:

Properties:

public gridColumn: * source

Override:

Properties:

public hasSearch: * source

Override:

Properties:

public highlightedRowIndex: * source

Properties:

public iconHeight: * source

Override:

Properties:

public iconWidth: * source

Override:

Properties:

public insideIcon: * source

Override:

Properties:

public labelField: * source

Properties:

public labelFunction: * source

Properties:

public popup: * source

Properties:

public popupHeight: * source

Properties:

public registered: * source

Override:

Properties:

public searchField: * source

Override:

Properties:

public selectedValues: * source

Properties:

Public Methods

public clear() source

Override:

public componentDidMountCustom() source

Override:

public destroyPopup(force: *) source

Params:

public getAddAllItem(): * source

Return:

public getClassNames(): string[] source

Override:

Return:

public getDataProvider(): * source

public getSelectedItems(item: ): source

public isItemSelected(item: ): source

public itemToLabel(data: ): source

public owns(elem: ): source

public updateDisplayList(w: , h: ) source