Data Binding

28 Jun 201724 minutes to read

To populate data in the DropDownList widget, define dataSource property with associated fields. In DropDownList, can bind either local array or OData, WebApi and other RESTful services.

Fields

The below listed fields are the data collection fields which maps fields for the data items of the DropDownList.

Properties
Description
dataSource
The data source contains the list of data for generating the popup list items.
query
It specifies the query to retrieve the data from the online server.
fields
It specifies the mapping fields for the data items of the DropDownList widget.
id
It specifies the ID of the tag.
text
It specifies the text content of the tag.
value
It specifies the value of the tag.
groupBy
It is used to categorize the items based on a specific field.
imageUrl
It defines the image location.
imageAttributes
It defines the image attributes such as height, width, styles, etc.
spriteCssClass
It defines the sprite CSS for the image tag.
htmlAttributes
It defines the HTML attributes such as class and styles for an item.
selected
This field defines the tag value to be selected initially. Corresponding field mapped has Boolean values to select the list items on control creation. The data with value true in this field is selected automatically when the control is initialized with checkbox.
tableName
It defines the table name for the tag value or displays text while rendering remote data.

Local Data

Define a JSON array and initialize the widget with dataSource property. Specify the column names in the fields property.

NOTE

The columns are bounded automatically when the fields are specified with the default names like id, text, etc…

  • HTML
    • <input type="text" id="dropdown1" ej-dropdownlist e-width="200" e-datasource="data" e-fields-text="text" e-fields-value="country" e-fields-groupby="role">
  • JAVASCRIPT
    • var empList = [{
            text: "Erik Linden",
            role: "Representative",
            country: "England"
        }, {
            text: "John Linden",
            role: "Representative",
            country: "Norway"
        }, {
            text: "Louis",
            role: "Representative",
            country: "Australia"
        }, {
            text: "Lawrence",
            role: "Representative",
            country: "India"
        }];
        angular.module('dropdownlistApp', ['ejangular'])
        .controller('dropdownlistCtrl', function ($scope) {
            $scope.data = empList;
        });

    The JSON array to the dataSource property can also be provided as an instance of the ej.DataManager. When the JSON array is passed as an instance of ej.DataManager, the ej.JsonAdaptor will be used to manipulate the DropDownList data source. The following code explains this behavior,

  • HTML
    • <input type="text" id="dropdown1" ej-dropdownlist e-datasource="data" />
  • JAVASCRIPT
    • var items = [{
            text: "ListItem 1",
            value: "item1"
        }, {
            text: "ListItem 2",
            value: "item2"
        }, {
            text: "ListItem 3",
            value: "item3"
        }, {
            text: "ListItem 4",
            value: "item4"
        }, {
            text: "ListItem 5",
            value: "item5"
        }];

        angular.module('dropdownlistApp', ['ejangular'])
        .controller('dropdownlistCtrl', function ($scope) {
            $scope.data = ej.DataManager(items);
        });

    Binding Remote Data Service

    To bind remote data to the DropDownList, assign a service data as an instance of ejDataManager to the dataSource property.

    OData

    OData is a standardized protocol for creating and consuming data. Provide the OData service URL directly to the “ej.DataManager” class and then you can assign it to DropDownList “dataSource”.

  • HTML
    • <input type="text" id="dropdown1" ej-dropdownlist e-datasource="data" e-fields-text="ShipCountry" e-fields-value="OrderID" />
  • JAVASCRIPT
    • var dataManager = ej.DataManager("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders");
    angular.module('dropdownlistApp', ['ejangular'])
    .controller('dropdownlistCtrl', function ($scope) {
        $scope.data = dataManager;
    });

    OData Version 4

    The OData v4 is an improved version of OData protocols and the Data Manager can also retrieve and consume data from ODatav4 services.

    By using URL property of “ej.DataManager” bind OData Version 4 Service link and specify adaptor as ej.ODataV4Adaptor.

  • HTML
    • <input type="text" id="dropdown1" ej-dropdownlist e-datasource="data" e-fields-text="RegionDescription" e-fields-value="RegionID" />
  • JAVASCRIPT
    • var dataManager = ej.DataManager({
            url: "http://services.odata.org/V4/Northwind/Northwind.svc/Regions/",
            adaptor: new ej.ODataV4Adaptor()
        });
        angular.module('dropdownlistApp', ['ejangular'])
        .controller('dropdownlistCtrl', function ($scope) {
            $scope.data = dataManager;
        });

    NOTE

    Events associated with remote data bind is listed here.

    WebAPI Binding

    Using ej.WebApiAdaptor, bind WebApi service’s data to DropDownList. The data from WebApi service must be returned as an object that has property “Items” with its value as data source and another property “Count” with its value as dataSource’s total records count.

  • HTML
    • <input type="text" id="dropdown1" ej-dropdownlist e-datasource="data" e-fields-text="CustomerID" e-fields-value="CustomerID" />
  • JAVASCRIPT
    • var dataManager = ej.DataManager({
        url: "/api/Orders",
        adaptor: new ej.WebApiAdaptor()
    });
    angular.module('dropdownlistApp', ['ejangular'])
        .controller('dropdownlistCtrl', function ($scope) {
            $scope.data = dataManager;
    });
  • C#
    • public class OrdersController : ApiController
    {
        // GET api/orders
        NorthwindDataContext db = new NorthwindDataContext();
        public PageResult<Order> Get(ODataQueryOptions opts)
        {
            List<Order> ord = db.Orders.ToList();

            return new PageResult<Order>(ord as IEnumerable<Order>, null, ord.Count);
        }

    }

    ASP.NET Web Method Binding

    The data can retrieve data from ASP.NET Web methods by making use of the WebMethod Adaptor of ejDataManager.

    The WebMethod Adaptor is used to bind data source from remote services and code behind methods.
    By using “WebMethodAdaptor” we can bind data from WebService to the DropDownList control and also we need to include “ScriptService” Attribute to WebService in order to enable request from client-side.

  • HTML
    • <span> Please select... </span>
