Category / Section
How to Unselect Selected Item in JavaScript ListBox
1 min read
This Knowledge Base explains the way to Unselect the already selected item in ListBox
You can use “Change” event of ListBox to achieve this requirement. In the below solution we have unselect the already selected item of ListBox.
[indext.ts]
import { enableRipple } from "@syncfusion/ej2-base"; enableRipple(true); import { ListBox, ListBoxChangeEventArgs } from "@syncfusion/ej2-dropdowns"; import * as data from "./datasource.json"; // Initialize the ListBox component. let listObj: ListBox = new ListBox({ // Set the info to the dataSource property. dataSource: (data as any).info, selectionSettings: { mode: "Multiple" }, change: onChange }); let element: Element[]; let item: string[] = []; function onChange(args: ListBoxChangeEventArgs): void { if (element && args.elements.length == 1 && element[0] == args.elements[0]) { for (var i = 0; i < args.items.length; i++) { item[i] = args.value[i]; } listObj.selectItems(item, false); element = null; } else { element = args.elements; } } listObj.appendTo("#multi-select-listbox");
Sample: https://stackblitz.com/edit/angular-opugvx-orzhwb?file=app.component.html
Please refer the below UG link for information
https://ej2.syncfusion.com/documentation/list-box/getting-started/