Behavior settings

30 Apr 20206 minutes to read

Drag and Drop

To move the list item from one Listbox component to another ListBox by using the drag and drop support through allowDrag and allowDrop property.

HTML

<div class="frame">
            <div class="contents">
                <ej-listbox id="selectskills" [dataSource]="skillSet" [fields]="fields" [allowDrag]="true" [allowDrop]="true" width="180px" height="220px"></ej-listbox>
            </div>
            <div class="contents">
                <ej-listbox id="selected" [allowDrag]="true" [allowDrop]="true" width="180px" height="220px"></ej-listbox>
            </div>
    </div>

TS

export class DragAndDropComponent {
    skillSet: Array<any>;
    fields: object;
    constructor() {
        this.fields = { text: 'skill' };
        this.skillSet = [
            { skill: 'ASP.NET' }, { skill: 'ActionScript' }, { skill: 'Basic' },
            { skill: 'C++' }, { skill: 'C#' }, { skill: 'dBase' }, { skill: 'Delphi' },
            { skill: 'ESPOL' }, { skill: 'F#' }, { skill: 'FoxPro' }, { skill: 'Java' },
            { skill: 'J#' }, { skill: 'Lisp' }, { skill: 'Logo' }, { skill: 'PHP' }
        ];
    }
}

Reordering

To reorder the list item within the ListBox component by using allowDrag and allowDrop property.

HTML

<div id="control">
        <ej-listbox id="selectskills" [dataSource]="skillSet" [fields]="fields" [allowDrag]="true" [allowDrop]="true" width="180px" height="220px"></ej-listbox>
    </div>

TS

export class AppComponent {
    skillSet: Array<any>;
    fields: object;
    constructor() {
        this.fields = { text: 'skill' };
        this.skillSet = [
            { skill: 'ASP.NET' }, { skill: 'ActionScript' }, { skill: 'Basic' },
            { skill: 'C++' }, { skill: 'C#' }, { skill: 'dBase' }, { skill: 'Delphi' },
            { skill: 'ESPOL' }, { skill: 'F#' }, { skill: 'FoxPro' }, { skill: 'Java' },
            { skill: 'J#' }, { skill: 'Lisp' }, { skill: 'Logo' }, { skill: 'PHP' }
        ];
    }
}

NOTE

The item reordering can be done dynamically without mouse interaction. For that we have provided two methods “moveUp” and “moveDown”.

Incremental Search

The Incremental search helps to finding the specific item in the ListBox. The user types any character in ListBox component for that matched list box item will be selected by enabling the enableIncrementalSearch property in the ListBox component. Incremental search can be case sensitive or case insensitive. To make case sensitive, you can use caseSensitiveSearch property.

HTML

<div id="control">
       <ej-listbox id="selectskills" [dataSource]="skillSet" [fields]="fields" [enableIncrementalSearch]="true" width="180px" height="220px"></ej-listbox>
    </div>

TS

export class AppComponent {
    skillSet: Array<any>;
    fields: Object;
    constructor() {
        this.fields = { text: 'fonts' };
        this.skillSet = [
            { fonts: "Algerian" },
            { fonts: "ARIAL" }, { fonts: "Bimini" }, { fonts: "Courier" },
            { fonts: "Cursive" }, { fonts: "Fantasy" }, { fonts: "Georgia" }, { fonts: "Impact" },
            { fonts: "New York" }, { fonts: "Sans-Serif" }, { fonts: "Scripts" }, { fonts: "Times" },
            { fonts: "Times New Roman" }, { fonts: "Verdana" }, { fonts: "Western" }
        ];
        ];
    }
}

Press tab key to get ListBox focus and press "C" to get the following output.