This topic explains how to configure auto-suggest and different filtering options in the igCombo™ control.
This topic contains the following sections:
The table bellows lists the background you need for fully understanding the information in this topic.
Concepts
You need to be familiar with the following concepts:
Topics
You need to first read the following topics:
The table below lists the configurable behaviors of the igCombo control.
| Configurable behavior | Behavior details | Configuration properties |
|---|---|---|
| Remote filtering with OData | OData provides a way to filter the combo when the data source has a very large amount of records. The igCombo control internally handles sending the proper requests for filtered results from the service. | |
| Remote filtering with the ASP.NET MVC | The Ignite UI for MVC Combo provides the API to setup server-side filtering when binding to collections of business objects. |
|
The igCombo control can be bound to an OData service. Because the OData protocol supports filtering, the igCombo can internally handle the request parameters necessary to handle the filtering for Auto-Suggest from an OData service. If your application requires the combo to suggest from a large list of options, using server-side filtering with OData can help avoid having to download a large amount of data that must be bound locally.
The table below maps the desired configurations to property settings. The properties are accessed through the igCombo options.
| In order to… | Use this property: | And set it to… |
|---|---|---|
| Configure remote filtering with OData |
dataSource filteringType responseDataKey valueKey textKey |
string - OData service URL remote d.results string - unique key for item in list string - field to display in list |
For detailed information about these properties, refer to their listing in the property reference section:
igCombo OptionsThis example demonstrates how to configure the igCombo control for remote filtering with an OData service using the JSONP format.
To complete the procedure, you need the following:
Following is a conceptual overview of the process:
Enable remote filtering.
Set the filteringType option to ‘remote’ in order to instruct the igCombo control to send filtering parameters to the server.
In HTML:
filteringType: "remote"
In ASPX:
FilteringType(ComboFilteringType.Remote)
Configure the data source
Set the dataSource option to the URL of the OData service. In the case of the Ignite UI for jQuery OData service, JSONP is used to avoid cross-domain restrictions of the browser. This is format is requested by passing a callback parameter in the OData request URI.
In HTML:
dataSource: "http://igniteui.com/api/products?callback=?"
In ASPX:
DataSource("http://igniteui.com/api/products?callback=?")
Configure the response data key
The data is returned from OData in a specific schema. If you are accessing an OData v1 service, this key is typically ‘d’. The Ignite UI for jQuery service is OData v2 and the response key is ‘d.results’.
In HTML:
responseDataKey: "d.results"
In ASPX:
ResponseDataKey("d.results")
Configure the value key.
Setting the value key tells the igCombo control which field provides unique value for each dropdown item. This value varies and is dependent upon the fields of data to which the igCombo control is bound.
In HTML:
valueKey: "ID"
In ASPX:
ValueKey("ID")
Configure the text key.
Setting the text key tells the igCombo control which field provides text for each dropdown item. This value varies and is dependent upon the fields of data to which the igCombo control is bound.
In HTML:
textKey: "ProductName"
In ASPX:
TextKey("ProductName")
The following listing is the full code used in this example to configure list filtering with OData.
In HTML:
$("#comboTarget").igCombo({
filteringType: "remote",
responseDataKey: "d.results",
valueKey: "ID",
textKey: "ProductName",
dataSource: "http://igniteui.com/api/products?callback=?"
});
In ASPX:
<%= Html.
Infragistics().
Combo().
ID("comboTarget").
FilteringType(ComboFilteringType.Remote).
DataSource("http://igniteui.com/api/products?callback=?").
ResponseDataKey("d.results").
ValueKey("ID").
TextKey("ProductName").
Render()
%>
The Ignite UI for MVC Combo primarily functions to render the necessary jQuery and HTML on the client while being able to configure the behaviors in C# or Visual Basic.NET.
The other part of the Ignite UI for MVC is to facilitate remote operations to the server. This is the case with igCombo control where you can decorate an ActionResult method with the ComboDataSourceAction attribute and the helper can facilitate the server-side querying of the data source and return the appropriate data to the client.
The table below maps the desired configuration to property settings. The properties are accessed through [path to the properties].
| In order to… | Use this property: | And set it to… |
|---|---|---|
| Configure remote filtering with the Ignite UI for MVC helper |
DataSource DataSourceUrl FilteringType FilterExprUrlKey ComboDataSourceAction |
IQueryable object string URL to ComboDataSourceAction remote filter Attribute used to decorate filtering request ActionResult method |
For detailed information about these properties, refer to their listing in the property reference section:
This example shows how to enable remote filtering with the Ignite UI for MVC. In this configuration, and action method is defined for data filtering operations. The igCombo control is bound to data on the server and when a filtering operation occurs on the client, the request for filtered data is sent to the action method.
To complete the procedure, you need the following:
Infragistics.Web.Mvc.dll assembly referenced in your projectCombo control bound to data through the Ignite UI for MVCFollowing is a conceptual overview of the process:
Configure server requests to be handled internally by the combo.
In order to have the requests from the server handled internally, a ComboDataSource needs to be defined and configured in the controller on the server. The ComboDataSourceAction is an attribute that can be applied to an ActionResult configured on your controller. When the ActionResult is configured with the attribute and the igCombo is provided with the URL to the controller action, requests to the server are handled internally by the combo. The igCombo constructs a URL with query parameters that are directed to this action on the server. Once the action receives the request, additional logic is performed by the ComboDataSourceAction to filter the IQueryable data source object and return the filtered JSON values to the client.
In C#:
[ComboDataSourceAction]
public ActionResult ComboData()
{
return View(this.GetColors());
}
You can see here that the same call to the data is made without any special filtering logic required.
Configure remote filtering.
Finally, the ComboDataSourceAction requires some properties set. The DataSourceUrl points to the ActionResult method name. Also, the FilterExprUrlKey should be set to "filter" which is the URL parameter required by the ComboDataSourceAction. This string is passed as a parameter in the request URL to send the filtering expression to the server. The reason the FilterExprUrlKey is set to "filter" when using the ASP.NET MVC Helper is because the logic of the ComboDataSourceAction specifically looks for "filter" in the request URL query parameters to extract the filtering expression information.
In C#:
comboViewModel.DataSourceUrl = Url.Action("combodata");
comboViewModel.FilteringType = ComboFilteringType.Remote;
comboViewModel.FilterExprUrlKey = "filter";
Following are some other topics you may find useful.
View on GitHub