Search results

ChipListModel API in React Chips API component

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.

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'));

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

{ [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.

    <!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 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.

    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.