Behavior settings

Drag and Drop

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

  • html
  • <div class="frame">
                <div class="contents">
                    <ej-listbox id="selectskills" [dataSource]="skillSet" [fields]="fields" [allowDragAndDrop]="true" width="180px" height="220px"></ej-listbox>
                </div>
                <div class="contents">
                    <ej-listbox id="selected" [allowDragAndDrop]="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' }
            ];
        }
    }

    Drag and Drop

    Drag and Drop Images

    Reordering

    To reorder the list item within the ListBox component by using “allowDragAndDrop” property.

  • html
  • <div id="control">
            <ej-listbox id="selectskills" [dataSource]="skillSet" [fields]="fields" [allowDragAndDrop]="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' }
            ];
        }
    }

    Reordering

    Drag and Drop Reordering

    NOTE

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

    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" }
            ];
            ];
        }
    }

    Incremental Search

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

    Keyboard Interaction