The MultiSelect has built-in support to select multiple values through checkbox,
when mode
property set as CheckBox
.
To use checkbox, inject the CheckBoxSelection
module in the MultiSelect.
[Class-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
constructor() {
super(...arguments);
// define the JSON of data
this.sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
this.fields = { text: 'Game', value: 'Id' };
}
render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData} fields={this.fields} placeholder="Select game" mode="CheckBox">
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'Game', value: 'Id' };
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData}
fields={this.fields} placeholder="Select game" mode="CheckBox">
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
[Functional-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData} fields={fields} placeholder="Select game" mode="CheckBox">
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields: object = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData}
fields={fields} placeholder="Select game" mode="CheckBox">
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
ReactDOM.render(<App />, document.getElementById('sample'));
The MultiSelect component has in-built support to select the all list items using Select All
options in the header.
When the showSelectAll
property is set to true, by default Select All text will show.
You can customize the name attribute of the Select All option by using
selectAllText
.
For the unSelect All option, by default unSelect All text will show.
You can customize the name attribute of the unSelect All option by using
unSelectAllText
.
[Class-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
constructor() {
super(...arguments);
// define the JSON of data
this.sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
this.fields = { text: 'Game', value: 'Id' };
}
render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData} fields={this.fields} placeholder="Select game" mode="CheckBox" selectAllText="Select All" unSelectAllText="unSelect All" showSelectAll={true}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'Game', value: 'Id' };
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData}
fields={this.fields} placeholder="Select game" mode="CheckBox" selectAllText="Select All" unSelectAllText="unSelect All" showSelectAll={true}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
[Functional-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData} fields={fields} placeholder="Select game" mode="CheckBox" selectAllText="Select All" unSelectAllText="unSelect All" showSelectAll={true}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields: object = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData}
fields={fields} placeholder="Select game" mode="CheckBox" selectAllText="Select All" unSelectAllText="unSelect All" showSelectAll={true}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
ReactDOM.render(<App />, document.getElementById('sample'));
Defines the limit of the selected items using maximumSelectionLength
.
[Class-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
constructor() {
super(...arguments);
// define the JSON of data
this.sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
this.fields = { text: 'Game', value: 'Id' };
}
render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData} fields={this.fields} placeholder="Select game" mode="CheckBox" maximumSelectionLength={3}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'Game', value: 'Id' };
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData}
fields={this.fields} placeholder="Select game" mode="CheckBox" maximumSelectionLength={3}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
[Functional-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData} fields={fields} placeholder="Select game" mode="CheckBox" maximumSelectionLength={3}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields: object = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData}
fields={fields} placeholder="Select game" mode="CheckBox" maximumSelectionLength={3}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
ReactDOM.render(<App />, document.getElementById('sample'));
Using enableSelectionOrder
to Reorder the selected items in popup visibility state.
[Class-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
constructor() {
super(...arguments);
// define the JSON of data
this.sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
this.fields = { text: 'Game', value: 'Id' };
}
render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData} fields={this.fields} placeholder="Select game" mode="CheckBox" enableSelectionOrder={false}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'Game', value: 'Id' };
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={this.sportsData}
fields={this.fields} placeholder="Select game" mode="CheckBox" enableSelectionOrder={false}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));
[Functional-component]
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData} fields={fields} placeholder="Select game" mode="CheckBox" enableSelectionOrder={false}>
<Inject services={[CheckBoxSelection]}/>
</MultiSelectComponent>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>
import { CheckBoxSelection, Inject, MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData: { [key: string]: Object }[] = [
{ Id: 'game1', Game: 'Badminton' },
{ Id: 'game2', Game: 'Football' },
{ Id: 'game3', Game: 'Tennis' },
{ Id: 'game4', Game: 'Golf' },
{ Id: 'game5', Game: 'Cricket' },
{ Id: 'game6', Game: 'Handball' },
{ Id: 'game7', Game: 'Karate' },
{ Id: 'game8', Game: 'Fencing' },
{ Id: 'game9', Game: 'Boxing' }
];
// maps the appropriate column to fields property
const fields: object = { text: 'Game', value: 'Id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="checkbox" dataSource={sportsData}
fields={fields} placeholder="Select game" mode="CheckBox" enableSelectionOrder={false}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
);
}
ReactDOM.render(<App />, document.getElementById('sample'));