Customization

8 Jun 20175 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">
       <ej-listbox [dataSource]="data" [fields]="fieldList" [showRoundedCorner]="showroundedcorner"> </ej-listbox>
    </div>

TS

export class AppComponent {
    data:array;
    fieldList:object;
    value:string;
    showroundedcorner: boolean;
    constructor() {
    this.data=[
        { empid: "cr1", text: "Dodge Avenger", value: "Dodge Avenger" },
        { empid: "cr2", text: "Chrysler 200", value: "Chrysler 200" },
        { empid: "cr3", text: "Ford Focus", value: "Ford Focus" },
        { empid: "cr4", text: "Ford Taurus", value: "Ford Taurus" },
        { empid: "cr5", text: "Dazzler", value: "Dazzler" },
        { empid: "cr6", text: "Chevy Spark", value: "Chevy Spark" },
        { empid: "cr7", text: "Chevy Volt", value: "Chevy Volt" },
        { empid: "cr8", text: "Honda Fit", value: "Honda Fit" },
        { empid: "cr9", text: "Honda Crosstour", value: "Honda Crosstour" },
        { empid: "cr10", text: "Acura RL", value: "Acura RL" },
        { empid: "cr11", text: "Hyundai Elantra", value: "Hyundai Elantra" },
        { empid: "cr12", text: "Mazda3", value: "Mazda3" }
    ];
    this.fieldList={dataSource:this.data,text:"text",value:"value"};
    this.showroundedcorner = true;
    }
}

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">
       <ej-listbox [dataSource]="data" [fields]="fieldList" [enabled]="enabled"> </ej-listbox>
    </div>

TS

export class AppComponent {
    data:array;
    fieldList:object;
    value:string;
    enabled: boolean;
    constructor() {
    this.data=[
        { empid: "cr1", text: "Dodge Avenger", value: "Dodge Avenger" },
        { empid: "cr2", text: "Chrysler 200", value: "Chrysler 200" },
        { empid: "cr3", text: "Ford Focus", value: "Ford Focus" },
        { empid: "cr4", text: "Ford Taurus", value: "Ford Taurus" },
        { empid: "cr5", text: "Dazzler", value: "Dazzler" },
        { empid: "cr6", text: "Chevy Spark", value: "Chevy Spark" },
        { empid: "cr7", text: "Chevy Volt", value: "Chevy Volt" },
        { empid: "cr8", text: "Honda Fit", value: "Honda Fit" },
        { empid: "cr9", text: "Honda Crosstour", value: "Honda Crosstour" },
        { empid: "cr10", text: "Acura RL", value: "Acura RL" },
        { empid: "cr11", text: "Hyundai Elantra", value: "Hyundai Elantra" },
        { empid: "cr12", text: "Mazda3", value: "Mazda3" }
    ];
    this.fieldList={dataSource:this.data,text:"text",value:"value"};
    this.enabled = false;
    }
}

NOTE

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