Checkbox in EJ2 JavaScript Multi select control
2 May 202315 minutes to read
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.
var sportsData = [
{ 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' }
];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
// maps the appropriate column to fields property
fields: { text: 'sports', value: 'id' },
// set placeholder to MultiSelect input element
placeholder: "Select games",
// set the type of mode for checkbox to visualized the checkbox added in li element.
mode: 'CheckBox'});
listObj.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/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Select All
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.
var sportsData = [
{ 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' }
];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
// maps the appropriate column to fields property
fields: { text: 'sports', value: 'id' },
// set placeholder to MultiSelect input element
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"});
listObj.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/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Selection Limit
Defines the limit of the selected items using maximumSelectionLength.
var sportsData = [
{ 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' }
];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
// maps the appropriate column to fields property
fields: { text: 'sports', value: 'id' },
// set placeholder to MultiSelect input element
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
});
listObj.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/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Selection Reordering
Using enableSelectionOrder to Reorder the selected items in popup visibility state.
var sportsData = [
{ 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' }
];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
dataSource: sportsData,
// maps the appropriate column to fields property
fields: { text: 'sports', value: 'id' },
// set placeholder to MultiSelect input element
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
});
listObj.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/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<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>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>