JavaScript
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

ChipListModel API in JavaScript Chips API control

Interface for a class ChipList

Properties

beforeClick

EmitType<ClickEventArgs>

Triggers before the click event of the chip is fired. This event can be used to prevent the further process and restrict the click action over a chip.

    <div id="chip"></div>
    import { ChipList, ClickEventArgs } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'], selection: "Single", 
        beforeClick: (e: ClickEventArgs)=>{
            alert('you have selected ' + e.text)
        }
    }, '#chip');

click

EmitType<ClickEventArgs>

Triggers when a chip is clicked.

    <div id="chip"></div>
    import { ChipList, ClickEventArgs } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Send a text', 'Set a remainder', 'Read my emails ', 'Set alarm'],
        click: (e: ClickEventArgs)=>{
            alert('you have clicked ' + e.text)
        } 
    }, '#chip');

created

EmitType<Event>

Triggers when the component is created successfully.

    <div id="chip"></div>
    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Janet Leverling'],
        created: (e: Event)=>{
            alert('Component rendered successfully')
        } 
    }, '#chip');

delete

EmitType<DeleteEventArgs>

Fires before removing the chip element.

    <div id="chip"></div>
    import { ChipList, DeleteEventArgs } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'],enableDelete: true,  
        delete: (e: DeleteEventArgs)=>{
            alert('you have deleted ' + e.text)
        }
    }, '#chip');

deleted

EmitType<ChipDeletedEventArgs>

Triggers when the chip item is removed.

avatarIconCss

string

Specifies the icon CSS class for the avatar in the chip.

    <div id="chip"></div>
    <style>
        #chip .anne {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/anne.png')
        }
    </style>
    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: [{
        "text": "Anne",
        "avatarIconCss": "anne"
    }]}, '#chip');

avatarText

string

Specifies the customized text value for the avatar in the chip.

    <div id="chip"></div>
    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: [{
        "text": "Andrew",
        "avatarText": "A"
    }]}, '#chip');

chips

string[] | number[] | ChipModel[]

This chips property helps to render ChipList component.

    <div id="chip"></div>
    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret']}, '#chip');

cssClass

string

Specifies the custom classes to be added to the chip element used to customize the ChipList component.

    <div id="chip"></div>
    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Janet Leverling'], cssClass: "e-outline"
    }, '#chip');

enableDelete

boolean

Enables or disables the delete functionality of a chip.

    <div id="chip"></div>
    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'],enableDelete: true}, '#chip');

enablePersistence

boolean

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

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enabled

boolean

Specifies a value that indicates whether the chip component is enabled or not.

htmlAttributes

{ [key: string]: string }

Allows additional HTML attributes such as aria labels, title, name, etc., and accepts n number of attributes in a key-value pair format.

leadingIconCss

string

Specifies the leading icon CSS class for the chip.

    <div id="chip"></div>
    <style>
        #chip .janet {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
        }
    </style>
    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: [{
        "text": "Janet",
        "leadingIconCss": "janet"
    }]}, '#chip');

leadingIconUrl

string

Specifies the trailing icon url for the chip.

locale

string

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

selectedChips

string[] | number[] | number

Sets or gets the selected chip items in the chip list.

    <div id="chip"></div>
    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({ chips: ['Send a text', 'Set a remainder', 'Read my emails ', 'Set alarm'], selection: 'Multiple', selectedChips: [1, 3] }, '#chip');

selection

Selection

Defines the selection type of the chip. The available types are:

  1. Input chip
  2. Choice chip
  3. Filter chip
  4. Action chip

text

string

Specifies the text content for the chip.

    <div id="chip"></div>
    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: [{
        "text": "Anne",
    }]}, '#chip');

trailingIconCss

string

Specifies the trailing icon CSS class for the chip.

    <div id="chip"></div>
    import { ChipList } from '@syncfusion/ej2-buttons';
    new ChipList({chips: [{
            "text": "Margaret",
            "trailingIconCss": "e-dlt-btn"
    }]}, '#chip');

trailingIconUrl

string

Specifies the trailing icon url for the chip.

Previous
Next