This topic introduces the Load on Demand feature of the igCombo™ control and explains, with code examples how to configure and use it.
Concepts
Topics
igCombo Overview: This topic provides conceptual information for the igCombo control including information regarding features, binding to data sources, requirements, and templates.
Adding igCombo: This help topic demonstrates how to setup a basic igCombo control and bind it to JSON data on the client and a collection of business object on the server. Both jQuery or ASP.NET MVC environments are covered.
Binding igCombo to Data: This topic discusses the ways to bind the igCombo control to data and provides further details related to data binding.
This topic contains the following sections:
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.
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.
By default, Load-on-Demand is disabled. To enable it, the loadOnDemandSettings.enabled option must be set to true:
In JavaScript:
loadOnDemandSettings: { enabled: true }
or
In ASPX:
Html.Infragistics().Combo().LoadOnDemandSettings(load => load.Enabled(true))
While data are being loaded from the data source the drop-down list appears a loading indicator. After data loading and rendering on the page is finished the loading indicator is removed.
The following table lists the configurable aspects of the igCombo control regarding Load-on-Demand and the related drop-down list paging functionality.
| Configurable aspects | Details | Properties |
|---|---|---|
| Drop-down list paging | Sets the page size of the drop-down list | loadOnDemandSettings.pageSize |
| Drop-down list header | Sets the heading label of the drop-down list through a header template | headerTemplate |
| Drop-down list footer | Sets the heading label of the drop-down list through a header template | footerTemplate |
This example demonstrates how to configure the Load-on-Demand feature for a remote OData data source with a specific page size.
The code instantiates an igCombo control over an already created HTML input tag with id equal to “combo”. On initialization the code sets page size of 25 items for the drop-down list (pageSize: 25). The responseDataKey, responseTotalRecCountKey and dataSource options are assigned values that direct the combo to load the drop-down list by making a query to the specified URL and use d.results.Results and d.results.Count members of the returned JSON object.
The headerTemplate option is assigned a string that represents an HTML code and is rendered at the top of the drop-down list. This is usually single tag possibly formatted with a CSS class as in the example (class=”boxed”) but may be a more complex HTML code.
The footerTemplate option is assigned a string that represents an HTML code and allows some predefined variables to be substituted at run-time, i.e. it acts like a template. The string assigned to that option is processed to substitute variables and rendered at the bottom of the drop-down list.
The following table lists the available footer template variables.
| Description | Short Name | Alternative ASP.NET MVC Helper Syntax |
|---|---|---|
| Number of records in igCombo (view of dataSource) | {0} | ComboModel.RECORDS_VIEW |
| Number of records in dataSource | {1} | ComboModel.RECORDS_DATA |
| Number of (filtered) records on server | {2} | ComboModel.RECORDS_SERVER |
| Number of all records on server | {3} | ComboModel.RECORDS_SERVER_TOTAL |
In JavaScript:
$("#combo").igCombo({
loadOnDemandSettings: {
enabled: true,
pageSize: 25
},
responseDataKey: "d.results.Results",
responseTotalRecCountKey : "d.results.Count",
dataSource: 'http://igniteui.com/api/products?&callback=?',
textKey: "ProductName",
valueKey: "ID",
headerTemplate: '<div class="boxed">Available Products</div>',
footerTemplate: '<div class="boxed">Product Count: {0} of {3}</div>'
});
In ASPX:
<%=
Html.Infragistics().Combo()
.ID("combo")
.DataSource("http://igniteui.com/api/products?&callback=?")
.ResponseDataKey("d.results.Results")
.ResponseTotalRecCountKey("d.results.Count")
.TextKey("ProductName")
.ValueKey("ID")
.LoadOnDemandSettings(load => load.Enabled(true).PageSize(25))
.HeaderTemplate("<div class='boxed'>Available Movies</div>")
.FooterTemplate("<div class='boxed'>Movie Count: {0} of {3}</div>")
.Render()
%>
The following topics provide additional information related to this topic.
igCombo control as well as other details related to data binding.The following samples provide additional information related to this topic.
Load-on-Demand:This sample demonstrates how to use the combo box load-on-demand and paging functionality using a remote OData data source.
Virtualization:This sample demonstrates how enabling UI virtualization allows the igCombo control to quickly and efficiently render large amounts of data in the combo.
Filtering:This sample demonstrates how the dropdown list of the igCombo control can be filtered based off of the input value. The auto-suggest and auto-complete functionalities are also supported.
View on GitHub