Binding igCombo to Data Overview

Topic Overview


This topic discusses the different ways to data bind the igCombo control as well as other details related to data binding.

In this topic

This topic contains the following sections:

Required background

You need to first read the following topics:

Binding igCombo Data – Conceptual Overview

Requirements for binding

The following lists the requirements for binding the igCombo control to data sources grouped by requirement category.

Data structure

Can be any of the following:

  • Well-formed JSON or XML supplied locally or from a web server
  • JavaScript array or HTML TABLE element
  • SELECT element
  • OData services
  • IQueryable<T> in ASP.NET MVC

Data types

  • String
  • Number
  • Boolean
  • Date

Supported data sources

The following lists the supported data sources and some basic specifics for their binding

  • igDataSource: The igDataSource is used internally by the igCombo to manage data operations for the control. The data source accepts many different types of local and remote data.

  • HTML SELECT element: This element is specific to the igCombo control. You can point to this element in the jQuery selector for igCombo and it converts the SELECT element to the igCombo control automatically inheriting the options of the base element.

  • IQueryable<T>: In ASP.NET MVC, supply an IQueryable<T> as the igCombo’s datasource and the collection is serialized to JSON and returned with the View for use in the browser.

Binding to data sources to overview

In most cases, you will use the dataSource or dataSourceUrl options of the igCombo to bind to data. This option provides your data to the igDataSource which can handle the various supported data formats. The one main exception to using this option is when the igCombo is instantiated using a SELECT element. The igCombo will inherit the data and options of its base SELECT element in this case. In ASP.NET MVC, supplying an IQueryable<T> to the Ignite UI for MVC facilitates the serialization of the data from the server and passes it to the client with the View. Once the page is received by the browser, the dataSource option of the igCombo is set for client-side operation.

Class diagram for binding to data sources

The following class diagram demonstrates how data binding works.

Binding igCombo Data – Procedure


The following steps demonstrate how to configure basic options and bind to data using both jQuery and ASP.NET MVC.


Following is a preview of the final result.


To complete the procedure, you need the following:

  • A website and web page on which to add this example
  • The required JavaScript resources and jQuery themes in your website
  • References to the required JavaScript files and CSS files on your web page
  • (ASP.NET MVC) A reference to the Infragistics.Web.Mvc.dll assembly


Following is a conceptual overview of the process:

1. Instantiating the igCombo

2. Binding to data


  1. Instantiate the igCombo.

    a. Define a target element.

    On your web page, define a target HTML element which will serve as the base object for the igCombo and set its ID. This is an optional step for ASP.NET MVC

    In HTML:

     <select id="comboTarget"></select>

    b. Instantiate the igCombo. In jQuery, you can use the document ready JavaScript event to instantiate the combo. In ASP.NET MVC, use the HTML helper to bind to an IQueryable datasource.

    In HTML:

     <script type="text/javascript">
          $(function () {

    In ASPX:

     <%= Html.
  2. Bind to data.

    a. Define the data.

    In jQuery, this example binds to a simple JSON array. This data could be passed as part of the page request or could be returned from a web service. In ASP.NET MVC, this example binds to a collection of Color objects defined in the controller class on the server and returned as the model with the View.

    In HTML:

     var colors = [
          { "Name": "Black" },
          { "Name": "Blue" },
          { "Name": "Brown" },
          { "Name": "Red" },
          { "Name": "White" },
          { "Name": "Yellow" }

    In C#:

     public class DefaultController : Controller
          public ActionResult Index()
             List<Color> colors = new List<Color>();
             return View("default", colors.AsQueryable());

    b. Set the data source.

    Use the dataSource option to supply the data to the combo. In ASP.NET MVC, Use the DataSource method of the helper to bind to the data passed in as part of the Model.

    In HTML:

         dataSource: colors});

    In ASPX:

     <%= Html.
         DataSource(this.Model as IQueryable<System.Drawing.Color>)

    c. Configure the text and value fields.

    Set the textKey and valueKey options of the igCombo. In this simple example, the textKey and valueKey are both set to the same object value of ‘Name’. However, the textKey and valueKey could be set as two different fields. For instance, the valueKey could point to an ID field for each color object.

    In HTML:

         dataSource: colors,    textKey: "Name",
         valueKey: "Name",

    In ASPX:

     <%= Html.
         DataSource(this.Model as IQueryable<System.Drawing.Color>)

    d. (ASP.NET MVC) Call DataBind() and Render().

    When instantiating the Ignite UI for MVC Combo, call the DataBind method to bind to the data and call the Render method last after all other options have been configured. This is the method that renders the HTML and JavaScript necessary to instantiate the igCombo on the client

    In ASPX:

     <%= Html.
         DataSource(this.Model as IQueryable<System.Drawing.Color>).
         Render() %>


Online Combo binding examples

JSON Binding

The combo easily binds to a JavaScript array or JSON data. This sample contains a basic example of client-side binding.

HTML Binding

igCombo can bind directly to an HTML SELECT element.

XML Binding

igCombo supports binding to XML data. This sample shows a basic example of binding to an XML string.

Related Topics

Following are some other topics you may find useful.

View on GitHub