Data Binding

To populate data in the DropDownList control, define DataSource property with associated fields. You can bind any list data and other remote services in the DropDownList.

Fields

The following properties provides you a way to bind either local or remote data to the DropDownList control.

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 control.
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.
Category
It is used to categorize the items based on a specific field. The value mapped to this field must be able to group the popup items.
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 to add a prefix icon to all popup items.
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 List data and initialize the control 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…

@model MVCApplication.Controllers.HomeController
        
        @Html.EJ().DropDownList("DropDownList1").Datasource((IEnumerable<Employee>)ViewData["LocalDataSource"]).DropDownListFields(Df => Df.Text("Text").Value("Country").Category("Role").ImageUrl("Image").ImageAttributes("ImageAttr"))
.ImageId {
        	margin: 0;
        	padding: 3px 10px 3px 3px;
        	border: 0 none;
        	width: 60px;
        	height: 60px;
        	float: none;
    	}
public ActionResult Index()
        {
            List<Employee> Data = new List<Employee>();
            Data.Add(new Employee
            {
                Text = "Erik Linden",
                Role = "Executive",
                Country = "England",
                Image = "../Content/Employees/3.png",
                ImageAttr = "class='ImageId'"
            });
            Data.Add(new Employee
            {
                Text = "John Linden",
                Role = "Representative",
                Country = "Norway",
                Image = "../Content/Employees/6.png",
                ImageAttr = "class='ImageId'"
            });
            Data.Add(new Employee
            {
                Text = "Louis",
                Role = "Representative",
                Country = "Australia",
                Image = "../Content/Employees/7.png",
                ImageAttr = "class='ImageId'"
            });
            Data.Add(new Employee
            {
                Text = "Lawrence",
                Role = "Executive",
                Country = "India",
                Image = "../Content/Employees/8.png",
                ImageAttr = "class='ImageId'"
            });
            ViewData["LocalDataSource"] = Data;
            return View();
        }
        public class Employee
        {
            public string Text { get; set; }
            public string Role { get; set; }
            public string Country { get; set; }
            public string Image { get; set; }
            public string ImageAttr { get; set; }
        }

NOTE

Images for this sample are available in (installed location)\Syncfusion\Essential Studio\17.1.0.32\JavaScript\samples\web\themes\images

SQL Data Binding

Fetch the Data from SQL data source and initialize the control with DataSource property. Specify the column names in the Fields property.

