Articles in this section
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/

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied