WaveMaker - Widgets API Documentation
  1. Classes
  2. Chips

File

projects/components/widgets/input/chips/src/chips.component.doc.ts

Description

The wmChips component defines the chips widget.

Index

Methods
Inputs

Methods

onAdd
onAdd($event: MouseEvent, widget: any, $item: Object)

Callback function which will be triggered on chip addition.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the chips widget
$item Object No

object containing chip data i.e. label(display value), key, value(datavalue), dataObject. dataObject has the object if dataset is bound to array of objects.
Returns : void
onBeforeadd
onBeforeadd($event: MouseEvent, widget: any, newItem: Object)

Callback function which will be triggered before adding the chip. If this function returns false then chip will not be added.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the chips widget
newItem Object No

object containing chip data i.e. label(display value), key, value(datavalue), dataObject. dataObject has the object if dataset is bound to array of objects.
Returns : void
onBeforeremove
onBeforeremove($event: MouseEvent, widget: any, $item: Object)

Callback function which will be triggered before removing the chip. If this function returns false then chip will not be removed.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the chips widget
$item Object No

object containing chip data before removing the chip.
Returns : void
onBeforereorder
onBeforereorder($event: MouseEvent, widget: any, $data: Array, $changedItem: Object)

Callback function which will be triggered before the chip item is reordered.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the chips widget
$data Array<Object> No

contains the list of chips data
$changedItem Object No

chip item that has to be reordered.
Returns : void
onBeforeservicecall
onBeforeservicecall(widget: any, inputData: Object)

Callback function which will be triggered before the service call.

Parameters :
Name Type Optional Description
widget any No

Instance of the chips widget
inputData Object No

object containing filter fields
Returns : void
onChange
onChange($event: MouseEvent, widget: any, newVal: Array, oldVal: Array)

Callback function which will be triggered when datavalue has changed.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the chips widget
newVal Array<any> No

datavalue of the chips widget
oldVal Array<any> No

previously selected datavalue of the chips widget
Returns : void
onChipclick
onChipclick($event: MouseEvent, widget: any, newVal: Object)

Callback function which will be triggered when chip is clicked.

  • @param newVal contains the chip data.
Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the chips widget *
newVal Object No

contains the chip data.
Returns : void
onChipselect
onChipselect($event: MouseEvent, widget: any, newVal: Object)

Callback function which will be triggered upon chip selection.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the chips widget
newVal Object No

contains the selected chip data.
Returns : void
onRemove
onRemove($event: MouseEvent, widget: any, $item: Object)

Callback function which will be triggered on removing chip.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the chips widget
$item Object No

object containing chip data that is removed from chips list.
Returns : void
onReorder
onReorder($event: MouseEvent, widget: any, $data: Array, $changedItem: Object)

Callback function which will be triggered on reordering of chips.

Parameters :
Name Type Optional Description
$event MouseEvent No

DOM event on which call back is triggered
widget any No

Instance of the chips widget
$data Array<Object> No

contains the list of chips data
$changedItem Object No

chip item that is reordered.
Returns : void

Inputs

allowonlyselect
Type : boolean
Default value : false

This property will restrict adding values other than the values in the dropdown, if set to true. By default there is no restriction

autofocus
Type : boolean
Default value : false

This property makes the widget get focused automatically when the page loads.

chipclass
Type : string

Class to be applied on each of the chip item.

Bindable: true
class
Type : string

Class of the widget.
datafield
Type : string

This property sets the dataValue to be returned by the chips widget when the list is populated using the dataSet property.

dataset
Type : Array<any> | Object
Default value : 'Option 1, Option 2, Option 3'
datavalue
Type : any

This property defines the initial selected value of the chips widget. This adds the default chip items.
This accept an array of values too. This value has to be of type as that of the property specified for datafield. If datafield is ALL FIELDS, then pass an object or array of objects to datavalue.

Bindable: true
disabled
Type : boolean

This property will be used to disable the chips widget. If the disabled property is true (checked), the widget becomes display-only.

Bindable: true
displayexpression
Type : string

This is an advanced property that gives more control over what is displayed in the drop-down select list. A Display Expression uses a JavaScript expression to format exactly what is shown

Bindable: true
displayfield
Type : string

This property sets the displayValue to show in the chip's search results when the list is populated using the dataSet property.

displayimagesrc
Type : string

Picture source sets the image to be displayed in the search results.

Bindable: true
enablereorder
Type : boolean

This property will allow users to reorder the chip items if set to true.

Bindable: true
limit
Type : number

This property limits the search results to be displayed in the widget
minchars
Type : number
Default value : 1

The minchars attribute specifies the number of characters that need to be entered before the query is triggered. It must be greater than or equal to 0.
name
Type : string

Name of the chips widget.
orderby
Type : string

Allows to display the data in asc or desc order based on this property

placeholder
Type : string

This property specifies the placeholder for the search input in chips.

Bindable: true
query
Type : string

This property contains the entered text in the search input of chips.
readonly
Type : boolean

This property will be used to make the chips widget non-editable.

Bindable: true
searchkey
Type : string

This is the property to be searched upon, in the dataset
shortcutkey
Type : string

The shortcut key property specifies a shortcut key to activate/focus an element.
show
Type : boolean
Default value : true

This property will be used to show/hide the chips widget.

Bindable: true
showsearchicon
Type : boolean

This property shows the search icon when set to true. This value is false when type is set to autocomplete.
tabindex
Type : number
Default value : 0

This property specifies the tab order of the Chip widget.
type
Type : string
Default value : 'search'

This property specifies type of search to be shown in the chips.

Allowed Values: search, autocomplete

search: Atleast one character has to be entered to trigger the search query.

autocomplete: automatically triggers the query when the search is focused.

results matching ""

    No results matching ""