<input type="text" id="dropdown1" ej-dropdownlist e-datasource="dataList" e-query="queries" e-fields-text="Name" e-fields-value="Country" />
  • C#
    • [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        public object Get()
        {

            List<Employee> EmpData = new List<Employee>();
            EmpData.Add(new Employee
            {
                Name = "Erik Linden",
                Role = "Executive"
                
            });
            EmpData.Add(new Employee
            {
                Name = "John Linden",
                Role = "Representative"
                
            });
            EmpData.Add(new Employee
            {
                Name = "Louis",
                Role = "Representative"
                
            });
            EmpData.Add(new Employee
            {
                Name = "Lawrence",
                Role = "Executive"
                
            });
            dynamic count = EmpData.Count;
            return new
            {
                result = EmpData,
                count = count
            };

        }
        public class Employee
        {
            public string Name { get; set; }
            public string Role { get; set; }
            
        }
    }
  • JAVASCRIPT
    • <script type="text/javascript">
        var data = ej.DataManager({
            url: "WebService1.asmx/Get",
            adaptor: new ej.WebMethodAdaptor()
        });
        var query = ej.Query().requiresCount();
        angular.module('dropdownlistApp', ['ejangular'])
        .controller('dropdownlistCtrl', function ($scope) {
            $scope.dataList = data;
            $scope.queries= query;
        });
    </script>

    Use the above code example to use WebMethod adaptor and bind the data to the DropDownList.

    MVC controller Action Binding

    The data can retrieve from MVC controller. This can be achieved by using the UrlAdaptor of ej.DataManager.

    Defines the List of Employee Data and converted into JSON object.

  • C#
    • using System.Web.Script.Serialization;
    public partial class DropdownlistController: Controller
    {
        public ActionResult DropdownlistFeatures()
        {
            return View();
         } 
        public class Employee
        {
            public string Name { get; set; }
            public string Role { get; set; }
        }
        public JsonResult getData()
        {
            List<Employee> EmpData = new List<Employee>();
            EmpData.Add(new Employee
            {
                Name = "Erik Linden",
                Role = "Executive"
            });
            EmpData.Add(new Employee
            {
                Name = "John Linden",
                Role = "Representative"
            });
            EmpData.Add(new Employee
            {
                Name = "Louis",
                Role = "Representative"
            });
            EmpData.Add(new Employee
            {
                Name = "Lawrence",
                Role = "Executive"
            });
            var jsonSerialiser = new JavaScriptSerializer();
            return Json(jsonSerialiser.Serialize(EmpData));
        }
    }

    In client side, specify the URL of Data to url property and specify the type of Adaptor in adaptor property of DataManager and initialize the DropDownList with dataSource property. Specify the column names in the fields property.

  • JAVASCRIPT
    • <div class="ctrllabel"> Select an Employee</div>
