Data binding

Field mapping

The ListBox component has a field property (object) which holds the properties to map with datasource fields. For example, the field object has a text property which is necessary to map with specific field in the datasource to render the items in the ListBox component.

The field object contains the following properties.

Local data

The local data can be an array of JSON objects which is assigned for the datasource property of ListBox component.

Here the employeeId and text are fields with it’s mapped to the id and value fields of object respectively.

  • html
  • <div id="control">
           <ej-listbox [dataSource]="data" [fields]="fieldList"></ej-listbox>
        </div>
  • ts
  • export class AppComponent {
        data:array;
        fieldList:object;
        value:string;
        constructor() {
        this.data=[
            { employeeId: "cr1", text: "Dodge Avenger", value: "Dodge Avenger" },
            { employeeId: "cr2", text: "Chrysler 200", value: "Chrysler 200" },
            { employeeId: "cr3", text: "Ford Focus", value: "Ford Focus" },
            { employeeId: "cr4", text: "Ford Taurus", value: "Ford Taurus" },
            { employeeId: "cr5", text: "Dazzler", value: "Dazzler" },
            { employeeId: "cr6", text: "Chevy Spark", value: "Chevy Spark" },
            { employeeId: "cr7", text: "Chevy Volt", value: "Chevy Volt" },
            { employeeId: "cr8", text: "Honda Fit", value: "Honda Fit" },
            { employeeId: "cr9", text: "Honda Cross tour", value: "Honda Cross tour" },
            { employeeId: "cr10", text: "Hyundai Elantra", value: "Hyundai Elantra" },
            { employeeId: "cr11", text: "Mazda3", value: "Mazda3" }
        ];
        this.fieldList={dataSource:this.data,text:"text",value:"value"};
        }
    }

    FieldSetting Listbox

    Remote data

    OData

    OData is a standardized protocol for creating and consuming the data. You can retrieve data from OData service by using ej.DataManager.

    Here the CustomerID field is mapped with text property of the field object. The queries can be created using ej.Query().

  • html
  • <div id="control">
           <ej-listbox [dataSource]="dataManager" [fields]="fieldList" [query]="query"></ej-listbox>
        </div>
  • ts
  • export class AppComponent {
        fieldList: object;
        query: any;
        dataManager: any;
        constructor() {
            this.dataManager = ej.DataManager({
                //OData service
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
            });
            this.query = ej.Query().from("Customers").take(10);
            this.fieldList = { text: "CustomerID" };       
        }
    }

    Alt text

    WebAPI

    ASP.NET Web API is a Framework for building HTTP services. You can retrieve data from ASP.NET Web API by using ej.DataManager.

  • html
  • <div id="control">
            <ej-listbox [dataSource]="dataManager" [fields]="fieldList"></ej-listbox>
        </div>
  • ts
  • export class AppComponent {
        fieldList: object;
        dataManager: any;
        constructor() {
            this.dataManager = ej.DataManager({
                url: "http://mvc.syncfusion.com/UGService/api/Orders",
                crossDomain: true
            });
            this.fieldList = { text: "CustomerID" };       
        }
    }

    NOTE

    In the above data manager configuration, “crossDomain” must be set to true to access the data from Web API.

    See Also

    Cross domain

    Alt text

    Handling errors

    In remote binding, the server might not return data sometimes due to various reasons. In such cases we need to handle the error properly. We can handle it using the “actionFailure” event.

    See Also

    actionComplete and actionSuccess

  • javascript
  • <div id="control">
             <ej-listbox [dataSource]="dataManager" [fields]="fieldList" [query]="query" (actionFailure)="actionFailure($event)"></ej-listbox>   
        </div>
  • ts
  • export class AppComponent {
        fieldList: object;
        dataManager: any;
        query: any;
        constructor() {
            this.dataManager = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/",
                crossDomain: true
            });
            this.query = ej.Query().from("Customers");
            this.fieldList = { text: "CustomerID" };       
        }
        actionFailure(event) {
             //handle errors
        }
    }