Types in Chips Control
19 Dec 20223 minutes to read
The ChipList control has the following types.
- Input Chip
- Choice Chip
- Filter Chip
- Action Chip
Input Chip
Input Chip holds information in compact form. It converts user input into chips.
<ejs-chiplist id="chip-avatar">
<e-chips>
<e-chip text="Andrew" enabled="true"></e-chip>
<e-chip text="Janet" enabled="true"></e-chip>
<e-chip text="Laura" enabled="true"></e-chip>
<e-chip text="Margaret" enabled="true"></e-chip>
</e-chips>
</ejs-chiplist>
Choice Chip
Choice Chip allows to select a single chip from the set of ChipList/ChipCollection. It can be enabled by setting the selection
property to Single
.
<ejs-chiplist id="chip-avatar" selection="Single">
<e-chips>
<e-chip text="Small" enabled="true"></e-chip>
<e-chip text="Medium" enabled="true"></e-chip>
<e-chip text="Large" enabled="true"></e-chip>
<e-chip text="Extra Large" enabled="true"></e-chip>
</e-chips>
</ejs-chiplist>
Filter Chip
Filter Chip allows to select a multiple chip from the set of ChipList/ChipCollection. It can be enabled by setting the selection
property to Multiple
.
<ejs-chiplist id="chip-avatar" selection="Multiple">
<e-chips>
<e-chip text="Chai" enabled="true"></e-chip>
<e-chip text="Chang" enabled="true"></e-chip>
<e-chip text="Aniseed Syrup" enabled="true"></e-chip>
<e-chip text="Ikura" enabled="true"></e-chip>
</e-chips>
</ejs-chiplist>
Action Chip
The Action Chip triggers the event like click or delete, which helps doing action based on the event.
<ejs-chiplist id="chip-avatar" click="chipclick">
<e-chips>
<e-chip text="Sent a text" enabled="true"></e-chip>
<e-chip text="Set a remainder" enabled="true"></e-chip>
<e-chip text="Read my emails" enabled="true"></e-chip>
<e-chip text="Set alarm" enabled="true"></e-chip>
</e-chips>
</ejs-chiplist>
<script>
function chipclick(e){
alert('you have clicked ' + e.text);
}
</script>
Deletable Chip
Deletable Chip allows to delete a chip from ChipList/ChipCollection. It can be enabled by setting the enableDelete
property to true
.
<ejs-chiplist id="chip-avatar" enableDelete="true">
<e-chips>
<e-chip text="Sent a text" enabled="true"></e-chip>
<e-chip text="Set a remainder" enabled="true"></e-chip>
<e-chip text="Read my emails" enabled="true"></e-chip>
<e-chip text="Set alarm" enabled="true"></e-chip>
</e-chips>
</ejs-chiplist>
NOTE