ChipListModel

23 Sep 202520 minutes to read

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.

    import { render } from 'react-dom';
    import * as ReactDom from 'react-dom';
    import {  ChipListComponent, ChipsDirective, ChipDirective  } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        chipClick(e) {
            alert('you have selected ' +e.text);
        }
        render() {
            return (                            
                <ChipListComponent id="chip-avatar" selection="Single" beforeClick={this.chipClick.bind(this)}>
                    <ChipsDirective>
                        <ChipDirective text="Andrew"></ChipDirective>
                        <ChipDirective text="Janet"></ChipDirective>
                        <ChipDirective text="Laura"></ChipDirective>
                        <ChipDirective text="Margaret"></ChipDirective>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

click EmitType<ClickEventArgs>

Triggers when a chip is clicked.

    import { render } from 'react-dom';
    import * as ReactDom from 'react-dom';
    import {  ChipListComponent, ChipsDirective, ChipDirective  } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        chipClick(e) {
            alert('you have clicked ' + e.target.textContent);
        }
        render() {
            return (                            
                <ChipListComponent id="chip-avatar" onClick={this.chipClick.bind(this)}>
                    <ChipsDirective>
                    <ChipDirective text="Send a text"/>
                    <ChipDirective text="Set a remainder"/>
                    <ChipDirective text="Read my emails"/>
                    <ChipDirective text="Set alarm"/>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

created EmitType<Event>

Triggers when the component is created successfully.

    import { render } from 'react-dom';
    import {  ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        createEvent(e) {
            alert('Component Rendered Successfully');
        }
        render() {
            return (                            
                <ChipListComponent id="chip-default" text="Janet Leverling" onCreated={this.createEvent(this)}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

delete EmitType<DeleteEventArgs>

Fires before removing the chip element.

    import { render } from 'react-dom';
    import * as ReactDom from 'react-dom';
    import {  ChipListComponent, ChipsDirective, ChipDirective  } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        deleteEvent(e) {
            alert('you have deleted ' + e.text);
        }
        render() {
            return (                            
                <ChipListComponent id="chip-avatar" enableDelete="true" delete={this.deleteEvent.bind(this)}>
                    <ChipsDirective>
                    <ChipDirective text="Andrew"/>
                    <ChipDirective text="Janet"/>
                    <ChipDirective text="Laura"/>
                    <ChipDirective text="Margaret"/>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

deleted EmitType<ChipDeletedEventArgs>

Triggers when the chip item is removed.

dragStart EmitType<DragAndDropEventArgs>

Fires when a chip item starts moving due to a drag action.

dragStop EmitType<DragAndDropEventArgs>

Fires when a chip item is reordered after completing a drag action.

dragging EmitType<DragAndDropEventArgs>

Fires while a chip item is being dragged.

allowDragAndDrop boolean

Specifies a boolean value that indicates whether the chip item can be dragged and reordered.
This enables drag-and-drop functionality within a single container or across multiple containers of chips when dragging is enabled.

avatarIconCss string

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

    <!DOCTYPE html>
    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
            <style>
                #chip .anne {
                    background-image: url('https://ej2.syncfusion.com/react/demos/src/chips/images/anne.png');
                }
            </style>
        </head>

        <body class="material">
            <div id='sample'>
        </body>
    </html>

    import { render } from 'react-dom';
    import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        Icon = "anne";
        render() {
            return ( 
                <ChipListComponent id="chip" text="Janet Leverling" avatarIconCss={this.Icon}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

avatarText string

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

    import { render } from 'react-dom';
    import './index.css';
    import {  ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        text = 'J';
        render() {
            return (                            
                <ChipListComponent id="chip-default" text="Janet Leverling" avatarText= {this.text}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

chips string[]|number[]|ChipModel[]

This chips property helps to render ChipList component.

    import { render } from 'react-dom';
    import * as ReactDom from 'react-dom';
    import {  ChipListComponent, ChipsDirective, ChipDirective  } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        render() {
            return (                            
                <ChipListComponent id="chip-avatar">
                    <ChipsDirective>
                        <ChipDirective text="Small"></ChipDirective>
                        <ChipDirective text="Medium"></ChipDirective>
                        <ChipDirective text="Large"></ChipDirective>
                        <ChipDirective text="Extra Large"></ChipDirective>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

cssClass string

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

    import { render } from 'react-dom';
    import {  ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        style = "e-outline"
        render() {
            return (                            
                <ChipListComponent text="Janet Leverling" cssClass={this.style}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

dragArea HTMLElement|string

Specifies the target in which the draggable element can be moved and dropped.
By default, the draggable element movement occurs in the page.

enableDelete boolean

Enables or disables the delete functionality of a chip.

    import { render } from 'react-dom';
    import * as ReactDom from 'react-dom';
    import {  ChipListComponent, ChipsDirective, ChipDirective  } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        bool = "true"
        render() {
            return (                            
                <ChipListComponent id="chip-avatar" enableDelete={this.bool}>
                    <ChipsDirective>
                    <ChipDirective text="Andrew"/>
                    <ChipDirective text="Janet"/>
                    <ChipDirective text="Laura"/>
                    <ChipDirective text="Margaret"/>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

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 { : }

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.

    <!DOCTYPE html>
    <html>
        <head>
            <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
            <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
            <style>
                #chip .janet {
                    background-image: url('https://ej2.syncfusion.com/react/demos/src/chips/images/janet.png');
                }
            </style>
        </head>

        <body class="material">
            <div id='sample'>
        </body>
    </html>

    import { render } from 'react-dom';
    import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
        Icon = "janet";
        render() {
            return ( 
                <ChipListComponent id="chip" text="Janet Leverling" leadingIconCss={this.Icon}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

leadingIconUrl string

Specifies the leading 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.

    import { render } from 'react-dom';
    import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
    choice=[1,3];
        render() {
            return ( 
                <ChipListComponent id="chip-filter" selectedChips={this.choice} selection="Multiple">
                    <ChipsDirective>
                        <ChipDirective text="Extra small"></ChipDirective>
                        <ChipDirective text="Small"></ChipDirective>
                        <ChipDirective text="Medium"></ChipDirective>
                        <ChipDirective text="Large"></ChipDirective>
                        <ChipDirective text="Extra large"></ChipDirective>
                    </ChipsDirective>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

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.

    import { render } from 'react-dom';
    import {  ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
    name = "Janet Leverling";
        render() {
            return (                            
                <ChipListComponent text={this.name}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

trailingIconCss string

Specifies the trailing icon CSS class for the chip.

    import { render } from 'react-dom';
    import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
    import * as React from 'react';
    import { SampleBase } from './sample-base';

    export class Default extends SampleBase {
    Icon = "e-dlt-btn";
        render() {
            return ( 
                <ChipListComponent id="chip" text="Janet Leverling" trailingIconCss={this.Icon}>
                </ChipListComponent>
            );
        }
    }
    render(<Default />, document.getElementById('sample'));

trailingIconUrl string

Specifies the trailing icon url for the chip.