Data binding

Data binding enables you to synchronize the elements with different sources of data.

Field Members

Field is a property that includes the object type. Fields are used to bind the data source and it includes following field members to make binding easier.

List of Field members

Name Description
dataSource datasource receives Essential DataManager object and JSON object.
Query It receives query to retrieve data from the table (query is same as SQL). Example: ej.Query().from("Categories").select("CategoryID,CategoryName").take(3);
tableName It receives table name to execute query on the corresponding table
Id Specifies the id to menu items list
parentId Specifies the parent id of the table.
Text Specifies the text of menu items list
spriteCssClass Specifies the sprite CSS class to “li” item list
linkAttribute Specifies the link attribute to “a” tag in item list
imageAttribute Specifies the image attribute to “img” tag inside items list
htmlAttribute Specifies the HTML attributes to “li” item list
imageUrl Specifies the image URL to “img” tag inside item list.

Local data

To define the local data to the Menu control, map the user-defined JSON data names with its appropriate dataSource column names.

Add the following code in your HTML page.

  • html
  • <ej-menu id="menu" [fields.dataSource]="data" [fields]="fieldsvalues"></ej-menu>
  • html
  • import {Component} from '@angular/core';
        @Component({
                selector: 'sd-home',
                templateUrl: 'app/components/menu/menu.component.html'
                })
        export class MenuComponent {
            data: Array<Object>;
            fieldsvalues: Object;
            constructor() {
            this.data = [
                { id: 1, text: "Products", parentId: null },
                { id: 2, text: "Support", parentId: null },
                { id: 3, text: "Purchase", parentId: null },
                { id: 4, text: "Downloads", parentId: null },
                { id: 5, text: "Company", parentId: null },
                //first level child
                { id: 11, parentId: 1, text: "ASP.NET" },
                { id: 12, parentId: 1, text: "ASP.NET MVC" },
                { id: 13, parentId: 1, text: "Mobile MVC" },
                { id: 14, parentId: 1, text: "Silverlight" },
                { id: 15, parentId: 2, text: "Direct-Trac Support" },
                { id: 16, parentId: 2, text: "Community Forums" },
                { id: 17, parentId: 2, text: "Knowledge Base" },
                { id: 18, parentId: 2, text: "Services" },
                { id: 19, parentId: 4, text: "Evaluation" },
                { id: 20, parentId: 4, text: "Free E-Books" },
                { id: 21, parentId: 4, text: "Metro Studio" },
                { id: 22, parentId: 4, text: "Latest Version" },
                { id: 23, parentId: 5, text: "Technology Resource Portal " },
                { id: 24, parentId: 5, text: "Case Studies" },
                { id: 25, parentId: 5, text: "Bouchers & Datasheets" },
                { id: 26, parentId: 5, text: "FAQ" },
                //second level child
                { id: 27, parentId: 18, text: "Consulting" },
                { id: 28, parentId: 18, text: "Training" }
            ];
            this.fieldsvalues = { parentId: "parentId", id: "id", text: "text" };
            }
        }

    The following screenshot displays the output of the above code.