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

View Sample in GitHub.