Version

igCombo Overview

Topic Overview

Purpose

This topic provides conceptual information for the igCombo™ control including information regarding: features, binding to data sources, requirements, and templates.

In this topic

This topic contains the following sections:

Required background

The table below lists the required background you need for fully understanding the information in this topic.

Topics

You need to first read the following topics:

External Resources

You need to first read the following article: Working with jQuery Widgets

Main Features

Features overview

The table below briefly explains the main features of the igCombo.

Feature Description
Virtualization The igCombo control can re-use HTML elements when binding large amounts of data to improve performance.
Auto-complete Enabling this allows the igCombo control to automatically fill in the remaining input text based off of the first match in the list of choices.
Auto-suggest The igCombo control can filter the list of choices based of the text entered in the input box.
Multiple selection Users can select single items or multiple items and can perform multiple selections using checkboxes.
Keyboard navigation Users can easily and quickly navigate through items or change the selected/highlighted items thanks to the rich keyboard navigation that igCombo supports.
Load-on-Demand The igCombo control supports Load-on-Demand feature. Enabling Load-on-Demand significantly reduces the bandwidth and processing overhead on both the server and the client.
Highlighting When a user type a text in igCombo input the matching results in the dropdown items are displayed with a visual highlighting of the matching text.
Ignite UI for MVC You can use managed .NET code to configure the Ignite UI for MVC Combo control.

Virtualization

Virtualization allows the igCombo control to bind to hundreds of items while keeping the memory profile concise. The combo creates only the amount of HTML elements necessary to fill the scrollable area of the combo and then reuses those elements as the user scrolls through the data.

Related Topics

Related Sample

Auto-Complete

The auto-complete feature helps users select content that is already in a list of choices. After the first character is entered, the combo prefills the remaining text of the first matching item in the list.

Related Topics

Auto-suggest

To help the user find a specific value in the dropdown list, enable the Auto-Suggest feature. The dropdown list filters based off of the text entered in the input box. Different filtering conditions are available that include ‘contains’ or ‘startsWith’ operators.

Related Topics

Multiple selection

The igCombo control supports single and multiple selection. With multiple selection enabled the user can select multiple items from the dropdown list. During data entry users can also use a comma (,) to select multiple values while typing in the input box.

Related Topics

Related Sample

Load-on-Demand

If Load-on-Demand is enabled, the user should first be able to see a scrollbar in the drop-down container, and the first page of list items. If the user scrolls to the end of the list, the next page of items are fetched and appended at the bottom of the list through asynchronous callbacks.

Related Topics

Related Sample

Keyboard navigation

The combo provides very important accessibility feature, which is the ability to navigate by using the keyboard. This feature improves the User Experience by saving time and allowing the end-user to easily and quickly navigate through dropdown items.

Related Topics

Related Sample

Ignite UI for MVC

You can use the ASP.NET MVC Helper to use managed code languages to configure the Ignite UI for MVC Combo control. You can create re-usable Views or ViewModels in your ASP.NET MVC applications to interface with the combo. You can also bind to an IQueryable object in ASP.NET and the helper will generate the JSON data for the igCombo control to use on the client.

Related Topics

Related Sample

Minimum Requirements

Introduction

The igCombo control is a jQuery UI Widget and therefore is dependent upon the jQuery core and jQuery UI JavaScript libraries. In addition, there are several Ignite UI for jQuery™ JavaScript resources that the igCombo control uses for shared functionality and data binding. These JavaScript references are required whether the igCombo control is used in a pure JavaScript context or in ASP.NET MVC. When using the igCombo in ASP.NET MVC, the Infragistics.Web.Mvc assembly is required to configure the igCombo with .NET languages.

Requirements

The table below lists the requirements for the igCombo control.

Requirement Description
jQuery and jQuery UI JavaScript resources Ignite UI for jQuery is built on top of these frameworks:
  • jQuery (The required jQuery version for igCombo is 1.8.3)
  • jQuery UI (The required jQuery UI version for igCombo is 1.9.2)
Shared Ignite UI for jQuery JavaScript resources There are several shared JavaScript resources in Ignite UI for jQuery that most widgets use:
  • infragistics.util.js
  • infragistics.util.jquery.js
igDataSource JavaScript Resources The igCombo uses the igDataSource internally for data operations:
  • infragistics.dataSource.js
igTemplating JavaScript Resources The igCombo uses the igTemplating internally for the rendering of items.
  • infragistics.templating.js
igCombo JavaScript resources The JavaScript file for the igCombo widget:
  • infragistics.ui.combo.js
IG Theme This theme contains custom visual styles created especially for Ignite UI for jQuery
Base Theme The base theme contains styles that primarily define the form and function for each widget.

Binding to Data Sources

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

Requirement category Requirements listing
Data structure Can be any of the following:
  • Well-formed JSON or XML supplied locally or from a web server
  • JavaScript array
  • HTML SELECT element
  • KnockoutJS
  • JSONP
  • IQueryable in ASP.NET MVC
Data types
  • String
  • Number
  • Boolean
  • Date

Supported data sources

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

Data Source Binding
igDataSource The igDataSource is used internally by the igCombo control to manage data operations for the control. The data source accepts many different types of local and remote data.
Binding igCombo to Data You can point to a SELECT element in the jQuery selector for igCombo control and it will convert the SELECT element to the igCombo control automatically inheriting the options of the base element.
IQueryable In ASP.NET MVC, supply an IQueryable as the igCombo’s datasource and the collection is serialized to JSON and returned with the View for use in the browser.
KnockoutJS The support for the Knockout library in the igCombo control is intended to provide easy means for developers to use the Knockout library and its declarative syntax to instantiate and configure combo controls.

Binding to data sources 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 data formats that are supported. The one main exception to using this option is when the igCombo is instantiated using a SELECT element. The igCombo inherits the data and options of its base SELECT element in this case. In ASP.NET MVC, supplying an IQueryable to the Ignite UI for MVC Helper 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.

Template Use and Selection

Introduction

There are several places where a template can be used to customize the layout of the igCombo control. A header and/or footer can appended to the top and/or bottom of the dropdown list respectively to provide greater context to the user’s choices. In addition, an item template can be defined which allows each choice to have multiple pieces of information shown in a customized layout.

Template use chart

The table bellows lists the igCombo templates and their possible uses.

Template Use with igCombo
Header By setting the headerTemplate option, you can define custom HTML which displays at the top of the dropdown list.
Footer Setting the footerTemplate option appends custom HTML at the bottom of the dropdown list. If the list is large enough to require a scrollbar, the footer template is always shown below the scrollable area.
Item You can set custom HTML to the itemTemplate option and each bound item uses the template to display its data. Images and custom layouts can be displayed for each item.

Template selection chart

The table below maps some of your possible needs to the appropriate templates.

If you need to Then use this template:
Display a header at the top of the dropdown list headerTemplate
Display a footer at the bottom of the dropdown list footerTemplate
Display an image or icon for each item choice itemTemplate
Show multiple pieces of information for each item in a custom layout itemTemplate

Related Topics

Following are some other topics you may find useful.

View on GitHub