<input type="text" id="dropdown1" ej-dropdownlist e-datasource="data" e-fields-text="Name" e-fields-value="Role" />

<script>
    
    var dataManager = ej.DataManager({
        url: "/Dropdownlist/getData",
        adaptor: new ej.UrlAdaptor()
    });
    angular.module('dropdownlistApp', ['ejangular'])
        .controller('dropdownlistCtrl', function ($scope) {
            $scope.data = dataManager;
        });

</script>

    Other Restful web services

    The Custom Adaptor concept of “ej.DataManager” allows to customize or generate your own adaptor which is used to process “query” and “result” data.
    When using remote data binding, the adaptor of “ej.DataManager” plays vital role in processing queries to make them suitable to sends along with data request and also process the response data from the server.

  • HTML
    • <input type="text" id="dropdown1" ej-dropdownlist e-datasource="data" e-fields-text="FirstName" e-fields-value="LastName" />
  • JAVASCRIPT
    • var customAdaptor = new ej.Adaptor().extend({
    insert: function (dm, data) {
        return dm.dataSource.json.push(data);
    },
    processQuery: ej.JsonAdaptor.prototype.processQuery
    // reused process query from json adaptor
});

window.dropdownData = [{
    FirstName: "John",
    LastName: "Abraham"
}, {
    FirstName: "Ben",
    LastName: "Nick"
}, {
    FirstName: "Andrew",
    LastName: "Clarke"
}];

var dataManager = new ej.DataManager(window.dropdownData);

// assigning custom adaptor to datamanager
dataManager.adaptor = new customAdaptor();

// insert from custom adaptor usage
dataManager.insert({
    FirstName: "Joel",
    LastName: "Nick"
});
angular.module('dropdownlistApp', ['ejangular'])
.controller('dropdownlistCtrl', function ($scope) {
    $scope.data = dataManager;
});

    Virtual Scrolling

    To improve the performance when displaying large data set, you can use “allowVirtualScrolling” and virtualScrollMode property. This retrieves only a fixed amount of list items and loads remaining data on scrolling. The items will be fetched via AJAX request.

    This supports two modes of virtualization. They are,

    • Normal Mode
    • Continuous Mode

    IMPORTANT

    1. Sorting and Grouping is not supported with Virtual Scrolling
    2. “virtualScrollMode” property accepts both the string and ej.VirtualScrollMode enum value.

    Normal Mode

    It loads the data on scrolling the list of items. This can be achieved by setting normal value to the “virtualScrollMode” property.

  • HTML
    • <input type="text" id="dropdown1" ej-dropdownlist e-datasource="data" e-fields-text="ShipName" e-fields-value="ShipCountry" e-itemscount="7" e-allowvirtualscrolling="true" e-virtualscrollmode="mode">
  • JAVASCRIPT
    • var dataManager = ej.DataManager({
    url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders"
});

angular.module('dropdownlistApp', ['ejangular'])
.controller('dropdownlistCtrl', function ($scope) {
    $scope.data = dataManager;
    $scope.mode = ej.VirtualScrollMode.Normal;
});

    Continuous Mode

    It loads the set of items when the scroller reaches at the end. This behaves like infinity scrolling. So when scroll reaches the end, it will fetch the remaining set of items and bind with your DropDownList. This can be achieved by setting continuous value to the “virtualScrollMode” property.

    NOTE

    In both modes, set of items will be fetched based on the count specified in the itemsCount property and next set of items will be loaded on scrolling.

  • HTML
    • <input type="text" id="dropdown1" ej-dropdownlist e-datasource="data" e-fields-text="ShipName" e-fields-value="ShipCountry" e-itemscount="7" e-allowvirtualscrolling="true" e-virtualscrollmode="mode">
  • JAVASCRIPT
    • var dataManager = ej.DataManager({
    url: "http://mvc.syncfusion.com/services/Northwnd.svc/Orders"
});

angular.module('dropdownlistApp', ['ejangular'])
.controller('dropdownlistCtrl', function ($scope) {
    $scope.data = dataManager;
    $scope.mode = ej.VirtualScrollMode.Continuous;
});