Checkbox in EJ2 TypeScript MultiSelect Dropdown
4 Sep 202615 minutes to read
The MultiSelect has built-in support to select multiple values through checkboxes when the mode property is set to CheckBox.
To use checkboxes, inject the CheckBoxSelection module into the MultiSelect.
import { MultiSelect, CheckBoxSelection, FilteringEventArgs } from '@syncfusion/ej2-dropdowns';
import { Query } from '@syncfusion/ej2-data';
MultiSelect.Inject(CheckBoxSelection);
//define the array of complex data
let sportsData: { [key: string]: Object }[] = [
{ id: 'game1', sports: 'Badminton' },
{ id: 'game2', sports: 'Football' },
{ id: 'game3', sports: 'Tennis' },
{ id: 'game4', sports: 'Golf' },
{ id: 'game5', sports: 'Cricket' },
{ id: 'game6', sports: 'Handball' },
{ id: 'game7', sports: 'Karate' },
{ id: 'game8', sports: 'Fencing' },
{ id: 'game9', sports: 'Boxing' }
];
//initiate the MultiSelect
let msObject: MultiSelect = new MultiSelect({
// bind the sports Data to datasource property
dataSource: sportsData,
// maps the appropriate column to fields property
fields: { text: 'sports', value: 'id' },
//set the placeholder to MultiSelect input
placeholder:"Select games",
// set the type of mode for checkbox to visualized the checkbox added in li element.
mode: 'CheckBox',
//Bind the filter event
filtering: function (e: FilteringEventArgs) {
let query = new Query();
//frame the query based on search string with filter type.
query = (e.text != "") ? query.where("sports", "startswith", e.text, true) : query;
//pass the filter data source, filter query to updateData method.
e.updateData(sportsData, query);
}
});
//render the component
msObject.appendTo('#select');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-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>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:0 auto; width:250px;">
<br>
<!--element which is going to render the MultiSelect-->
<input type="text" tabindex="1" id='select' />
</div>
</body>
</html>Select All
The MultiSelect component has built-in support to select all list items using the Select All option in the header.
When the showSelectAll property is set to true, the Select All text is shown by default. You can customize the Select All text by using the selectAllText property.
For the unSelect All option, the Unselect All text is shown by default. You can customize the Unselect All text by using the unSelectAllText property.
import { MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-dropdowns';
MultiSelect.Inject(CheckBoxSelection);
//define the array of complex data
let sportsData: { [key: string]: Object }[] = [
{ id: 'game1', sports: 'Badminton' },
{ id: 'game2', sports: 'Football' },
{ id: 'game3', sports: 'Tennis' },
{ id: 'game4', sports: 'Golf' },
{ id: 'game5', sports: 'Cricket' },
{ id: 'game6', sports: 'Handball' },
{ id: 'game7', sports: 'Karate' },
{ id: 'game8', sports: 'Fencing' },
{ id: 'game9', sports: 'Boxing' }
];
//initiate the MultiSelect
let msObject: MultiSelect = new MultiSelect({
// bind the sports Data to datasource property
dataSource: sportsData,
// maps the appropriate column to fields property
fields: { text: 'sports', value: 'id' },
//set the placeholder to MultiSelect input
placeholder:"Select games",
// set the type of mode for checkbox to visualized the checkbox added in li element.
mode: 'CheckBox',
// set true for enable the selectAll support.
showSelectAll: true,
// set the select all text to MultiSelect checkbox label.
selectAllText: "Select All"
});
//render the component
msObject.appendTo('#select');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-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>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:0 auto; width:250px;">
<br>
<!--element which is going to render the MultiSelect-->
<input type="text" tabindex="1" id='select' />
</div>
</body>
</html>Selection Limit
Defines the limit of the selected items using maximumSelectionLength.
import { MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-dropdowns';
MultiSelect.Inject(CheckBoxSelection);
//define the array of complex data
let sportsData: { [key: string]: Object }[] = [
{ id: 'game1', sports: 'Badminton' },
{ id: 'game2', sports: 'Football' },
{ id: 'game3', sports: 'Tennis' },
{ id: 'game4', sports: 'Golf' },
{ id: 'game5', sports: 'Cricket' },
{ id: 'game6', sports: 'Handball' },
{ id: 'game7', sports: 'Karate' },
{ id: 'game8', sports: 'Fencing' },
{ id: 'game9', sports: 'Boxing' }
];
//initiate the MultiSelect
let msObject: MultiSelect = new MultiSelect({
// bind the sports Data to datasource property
dataSource: sportsData,
// maps the appropriate column to fields property
fields: { text: 'sports', value: 'id' },
//set the placeholder to MultiSelect input
placeholder:"Select games",
// set the type of mode for checkbox to visualized the checkbox added in li element.
mode: 'CheckBox',
// Sets limitation to the value selection
maximumSelectionLength: 3
});
//render the component
msObject.appendTo('#select');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-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>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:0 auto; width:250px;">
<br>
<!--element which is going to render the MultiSelect-->
<input type="text" tabindex="1" id='select' />
</div>
</body>
</html>Selection Reordering
Use the enableSelectionOrder property to reorder the selected items in the popup when it is visible.
import { MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-dropdowns';
MultiSelect.Inject(CheckBoxSelection);
//define the array of complex data
let sportsData: { [key: string]: Object }[] = [
{ id: 'game1', sports: 'Badminton' },
{ id: 'game2', sports: 'Football' },
{ id: 'game3', sports: 'Tennis' },
{ id: 'game4', sports: 'Golf' },
{ id: 'game5', sports: 'Cricket' },
{ id: 'game6', sports: 'Handball' },
{ id: 'game7', sports: 'Karate' },
{ id: 'game8', sports: 'Fencing' },
{ id: 'game9', sports: 'Boxing' }
];
//initiate the MultiSelect
let msObject: MultiSelect = new MultiSelect({
// bind the sports Data to datasource property
dataSource: sportsData,
// maps the appropriate column to fields property
fields: { text: 'sports', value: 'id' },
//set the placeholder to MultiSelect input
placeholder:"Select games",
// set the type of mode for checkbox to visualized the checkbox added in li element.
mode: 'CheckBox',
// Reorder the selected items in popup visibility state.
enableSelectionOrder: false
});
//render the component
msObject.appendTo('#select');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-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>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container' style="margin:0 auto; width:250px;">
<br>
<!--element which is going to render the MultiSelect-->
<input type="text" tabindex="1" id='select' />
</div>
</body>
</html>