Behavior settings

17 Dec 20185 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 “allowDragAndDrop” property.

HTML

<div id="control">
        <ul id="selectskills" ej-listbox e-datasource="dataList" e-fields-text="text" e-height="220" e-width="180" e-allowdraganddrop="true"></ul>
    </div>
    <div id="control">
        <ul id="selected" ej-listbox e-height="220" e-width="180" e-allowdraganddrop="true"></ul>
    </div>

JAVASCRIPT

$scope.dataList = [
             { 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" }
             ];
    $scope.text = "skill";

Reordering

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

HTML

<div id="control">
        <ul id="selectskills" ej-listbox e-datasource="dataList" e-fields-text="text" e-height="220" e-width="180" e-allowdraganddrop="true"></ul>
    </div>

JAVASCRIPT

$scope.dataList = [
             { 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">
        <ul id="selectfont" ej-listbox e-datasource="dataList" e-fields-value="value" e-fields-text="text" e-enableincrementalsearch ="true"></ul>
    </div>

JAVASCRIPT

$scope.dataList = [
              { 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" }
             ];
             $scope.value = "fonts";
             $scope.text = "fonts";

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