This topic provides conceptual information for the igCombo™ control including information regarding: features, binding to data sources, requirements, and templates.
This topic contains the following sections:
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:
igGrid/igDataSource Architecture Overview, The Data Source Control section
External Resources
You need to first read the following article: Working with jQuery Widgets
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 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.
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.
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.
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.
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.
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.
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.
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.
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: |
| Shared Ignite UI for jQuery JavaScript resources | There are several shared JavaScript resources in Ignite UI for jQuery that most widgets use:
|
| igDataSource JavaScript Resources | The igCombo uses the igDataSource internally for data operations:
|
| igTemplating JavaScript Resources | The igCombo uses the igTemplating internally for the rendering of items.
|
| igCombo JavaScript resources | The JavaScript file for the igCombo widget:
|
| 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. |
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:
|
| Data types |
|
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.
|
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.
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.
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. |
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 |
Following are some other topics you may find useful.
View on GitHub