@Html.EJ().DropDownList("selectEmployee").Datasource((IEnumerable<Object>)ViewBag.Data).DropDownListFields(df => df.ID("Id").Text("Name").Value("Designation")).Width("150px")
public ActionResult DropdownlistFeatures()
        {
            List<Employee> data = new List<Employee>();
            SqlConnection con = new SqlConnection(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\SampleDB.mdf;Integrated Security=True");
            using (con)
            {
                con.Open();
                SqlDataReader myReader = null;
                SqlCommand myCommand = new SqlCommand("select * From [Table]",
                                                         con);
                myReader = myCommand.ExecuteReader();
                if (myReader.Read())
                {
                    
                        data.Add(new Employee(myReader["Name"].ToString(), myReader["Designation"].ToString()));
                    
                }
                con.Close();
                ViewBag.Data = data;
                
            }
            return View();
         }
        public class Employee
        {
            public string Name { get; set; }
            public string Designation { get; set; }
            public Employee(string name, string deg)
            {
                this.Name = name;
                this.Designation = deg;
            
            }
        }

LINQ Data Binding

Language-Integrated Query (LINQ) is not only about retrieving data. It is also a powerful tool for transforming data. By using a LINQ query, you can use a source sequence as input and modify it in many ways to create a new output sequence.

Defines model class

  • c#
  • public class Employee
        {
            public string name { set; get; }
            public string employeeID { set; get; }
            public string designation { set; get; }
            public Employee() { }
            public Employee(string name, string id, string designation)
            {
                name = name;
                employeeID = id;
                designation = designation;
            }
            
        }

    In code behind, fetch the data from Employee class and assigned to the DropDownList as follows

  • c#
  • public ActionResult DropdownlistFeatures()
        {
    
            List<Employee> data = new List<Employee>() { };
            data.Add(new Employee("Nancy", "E11011", "Technical Writer"));
            data.Add(new Employee("Angel", "E11012", "Professor"));
            data.Add(new Employee("Daniah", "E11013", "Dancer"));
            data.Add(new Employee("Jenifer", "E11014", "Beautician"));
            data.Add(new Employee("Prince", "E11015", "Developer"));
    
            var db = from result in data
                        select result;
    
            ViewBag.dataSource = db.ToList();
            return View();
        }
  • html
  • @Html.EJ().DropDownList("selectCar").Datasource((IEnumerable<Employee>)ViewBag.datasource).DropDownListFields(df => df.ID("employeeID").Text("name").Value("designation")).WatermarkText("Select a Student").Width("100%")

    XmlDataSource

    XmlDataSource is used to work with XML documents. The following steps explain the details about the data binding from XmlDataSource

    Step 1: Create an XML Data source as follows

  • xml
  • <?xml version="1.0" encoding="utf-8" ?>
        <Students>
        <Student>
            <Name>Abhishek</Name>
            <Location>Dhanbad</Location>
        </Student>
        <Student>
            <Name>Aman</Name>
            <Location>Samastipur</Location>
        </Student>
        <Student>
            <Name>Vicky</Name>
            <Location>Munger</Location>
        </Student>
        <Student>
            <Name>Chandan</Name>
            <Location>Bhagalpur</Location>
        </Student>
        <Student>
            <Name>Ravi</Name>
            <Location>Dhanbad</Location>
        </Student>
        </Students>

    Step 2: Read data from the XML file

  • c#
  • using System.Xml;
        using DataBinding.Models;
        public ActionResult DropdownlistFeatures()
        {
            List<Product> data = new List<Product>();
            
            using (XmlReader reader = XmlReader.Create("D:/Sample/MVC/DataBinding/DataBinding/App_Data/XMLData.xml"))
            {
                while (reader.Read())
                {
                    if (reader.IsStartElement())
                    {
                        switch (reader.Name.ToString())
                        {
                            case "Name":
                                data.Add(new Product { name = reader.ReadString() });
                                break;
                        }
                    }
                }
            }
    
        ViewBag.data = data;
        return View();
        }

    Step 3: Assign the data to the DropDownList’s DataSource property. Specify the column names in the fields property.

  • razor
  • @using DataBinding.Models
        @Html.EJ().DropDownList("selectCar").Datasource((IEnumerable<Product>)ViewBag.data).DropDownListFields(df => df.Text("name").Value("name")).WatermarkText("Select a Student").Width("100%")

    EntityDataSource

    Bind data to the DropDownList through Entity Framework. Please follow the below steps.

    1. Create an entity data model
      Please refer the link for more information

    2. Refer the entity data model to your project and bind the data to the DropDownList

    In code behind, create an object for the Entity mode (NORTHWNDEntities) and fetch the data from the Employees class and stored it to the List.
    Assign the data to the DropDownList’s DataSource property. Specify the column names in the fields property.

  • c#
  • public ActionResult DropdownlistFeatures()
        {
            NORTHWNDEntities sample = new NORTHWNDEntities();
            var dataset = sample.Employees
                        .Select(x => new Employee
                        {
                            EmployeeID = x.EmployeeID,
                            FirstName = x.FirstName                     
                        }).ToList();
            ViewBag.DataSource = dataset;
        }
        public class Employee
        {
            public int EmployeeID { get; set; }
            public string FirstName { get; set; }
        }
  • razor
  • @Html.EJ().DropDownList("selectEmployee").Datasource((IEnumerable<Object>)ViewBag. DataSource).DropDownListFields(df => df.Text("FirstName ").Value("EmployeeID ")).Width("150px")

    AccessDataSource

    The data can also be bound to the DropDownList using OLEDB database as depicted below.

  • razor
  • Html.EJ().DropDownList("selectEmployee").Datasource((IEnumerable<Object>)ViewBag. DataSource).DropDownListFields(df => df.ID("Id").Text("Name").Value("Designation")).Width("150px")

    The server-side code to retrieve and bind the data to DropDownList are as follows. Also, define a class with all the required fields as depicted in the below code example.

  • c#
  • public ActionResult DropdownlistFeatures()
        {            
    
            OleDbConnection conn = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\Database.mdb");
            conn.Open();
            OleDbCommand cmd = new OleDbCommand(" SELECT * from [Employees]", conn);
            OleDbDataReader reader = null;
            List<EmployeeDetails> data = new List<EmployeeDetails>();
            reader = cmd.ExecuteReader();
            while (reader.Read())
            {
                data.Add(new EmployeeDetails(reader["Name"].ToString(), reader["Designation"].ToString()));
                
            }
            conn.Close();
            ViewBag. DataSource = data;
            
    
        }
        public class EmployeeDetails
        {
            public string Name { get; set; }
            public string Designation { get; set; }
            public EmployeeDetails(string name, string deg)
            {
                this.Name = name;
                this.Designation = deg;
    
            }
        }

    LINQ to SQL Data Binding

    The LINQ to SQL can be used as the data source of the DropDownList in which the data model of a relational database is mapped to an object model and allow us to use the LINQ technology to access SQL database.

    To create LINQ to SQL classes
    • Right-click the App_Code folder and then click Add New Item.
    • Under Installed templates, select LINQ to SQL Classes template, type a name for the .dbml file, and then click Add.
    • The Object Relational Designer window is displayed.
    • In Server Explorer, drag the database table into the Object Relational Designer window.
    • The table and its columns are represented as an entity in the designer window.

    In code behind, fetch the data from classes and stored it to the ViewBag as follows

  • c#
  • ViewBag.dataSource = new SampleDataContext().Customers.ToList();
  • html
  • @Html.EJ().DropDownList("customers").Datasource((IEnumerable<Customer>)ViewBag.dataSource).DropDownListFields(df => df.Text("CompanyName").Value("CustomerID")).WatermarkText("Select a Customer").Width("100%")

    Remote data

    To bind remote data to the DropDownList, you can assign a service data as an instance of DataManager to the Datasource property.

    OData

    OData is a standardized protocol for creating and consuming data. You can provide the OData service URL directly to the Datasource URL property.

  • html
  • @Html.EJ().DropDownList("DropDownList1").Datasource(dataSource => dataSource.URL("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders")).DropDownListFields(df=>df.Text("ShipCountry").Value("OrderID"))

    OData Version 4

    For OData Version 4 support ODataV4Adaptor should be used. By using URL property of Datasource, you can bind OData Version 4 Service link and specify Adaptor value as enum AdaptorType.ODataV4Adaptor.

    For further details about OData service please refer the link.

  • html
  • @Html.EJ().DropDownList("DropDownList1").Datasource(dataSource =>dataSource.URL("http://services.odata.org/V4/Northwind/Northwind.svc/Regions/").Adaptor(AdaptorType.ODataV4Adaptor)).DropDownListFields(df => df.Text("RegionDescription").Value("RegionID"))

    NOTE

    Events associated with remote data bind is listed here.

    WebAPI

    Using WebApiAdaptor, you can 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
  • @Html.EJ().DropDownList("DropDownList1").Datasource(dataSource => dataSource.URL("/api/Orders").Adaptor(AdaptorType.WebApiAdaptor)).DropDownListFields(df => df.Text("Name").Value("EmployeeID"))
  • c#
  • public class OrdersController : ApiController
        {
            NorthwindDataContext db = new NorthwindDataContext();
            
            // GET API/<controller>       
            public PageResult<EmployeePhoto> Get(ODataQueryOptions opts)
            {
                List<EmployeePhoto> photos = db.EmployeePhotos.ToList();            
    
                return new PageResult<EmployeePhoto>(photos as IEnumerable<EmployeePhoto>, null, photos.Count);
            }
        }

    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 Syncfusion.JavaScript.VirtualScrollMode enum value.

    Normal Mode

    It loads the data on scrolling the list of items. This can be achieved by setting Syncfusion.JavaScript.VirtualScrollMode.Normal value to the VirtualScrollMode property.

  • html
  • @Html.EJ().DropDownList("DropDownList1").Datasource(dataSource => dataSource.URL("http://mvc.syncfusion.com/services/Northwnd.svc/Orders")).DropDownListFields(df => df.Text("ShipName").Value("ShipCountry")).AllowVirtualScrolling(true).VirtualScrollMode(VirtualScrollMode.Normal).ItemsCount(7)

    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 Syncfusion.JavaScript.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
  • @Html.EJ().DropDownList("DropDownList1").Datasource(dataSource => dataSource.URL("http://mvc.syncfusion.com/services/Northwnd.svc/Orders")).DropDownListFields(df => df.Text("ShipName").Value("ShipCountry")).AllowVirtualScrolling(true).VirtualScrollMode(VirtualScrollMode.Continuous).ItemsCount(7)