Search results

ChipList

A chip component is a small block of essential information, mostly used on contacts or filter tags.

<div id="chip"></div>
<script>
var chipObj = new ChipList();
chipObj.appendTo("#chip");
</script>

Properties

avatarIconCss

string

This avatarIconCss property helps to customize avatar element.

Defaults to

avatarText

string

This avatarText property helps to customize avatar content.

Defaults to

chips

string[] | number[] | ChipModel[]

This chips property helps to render ChipList component.

Defaults to []

cssClass

string

This cssClass property helps to customize ChipList component.

Defaults to

enableDelete

boolean

This enableDelete property helps to enable delete functionality.

Defaults to false

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled

boolean

This enabled property helps to enable/disable ChipList component.

Defaults to true

leadingIconCss

string

This leadingIconCss property helps to customize leading icon element.

Defaults to

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

selectedChips

number[] | number

This selectedChips property helps to select chip items.

Defaults to []

selection

string

This selection property enables chip selection type.

Defaults to ‘None’

text

string

This text property helps to render Chip component.

Defaults to

trailingIconCss

string

This trailingIconCss property helps to customize trailing icon element.

Defaults to

Methods

add

A function that adds chip items based on given input.

Parameter Type Description
chipsData string[] | number[] | ChipModel[] | string | number | ChipModel We can pass array of string or
array of number or array of chip model or string data or number data or chip model.

Returns void

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

It is used to destroy the ChipList component.

Returns void

find

A function that finds chip based on given input.

Parameter Type Description
fields number | HTMLElement We can pass index number or element of chip.

Returns ChipDataArgs

getSelectedChips

A function that returns selected chips data.

Returns SelectedItem | SelectedItems

refresh

Applies all the pending property changes and render the component again.

Returns void

remove

A function that removes chip items based on given input.

Parameter Type Description
fields number | number[] | HTMLElement | HTMLElement[] We can pass number or array of number
or chip element or array of chip element.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

select

A function that selects chip items based on given input.

Parameter Type Description
fields number | number[] | HTMLElement | HTMLElement[] We can pass number or array of number
or chip element or array of chip element.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

click

EmitType<ClickEventArgs>

This click event will get triggered once the chip is clicked.

created

EmitType<Event>

This created event will get triggered once the component rendering is completed.

delete

EmitType<DeleteEventArgs>

This delete event will get triggered before removing the chip.