Data-binding

10 Aug 20174 minutes to read

The ListBox is populated with the node information taken from a data source. The ListBox supports binding data sources containing hierarchical data and supports Object data, Remote data, XML Data, SQL Data and LinqToSql Data, for retrieving data from a specified data source.

Data fields and configuration

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

Property Table for ASP.NET MVC ListBox

Name	Description
Datasource	The data source contains the list of data for generating the ListBox items
Query	It specifies the query to retrieve the data from online server
ListBoxFields	It specifies the mapping fields for the data items of the ListBox
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
ImageUrl	It’s defines the imageURL for the image location
ImageAttributes	It’s defines the image attributes such as height, width, styles and so on
SpriteCssClass	It defines the sprite CSS for the image tag.
HtmlAttributes	It defines the HTML attributes such as id, class, styles for the item
Selected	It defines the tag value to be selected initially
ToolTipText	It specifies the Tooltip text of the tag
Category	It specifies the category of the tag
TableName	It defines the table name for tag value or display text while render with remote data

Local data

ListBox provides data binding support. Thus, you can bind the data from JSON Data source. To achieve this, map the corresponding fields with their column names.

And also, provide support to add and customize the list item by using appropriate data fields.

The following code explains you the details of data binding with ListBox.

1. Add the below code in your page to render the ListBox with local data.

      
    // Add the following code in View page to configure ListBox widget
    <div id="control">
        <h5 class="ctrllabel">
            Select a skill 
        </h5> 
        @Html.EJ().ListBox("listBoxSample").Width("240").Datasource((IEnumerable<SkillSet>)ViewBag.datasource).ListBoxFields(df=>
        df.Text("text"))
    </div>

      
    // Add the following code to add list items in the controller page
    public class SkillSet 
    {   
        public string text { get; set; } 
    }  
    public ActionResult Index()  
    {  
        List<SkillSet> skill = new List<SkillSet>(); 
        skill.Add(new SkillSet { text = "ASP.NET" });
        skill.Add(new SkillSet { text = "ActionScript" });
        skill.Add(new SkillSet { text = "Basic" });  
        skill.Add(new SkillSet { text = "C++" });  
        skill.Add(new SkillSet { text = "C#" });  
        skill.Add(new SkillSet { text = "dBase" });
        skill.Add(new SkillSet { text = "Delphi" }); 
        skill.Add(new SkillSet { text = "ESPOL" }); 
        skill.Add(new SkillSet { text = "F#" });   
        skill.Add(new SkillSet { text = "FoxPro" }); 
        skill.Add(new SkillSet { text = "Java" });  
        skill.Add(new SkillSet { text = "J#" });   
        skill.Add(new SkillSet { text = "Lisp" }); 
        skill.Add(new SkillSet { text = "Logo" }); 
        skill.Add(new SkillSet { text = "PHP" });   
        ViewBag.datasource = skill;    
        return View();
    }

2. Output of the above steps

Remote data

You can bind the data for the ListBox from remote that can fetch the data from remote web service. You can pass the query string to filter the data that helps to avoid the extensive properties look up by using Query options.

The following steps explains you the details of data binding from remote.

1. Add the below code in your page to render the ListBox with remote data

    // Add the following code in View page to configure ListBox widget
   
    <div class="control">
   
        <div class="ctrllabel">
   
            Select a customer
   
        </div>
   
        @Html.EJ().ListBox("listBoxSample").Datasource(listBoxDataSource => listBoxDataSource.URL("http://mvc.syncfusion.com/Services/Northwnd.svc/")).Query("ej.Query().from('Customers').take(10)").ListBoxFields(f => f.Text("CustomerID"))
   
    </div>

2. Output of the above steps.