Customization

28 Jun 20176 minutes to read

Applying Rounded Corner

To use showRoundedCorner property to add the rounded borders for the ListBox component. By default, showRoundedCorner property is disabled in ListBox.

HTML

<div id="control">
        <ul id="selectcustomer" ej-listbox e-datasource="dataList" e-fields-text="text" e-showroundedcorner="true"></ul>
    </div>

JS

$scope.dataList = [
                          { empid: "cr1", text: "Dodge Avenger" },
                          { empid: "cr2", text: "Chrysler 200" },
                          { empid: "cr3", text: "Ford Focus" },
                          { empid: "cr4", text: "Ford Taurus", },
                          { empid: "cr5", text: "Dazzler", },
                          { empid: "cr6", text: "Chevy Spark", },
                          { empid: "cr7", text: "Chevy Volt", },
                          { empid: "cr8", text: "Honda Fit", },
                          { empid: "cr9", text: "Honda Crosstour", },
                          { empid: "cr10", text: "Acura RL", },
                          { empid: "cr11", text: "Hyundai Elantra", },
                          { empid: "cr12", text: "Mazda3", }
             ];

IMPORTANT

The browser support details for rounded corner is given here.

Enable/Disable the ListBox component

The enabled property is used to indicate whether the component can respond to the user interaction or not. You can disable it by setting as false to this property. When the component as disabled state, you cannot interact with the component.

NOTE

you can also use enable() or disable() methods.

HTML

<div id="control">
        <ul id="selectcustomer" ej-listbox e-datasource="dataList" e-fields-text="text" e-enabled="false"></ul>
    </div>

JS

$scope.dataList = [
                          { empid: "cr1", text: "Dodge Avenger" },
                          { empid: "cr2", text: "Chrysler 200" },
                          { empid: "cr3", text: "Ford Focus" },
                          { empid: "cr4", text: "Ford Taurus", },
                          { empid: "cr5", text: "Dazzler", },
                          { empid: "cr6", text: "Chevy Spark", },
                          { empid: "cr7", text: "Chevy Volt", },
                          { empid: "cr8", text: "Honda Fit", },
                          { empid: "cr9", text: "Honda Crosstour", },
                          { empid: "cr10", text: "Acura RL", },
                          { empid: "cr11", text: "Hyundai Elantra", },
                          { empid: "cr12", text: "Mazda3", }
             ];

NOTE

you can disable/enable the single or multiple list items by using disableItemsByIndices and enableItemsByIndices method.