Create the best Web experiences in browsers and devices with our user interface controls designed expressly for jQuery, ASP.NET MVC, HTML 5 and CSS 3. You’ll be building on a solid and proven foundation without any plug-ins or extensions, just real world best practices and the most forward-thinking, robust Web technology.
Infragistics NetAdvantage jQuery API Reference
ui.igCombo
The igCombo control is a jQuery combo box which supports virtualization, auto-complete, auto-suggest, multiple selection, and item templates. With the igCombo control you can create drop downs that accept text entries as well as options selected from the items list. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.
The following code snippet demonstrates how to initialize the igCombo control.
Click here for more information on how to get started using this API. For details on how to reference the required scripts and themes for the igCombo control read, Using JavaScript Resouces in NetAdvantage for jQuery and Styling and Theming NetAdvantage for jQuery.Code Sample
<!doctype html>
<html>
<head>
<!-- Infragistics Combined CSS -->
<link href="themes/ig/jquery.ui.custom.css" rel="stylesheet" type="text/css" />
<link href="themes/base/ig.ui.css" rel="stylesheet" type="text/css" />
<!-- jQuery Core -->
<script src="js/jquery.js" type="text/javascript"></script>
<!-- jQuery UI -->
<script src="js/jquery-ui.js" type="text/javascript"></script>
<!-- jQuery Templates: http://api.jquery.com/category/plugins/templates/ -->
<script src="js/jquery.tmpl.js" type="text/javascript"></script>
<!-- Infragistics Combined Scripts -->
<script src="js/ig.ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var colors = [{
"Name": "Black"
}, {
"Name": "Blue"
}, {
"Name": "Brown"
}, {
"Name": "Red"
}, {
"Name": "White"
}, {
"Name": "Yellow"
}];
$("#combo").igCombo({
dataSource: colors,
textKey: "Name",
valueKey: "Name",
width: "200px",
autoComplete: true
});
});
</script>
</head>
<body>
<input id="combo" />
</body>
</html>
Related Samples
Related Topics
Dependencies
-
allowCustomValue
- Type:
- bool
- Default:
- false
Gets sets ability to enter and keep custom value in field.
Note: If option is enabled, then matching item in list becomes active but not selected.Code Sample
//Initialize $(".selector").igCombo({ allowCustomValue : true }); //Get var allowCustom = $(".selector").igCombo("option", "allowCustomValue"); //Set $(".selector").igCombo("option", "allowCustomValue", true); -
animationHideDuration
- Type:
- number
- Default:
- 50
Gets sets duration of hide drop-down list animation in milliseconds.
Code Sample
//Initialize $(".selector").igCombo({ animationHideDuration : 25 }); //Get var animationDuration = $(".selector").igCombo("option", "animationHideDuration"); //Set $(".selector").igCombo("option", "animationHideDuration", 25); -
animationShowDuration
- Type:
- number
- Default:
- 100
Gets sets duration of show drop-down list animation in milliseconds.
Code Sample
//Initialize $(".selector").igCombo({ animationShowDuration : 25 }); //Get var animationDuration = $(".selector").igCombo("option", "animationShowDuration"); //Set $(".selector").igCombo("option", "animationShowDuration", 25); -
autoComplete
- Type:
- bool
- Default:
- false
Gets sets ability to autocomplete field from matching item in list.
Note: if "autoComplete" option is enabled, then the "startsWith" is used for "filteringCondition" option.Code Sample
//Initialize $(".selector").igCombo({ autoComplete : true }); //Get var autoComplete = $(".selector").igCombo("option", "autoComplete"); //Set $(".selector").igCombo("option", "autoComplete", true); -
caseSensitive
- Type:
- bool
- Default:
- false
Gets sets ability to use case sensitive or ignore case searching for matches defined by "renderMatchItems" and "filteringCondition" options.
Code Sample
//Initialize $(".selector").igCombo({ caseSensitive : true }); //Get var caseSensitive = $(".selector").igCombo("option", "caseSensitive"); //Set $(".selector").igCombo("option", "caseSensitive", true); -
clearButtonTitle
- Type:
- string
- Default:
- null
Gets sets title for html element which represend clear button. That is an override for the $.ui.igCombo.locale.clearButtonTitle.
Code Sample
//Initialize $(".selector").igCombo({ clearButtonTitle : "Clear value" }); //Get var title = $(".selector").igCombo("option", "clearButtonTitle"); //Set $(".selector").igCombo("option", "clearButtonTitle", "Clear value"); -
dataSource
- Type:
- object
- Default:
- null
Gets sets a valid data source accepted by $.ig.DataSource, or an instance of an $.ig.DataSource itself.
Note: if it is set to string and "dataSourceType" option is not set, then $.ig.JSONPDataSource is used.Code Sample
//Initialize $(".selector").igCombo({ dataSource : data }); //Get var data = $(".selector").igCombo("option", "dataSource"); -
dataSourceType
- Type:
- string
- Default:
- null
Gets sets data source type (such as "json", "xml", etc). Please refer to the documentation of $.ig.DataSource and its type property.
Code Sample
//Initialize $(".selector").igCombo({ dataSourceType : "xml" }); //Get var dataType = $(".selector").igCombo("option", "dataSourceType"); -
dataSourceUrl
- Type:
- string
- Default:
- null
Gets sets url which is used for sending JSON on request for remote filtering (MVC for example).
Code Sample
//Initialize $(".selector").igCombo({ dataSourceUrl : "data.svc" }); //Get var dataUrl = $(".selector").igCombo("option", "dataSourceUrl"); -
dropDownAsChild
- Type:
- bool
- Default:
- false
Gets sets ability to append container of drop-down list to the body or to the parent of combo.
Code Sample
//Initialize $(".selector").igCombo({ dropDownAsChild : true }); //Get var isChild = $(".selector").igCombo("option", "dropDownAsChild"); //Set $(".selector").igCombo("option", "dropDownAsChild", true); -
dropDownButtonTitle
- Type:
- string
- Default:
- null
Gets sets title for html element which represend drop-down button. That is an override for the $.ui.igCombo.locale.dropDownButtonTitle.
Code Sample
//Initialize $(".selector").igCombo({ dropDownButtonTitle : "Open Dropdown" }); //Get var title = $(".selector").igCombo("option", "dropDownButtonTitle"); //Set $(".selector").igCombo("option", "dropDownButtonTitle", "Open Dropdown"); -
dropDownMaxHeight
- Type:
- number
- Default:
- 300
Gets sets maximum height of drop-down list in pixels.
Code Sample
//Initialize $(".selector").igCombo({ dropDownMaxHeight : 25 }); //Get var height = $(".selector").igCombo("option", "dropDownMaxHeight"); //Set $(".selector").igCombo("option", "dropDownMaxHeight", 25); -
dropDownMinHeight
- Type:
- number
- Default:
- 0
Gets sets minimum height of drop-down list in pixels.
Code Sample
//Initialize $(".selector").igCombo({ dropDownMinHeight : 25 }); //Get var height = $(".selector").igCombo("option", "dropDownMinHeight"); //Set $(".selector").igCombo("option", "dropDownMinHeight", 25); -
dropDownOnFocus
- Type:
- bool
- Default:
- false
Sets gets ability to show drop-down list when combo gets focus.
Code Sample
//Initialize $(".selector").igCombo({ dropDownOnFocus : true }); //Get var dropOnFocus = $(".selector").igCombo("option", "dropDownOnFocus"); //Set $(".selector").igCombo("option", "dropDownOnFocus", true); -
dropDownWidth
- Type:
- number
- Default:
- 0
Gets sets width of drop-down list in pixels. If it is 0, then width of combo is used.
Code Sample
//Initialize $(".selector").igCombo({ dropDownWidth : 200 }); //Get var width = $(".selector").igCombo("option", "dropDownWidth"); //Set $(".selector").igCombo("option", "dropDownWidth", 200); -
enableActiveItem
- Type:
- bool
- Default:
- true
Gets sets ability to render focus/active item in drop-down list.
Notes: If list had active item and it was closed and opened again, then active item is reset to the first selected item.
It there is no selected items, then active item is not reset.
If that option is disabled, then functionality becomes similar to the SELECT html element.
For example, if list is opened then action keys like up/down arrows/page, home and end will change selected item instead of active item.
If list is closed, then up/down arrow keys will change selected item and update text field for it.
If list is opened, then text-changes in field will select matching item in list instead of activating it.Code Sample
//Initialize $(".selector").igCombo({ enableActiveItem : true }); //Get var enableActiveItem = $(".selector").igCombo("option", "enableActiveItem"); //Set $(".selector").igCombo("option", "enableActiveItem", true); -
enableClearButton
- Type:
- bool
- Default:
- true
Gets sets ability to show a button which allows to clear field.
Button is automatically hidden when field is empty and it automatically appears when field is not empty.Code Sample
//Initialize $(".selector").igCombo({ enableClearButton : true }); //Get var enableClearButton = $(".selector").igCombo("option", "enableClearButton"); //Set $(".selector").igCombo("option", "enableClearButton", true); -
enableDisplayBlock
- Type:
- bool
- Default:
- false
Gets sets style.display "block" or "inline-block" applied to main/outer html element.
Code Sample
//Initialize $(".selector").igCombo({ enableDisplayBlock : true }); //Get var enableDisplayBlock = $(".selector").igCombo("option", "enableDisplayBlock"); //Set $(".selector").igCombo("option", "enableDisplayBlock", true); -
filterExprUrlKey
- Type:
- string
- Default:
- null
Gets sets url key name that specifies how the remote filtering expressions will be encoded for remote requests, e.g. &filter('col') = startsWith. Default is OData.
Code Sample
//Initialize $(".selector").igCombo({ filterExprUrlKey : "filter" }); //Get var filterKey = $(".selector").igCombo("option", "filterExprUrlKey"); //Set $(".selector").igCombo("option", "filterExprUrlKey", "filter"); -
filteringCondition
- Type:
- string
- Default:
- contains
Gets sets condition used for filtering.
Note: if the "autoComplete" option is enabled, then the "startsWith" is used regardless of value for this option.Code Sample
//Initialize $(".selector").igCombo({ filteringCondition : "startsWith" }); //Get var condition = $(".selector").igCombo("option", "filteringCondition"); //Set $(".selector").igCombo("option", "filteringCondition", "startsWith"); -
filteringType
- Type:
- enumeration
- Default:
- null
Gets sets type of filtering.
Members
- remote
- Type:string
- filtering is performed by server.
- local
- Type:string
- filtering is performed by $.ig.DataSource.
- none
- Type:string
- filtering is disabled.
- null
- Type:object
- filtering is disabled.
Code Sample
//Initialize $(".selector").igCombo({ filteringType : "remote" }); //Get var filterType = $(".selector").igCombo("option", "filteringType"); //Set $(".selector").igCombo("option", "filteringType", "remote"); -
footerTemplate
- Type:
- string
- Default:
- null
Gets sets template used to render footer in drop-down list. Note: template is rendered inside of DIV html element.
Code Sample
//Initialize $(".selector").igCombo({ footerTemplate : "<h4>Footer</h4>" }); //Get var template = $(".selector").igCombo("option", "footerTemplate"); //Set $(".selector").igCombo("option", "footerTemplate", "<h4>Footer</h4>"); -
format
- Type:
- string
- Default:
- true
Gets sets format which is applied to items in list. Values null or false will disable format.
Value "auto" or true will use automatic format for Date and number objects.
Value null or false will disable automatic format.
Custom values can be something like "currency", "percent", "dateLong", "time", "MMM-dd-yyyy H:mm tt", etc.
However, custom format should be valid for a specific data type in "textKey" column.Code Sample
//Initialize $(".selector").igCombo({ format : "auto" }); //Get var template = $(".selector").igCombo("option", "format"); //Set $(".selector").igCombo("option", "format", "auto"); -
headerTemplate
- Type:
- string
- Default:
- null
Gets sets template used to render header in drop-down list. Template is rendered inside of DIV html element.
Code Sample
//Initialize $(".selector").igCombo({ headerTemplate : "<h4>Header</h4>" }); //Get var template = $(".selector").igCombo("option", "headerTemplate"); //Set $(".selector").igCombo("option", "headerTemplate", "<h4>Header</h4>"); -
height
- Type:
- string
- Default:
- null
Gets sets height of combo. The numeric and string values (valid html units for size) are supported. It includes %, px, em and other units.
Code Sample
//Initialize $(".selector").igCombo({ height : "25px" }); //Get var height = $(".selector").igCombo("option", "height"); //Set $(".selector").igCombo("option", "height", "25px"); -
inputName
- Type:
- string
- Default:
- null
Gets sets name of (hidden) INPUT element, which value will be set to values of selected items separated by "," character on any change in igCombo.
Code Sample
//Initialize $(".selector").igCombo({ inputName : "textField" }); //Get var inputName = $(".selector").igCombo("option", "inputName"); //Set $(".selector").igCombo("option", "inputName", "textField"); -
itemSeparator
- Type:
- string
- Default:
- ,
Gets sets separator between items in field. Note: that option has effect only when "multiSelection" option is enabled.
Code Sample
//Initialize $(".selector").igCombo({ itemSeparator : ";" }); //Get var itemSeparator = $(".selector").igCombo("option", "itemSeparator"); //Set $(".selector").igCombo("option", "itemSeparator", ";"); -
itemTemplate
- Type:
- string
- Default:
- null
Gets sets template used to render an item in list. Notes:
1. The jquery.tmpl.js of Microsoft is used and application should provide supported syntax for content.
2. Template is rendered inside of LI html element.
So, application should consider restriction for layout: do not use "block" html elements and in case of absolutely positioned elements,
they should not overlap with checkbox icons.Code Sample
//Initialize $(".selector").igCombo({ itemTemplate: "<span class="movieTitle">${Name}</span><img src="${Url}" />" }); //Get var template = $(".selector").igCombo("option", "itemTemplate"); -
mode
- Type:
- enumeration
- Default:
- editable
Sets gets functionality mode.
Members
- editable
- Type:string
- Allows to modify value by edit field and drop-down list.
- dropdown
- Type:string
- Allows to modify value by drop-down list only.
- readonlylist
- Type:string
- Allows to open list, but does not allow any changes in field or selection in drop-down list.
- readonly
- Type:string
- Does not allow to open list or change value in field.
- 0
- Type:number
- Allows to modify value by edit field and drop-down list.
- 1
- Type:number
- Allows to modify value by drop-down list.
- 2
- Type:number
- Allows to open list, but does not allow any changes.
- 3
- Type:number
- Does not allow to open list or change value in field.
Code Sample
//Initialize $(".selector").igCombo({ mode : "readonlylist" }); //Get var mode = $(".selector").igCombo("option", "mode"); //Set $(".selector").igCombo("option", "mode", "readonlylist"); -
multiSelection
- Type:
- enumeration
- Default:
- null
Gets sets ability to select multiple items in list and enter multiple items in field which are separated by the 'itemSeparator'.
Members
- null
- Type:object
- multiselection is disabled.
- false
- Type:bool
- multiselection is disabled.
- 0
- Type:number
- multiselection is disabled.
- off
- Type:string
- multiselection is disabled.
- true
- Type:bool
- multiselection is enabled.
- 1
- Type:number
- multiselection is enabled.
- on
- Type:string
- multiselection is enabled.
- 2
- Type:number
- multiselection is enabled and checkboxes are used for list items. Those checkboxes allow to add/remove selection without pressing Ctrl key on mouse click.
- onWithCheckboxes
- Type:string
- multiselection is enabled and checkboxes are used for list items. Those checkboxes allow to add/remove selection without pressing Ctrl key on mouse click.
Code Sample
//Initialize $(".selector").igCombo({ multiSelection : "onWithCheckboxes" }); //Get var multiSelection = $(".selector").igCombo("option", "multiSelection"); //Set $(".selector").igCombo("option", "multiSelection", "onWithCheckboxes"); -
noMatchFoundText
- Type:
- string
- Default:
- null
Gets sets text of list item for condition when "filteringType" option is enabled and no match was found. That is an override for the $.ui.igCombo.locale.noMatchFoundText.
Code Sample
//Initialize $(".selector").igCombo({ noMatchFoundText : "Please try again" }); //Get var text = $(".selector").igCombo("option", "noMatchFoundText"); //Set $(".selector").igCombo("option", "noMatchFoundText", "Please try again"); -
nullText
- Type:
- string
- Default:
- null
Sets gets text which appears in field in no-focus state and there is no value.
Code Sample
//Initialize $(".selector").igCombo({ nullText : "Please enter text" }); //Get var text = $(".selector").igCombo("option", "nullText"); //Set $(".selector").igCombo("option", "nullText", "Please enter text"); -
renderMatchItems
- Type:
- enumeration
- Default:
- multi
Gets sets condition used for rendering of matching parts in items of drop-down list.
Members
- multi
- Type:string
- multiple matches in a single item are rendered.
- contains
- Type:string
- match at any position in item is rendered.
- startsWith
- Type:string
- only match which starts from the beginning of text is rendered.
- full
- Type:string
- only fully matched items are rendered.
- null
- Type:object
- matches are not rendered.
Code Sample
//Initialize $(".selector").igCombo({ renderMatchItems : "contains" }); //Get var match = $(".selector").igCombo("option", "renderMatchItems"); //Set $(".selector").igCombo("option", "renderMatchItems", "contains"); -
responseDataKey
- Type:
- string
- Default:
- null
See $.ig.DataSource. This is basically the property in the responses where data records are held, if the response is wrapped.
Code Sample
//Initialize $(".selector").igCombo({ responseDataKey : "d.results" }); //Get var dataKey = $(".selector").igCombo("option", "responseDataKey"); -
responseTotalRecCountKey
- Type:
- string
- Default:
- null
See $.ig.DataSource. property in the response specifying the total number of records on the server.
Code Sample
//Initialize $(".selector").igCombo({ responseTotalRecCountKey : "count" }); //Get var countKey = $(".selector").igCombo("option", "responseTotalRecCountKey"); -
selectedItems
- Type:
- array
- Default:
- []
- Elements Type:
- object
Gets sets list of selected items. It should contain array of objects.
Each object should contain the member "index" equals to the index of selected item or the member "value" equals to value of item in dataSource in "valueKey" column.
The member "text" contains value of item in "textKey" column.
Missing values are filled automatically while rendering list items and on other actions. If application set more than one member, then it is responsible for match.Code Sample
//Initialize $(".selector").igCombo({ selectedItems : [ { index: 3 }, { text: "blue" } ] }); //Get var selectedItems = $(".selector").igCombo("option", "selectedItems"); //Set $(".selector").igCombo("option", "selectedItems", [{index:3},{text:"blue"}]);-
index
- Type:
- number
- Default:
- -1
Optional="true" Index of item in list. Value should be larger than -1 and less than number of items in list (rows in dataSource).
Code Sample
//Initialize $(".selector").igCombo({ index : 0 }); //Get var index = $(".selector").igCombo("option", "index"); //Set $(".selector").igCombo("option", "index", 0); -
text
- Type:
- string
- Default:
- null
Optional="true" Value of cell in textKey column for index.
Code Sample
//Initialize $(".selector").igCombo({ allowCustomValue:true, text : "default text" }); //Get var text = $(".selector").igCombo("option", "text"); //Set $(".selector").igCombo("option", "text", "default text"); -
value
- Type:
- object
- Default:
- null
Optional="true" Value of cell in valueKey column for index.
Code Sample
//Initialize $(".selector").igCombo({ valueKey="val", value : {val:1,text:"default text"} }); //Get var value = $(".selector").igCombo("option", "value"); //Set $(".selector").igCombo("option", "value", {val:1,text:"default text"});
-
selectItemBySpaceKey
- Type:
- bool
- Default:
- false
Gets sets ability to select active item in list by Space key.
Note: if that options is enabled, then it will be not possible to type-in the Space character when list is opened.Code Sample
//Initialize $(".selector").igCombo({ selectItemBySpaceKey : true }); //Get var selectSpace = $(".selector").igCombo("option", "selectItemBySpaceKey"); //Set $(".selector").igCombo("option", "selectItemBySpaceKey", true); -
showDropDownButton
- Type:
- bool
- Default:
- true
Gets sets visibility of drop-down button.
Code Sample
//Initialize $(".selector").igCombo({ showDropDownButton : false }); //Get var showButton = $(".selector").igCombo("option", "showDropDownButton"); //Set $(".selector").igCombo("option", "showDropDownButton", false); -
tabIndex
- Type:
- number
- Default:
- null
Gets sets tabIndex for field of combo.
Code Sample
//Initialize $(".selector").igCombo({ tabIndex : 3 }); //Get var tabIndex = $(".selector").igCombo("option", "tabIndex"); //Set $(".selector").igCombo("option", "tabIndex", 3); -
text
- Type:
- string
- Default:
- null
Gets sets text which appears in combo on initialization. If it is not set, then the value from target html element is used automatically.
If selectedItems option is not set and allowCustomValue option is enabled, then first matching item in list will be selected.
Note: if text if field was modified, then that option is not synchronized with latest/current text. To get text in field, the text() method can be used.Code Sample
//Initialize $(".selector").igCombo({ text : "green" }); //Get var text = $(".selector").igCombo("option", "text"); //Set $(".selector").igCombo("option", "text", "green"); -
textKey
- Type:
- string
- Default:
- null
Gets sets name of column which contains the displayed text. If it is missing, then "valueKey" option will be used.
Code Sample
//Initialize $(".selector").igCombo({ textKey : "ProductName" }); //Get var key = $(".selector").igCombo("option", "textKey"); -
textKeyType
- Type:
- enumeration
- Default:
- null
Gets sets type of values used for data cells/items with textKey. That value is assign to schema of $.ig.DataSource.
Members
- string
- Type:string
- data source uses strings objects.
- number
- Type:string
- data source uses numbers objects.
- bool
- Type:string
- data source uses booleans objects.
- date
- Type:string
- data source uses Date objects.
- auto
- Type:string
- data source uses type defined by cell/items located in first row.
- null
- Type:object
- data source uses type defined by cell/items located in first row.
Code Sample
//Initialize $(".selector").igCombo({ textKeyType : "string" }); //Get var type = $(".selector").igCombo("option", "textKeyType"); -
validatorOptions
- Type:
- object
- Default:
- null
Gets or sets object which contains options supported by igValidator.
Notes: in order for validator to work, application should ensure that igValidator is loaded (ig.ui.validator.js/css files).
Example:
$('#combo1').igCombo({ validatorOptions: { required: true } });.Code Sample
//Initialize $(".selector").igCombo({ validatorOptions: { required: true } }); //Get var text = $(".selector").igCombo("option", "validatorOptions"); //Set $(".selector").igCombo("option", "validatorOptions", { required: true }); -
valueKey
- Type:
- string
- Default:
- null
Gets sets name of column which contains the "value". If it is missing, then name of first column will be used.
Code Sample
//Initialize $(".selector").igCombo({ valueKey : "ProductID" }); //Get var key = $(".selector").igCombo("option", "valueKey"); -
valueKeyType
- Type:
- enumeration
- Default:
- null
Gets sets type of values used for data cell/items with valueKey. That value is assign to schema of $.ig.DataSource.
Members
- string
- Type:string
- data source uses strings objects.
- number
- Type:string
- data source uses numbers objects.
- bool
- Type:string
- data source uses booleans objects.
- date
- Type:string
- data source uses Date objects.
- auto
- Type:string
- data source uses type defined by cell/items located in first row.
- null
- Type:object
- data source uses type defined by cell/items located in first row.
Code Sample
//Initialize $(".selector").igCombo({ valueKeyType : "number" }); //Get var type = $(".selector").igCombo("option", "valueKeyType"); -
virtualization
- Type:
- bool
- Default:
- false
Gets sets ability to use virtual rendering for drop-down list.
If that option is enabled, then only visible items are created and top edge of first visible item in list is alligned to the top edge of list.Code Sample
//Initialize $(".selector").igCombo({ virtualization : true }); //Get var isEnabled = $(".selector").igCombo("option", "virtualization"); -
width
- Type:
- string
- Default:
- null
Gets sets width of combo. The numeric and string values (valid html units for size) are supported. It includes %, px, em and other units.
Code Sample
//Initialize $(".selector").igCombo({ width : "300px" }); //Get var width = $(".selector").igCombo("option", "width"); //Set $(".selector").igCombo("option", "width", "300px");
For more information on how to interact with the NetAdvantage for jQuery controls events, refer to
Using Events in NetAdvantage for jQuery
-
activeItemChanged
- Cancellable:
- false
Event which is raised after change of active item in list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser. That can be null.
Use ui.owner to obtain reference to igCombo.
Use ui.index to obtain index of new active item.
Use ui.oldIndex to obtain index of old active item.Code Sample
$(document).delegate(".selector", "igcomboactiveitemchanged", function (evt, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain index of new active item ui.index; //use to obtain index of old active item ui.oldIndex; }); //Initialize $(".selector").igCombo({ activeItemChanged: function (evt, ui) { ... } }); -
activeItemChanging
- Cancellable:
- true
Event which is raised before change of active item in list.
Return false in order to cancel change.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser. That can be null.
Use ui.owner to obtain reference to igCombo.
Use ui.index to obtain index of new active item.
Use ui.oldIndex to obtain index of old active item.Code Sample
$(document).delegate(".selector", "igcomboactiveitemchanging", function (evt, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain index of new active item ui.index; //use to obtain index of old active item ui.oldIndex; }); //Initialize $(".selector").igCombo({ activeItemChanging: function (evt, ui) { ... } }); -
dataBinding
- Cancellable:
- true
Event which is raised before data binding.
Function takes first argument null and second argument ui.
Use ui.owner to obtain reference to igCombo.
Use ui.dataSource to obtain reference to instance of $.ig.DataSource used by combo.Code Sample
$(document).delegate(".selector", "igcombodatabinding", function (null, ui) { //use to obtain reference to igCombo ui.owner; //use to obtain reference to instance of $.ig.DataSource used by combo ui.dataSource; }); //Initialize $(".selector").igCombo({ dataBinding: function (null, ui) { ... } }); -
dataBound
- Cancellable:
- false
Event which is raised after data binding.
Function takes first argument null and second argument ui.
Use ui.owner to obtain reference to igCombo.
Use ui.dataSource to obtain reference to instance of $.ig.DataSource used by combo.Code Sample
$(document).delegate(".selector", "igcombodatabound", function (null, ui) { //use to obtain reference to igCombo ui.owner; //use to obtain reference to instance of $.ig.DataSource used by combo ui.dataSource; }); //Initialize $(".selector").igCombo({ dataBound: function (null, ui) { ... } }); -
dropDownClosed
- Cancellable:
- false
Event which is raised after drop-down list was closed.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igCombo.
Use ui.element to obtain reference to jquery DOM element which represents container of list.Code Sample
$(document).delegate(".selector", "igcombodropdownclosed", function (null, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain reference to jQuery DOM element which represents a container of list ui.element; }); //Initialize $(".selector").igCombo({ dropDownClosed: function (evt, ui) { ... } }); -
dropDownClosing
- Cancellable:
- true
Event which is raised before drop-down list is closed.
Return false in order to cancel hide action.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igCombo.
Use ui.element to obtain reference to jquery DOM element which represents container of list.Code Sample
$(document).delegate(".selector", "igcombodropdownclosing", function (null, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain reference to jQuery DOM element which represents a container of list ui.element; }); //Initialize $(".selector").igCombo({ dropDownClosing: function (evt, ui) { ... } }); -
dropDownOpened
- Cancellable:
- false
Event which is raised after drop-down list was opened.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igCombo.
Use ui.element to obtain reference to jquery DOM element which represents container of list.Code Sample
$(document).delegate(".selector", "igcombodropdownopened", function (null, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain reference to jQuery DOM element which represents a container of list ui.element; }); //Initialize $(".selector").igCombo({ dropDownOpened: function (evt, ui) { ... } }); -
dropDownOpening
- Cancellable:
- true
Event which is raised before drop-down list is opened.
Return false in order to cancel drop-down action.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igCombo.
Use ui.element to obtain reference to jquery DOM element which represents container of list.
Note: on the very first opening or option-change that member is null and application should
check that before using that member.Code Sample
$(document).delegate(".selector", "igcombodropdownopening", function (null, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain reference to jQuery DOM element which represents a container of list ui.element; }); //Initialize $(".selector").igCombo({ dropDownOpening: function (evt, ui) { ... } }); -
filtered
- Cancellable:
- false
Event which is raised after filtering.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser. That can be null.
Use ui.owner to obtain reference to igCombo.
Use ui.expression to obtain reference to array which contains expressions supported by $.ig.DataSource.
Each expression-item contains following members: fieldName (textKey), cond (filteringCondition), expr (value/string to filter).Code Sample
$(document).delegate(".selector", "igcombofiltered", function (null, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain reference to array which contains expressions supported by $.ig.DataSource ui.expression; }); //Initialize $(".selector").igCombo({ filtered: function (evt, ui) { ... } }); -
filtering
- Cancellable:
- true
Event which is raised before filtering.
Return false in order to cancel filtering.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser. That can be null.
Use ui.owner to obtain reference to igCombo.
Use ui.expression to obtain reference to array which contains expressions supported by $.ig.DataSource.
Each expression-item contains following members: fieldName (textKey), cond (filteringCondition), expr (value/string to filter).Code Sample
$(document).delegate(".selector", "igcombofiltering", function (null, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain reference to array which contains expressions supported by $.ig.DataSource ui.expression; }); //Initialize $(".selector").igCombo({ filtering: function (evt, ui) { ... } }); -
noMatchFound
- Cancellable:
- false
Event which is raised after field was modified by end user and autoComplete was not able to find matching item in list.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser. That can be null.
Use ui.owner to obtain reference to igCombo.
Use ui.text to obtain text in field.Code Sample
$(document).delegate(".selector", "igcombonomatchfound", function (null, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain text in field ui.text; }); //Initialize $(".selector").igCombo({ noMatchFound: function (evt, ui) { ... } }); -
selectionChanged
- Cancellable:
- false
Event which is raised after selection change.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser. That can be null.
Use ui.owner to obtain reference to igCombo.
Use ui.items to obtain reference to array of new selected items. That can be null.
Use ui.oldItems to obtain reference to array of old selected items. That can be null.Code Sample
$(document).delegate(".selector", "igcomboselectionchanged", function (null, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain reference to array of new selected items. That can be null. ui.items; //use to obtain reference to array of old selected items. That can be null. ui.oldItems; }); //Initialize $(".selector").igCombo({ selectionChanged: function (evt, ui) { ... } }); -
selectionChanging
- Cancellable:
- true
Event which is raised before selection change.
Return false in order to cancel change.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser. That can be null.
Use ui.owner to obtain reference to igCombo.
Use ui.items to obtain reference to array of new selected items. That can be null.
Use ui.oldItems to obtain reference to array of old selected items. That can be null.Code Sample
$(document).delegate(".selector", "igcomboselectionchanging", function (null, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain reference to array of new selected items. That can be null. ui.items; //use to obtain reference to array of old selected items. That can be null. ui.oldItems; }); //Initialize $(".selector").igCombo({ selectionChanging: function (evt, ui) { ... } }); -
textChanged
- Cancellable:
- false
Event which is raised after value in field was modified by user.
It is not raised when value of field was modified internally, for example, after filling-up from matching item while autoComplete.
Function takes arguments evt and ui.
Use evt.originalEvent to obtain reference to event of browser.
Use ui.owner to obtain reference to igCombo.
Use ui.text to obtain new text in field.
Use ui.oldText to obtain old text in field.Code Sample
$(document).delegate(".selector", "igcombotextchanged", function (null, ui) { //use to obtain reference to the event browser evt.originalEvent; //use to obtain reference to igCombo ui.owner; //use to obtain new text in field. ui.text; //use to obtain old text in field ui.oldText; }); //Initialize $(".selector").igCombo({ textChanged: function (evt, ui) { ... } });
-
activeIndex
- .igCombo( "activeIndex", [index:number] );
Gets sets index of active item in list.
returnType="number|object" Returns index of active item in list or -1, if parameter is undefined. Otherwise, it returns reference to this igCombo.- index
- Type:number
- Optional
- New active index for list. In order to clear active item, use -1.
Code Sample
//Get var index = $(".selector").igCombo("activeIndex"); //Set $(".selector").igCombo("activeIndex", 5); -
dataBind
- .igCombo( "dataBind" );
Trigger data binding.
Code Sample
$(".selector").igCombo("dataBind"); -
destroy
- .igCombo( "destroy" );
- Return Type:
- object
Destroys widget.
Code Sample
$(".selector").igCombo("destroy"); -
dropDownVisible
- .igCombo( "dropDownVisible", [showHide:bool] );
Gets sets visibility of drop-down list.
returnType="bool|object" If parameter is defined, then returns reference to this igCombo, otherwise, returns true if drop down is visible and false if drop down is hidden.- showHide
- Type:bool
- Optional
- Value true will show dropdown, false - hide dropdown. .
Code Sample
//Get var visible = $(".selector").igCombo("dropDownVisible"); //Set $(".selector").igCombo("dropDownVisible", false); -
filter
- .igCombo( "filter", [e:object], [txtNew:string] );
Trigger filtering.
- e
- Type:object
- Optional
- Internal use only: reference to browser event. .
- txtNew
- Type:string
- Optional
- Internal use only for remove filtering.
Code Sample
$(".selector").igCombo("filter"); -
hasFocus
- .igCombo( "hasFocus" );
- Return Type:
- bool
Checks if combo has focus.
Code Sample
var focus = $(".selector").igCombo("hasFocus"); -
isSelected
- .igCombo( "isSelected", index:number );
- Return Type:
- bool
Checks if list item at index is selected.
- index
- Type:number
- Index of item.
Code Sample
var isSelected = $(".selector").igCombo("isSelected", 5); -
itemByIndex
- .igCombo( "itemByIndex", id:number );
- Return Type:
- object
Gets object which contains members relative to list-item.
- id
- Type:number
- Index of item within drop-down list.
Code Sample
var item = $(".selector").igCombo("itemByIndex", 5); -
itemByValue
- .igCombo( "itemByValue", val:object );
- Return Type:
- object
Finds index of item by value and returns this.itemByIndex(indexOfItem).
- val
- Type:object
- Value of item in drop-down list.
Code Sample
var item = $(".selector").igCombo("itemByValue", "NJ"); -
remove
- .igCombo( "remove" );
- Return Type:
- object
Removes combo from its parent element, but keeps the rest of functionality.
Code Sample
$(".selector").igCombo("remove"); -
selectedIndex
- .igCombo( "selectedIndex", [index:number] );
Gets sets index of selected item in list.
returnType="number|object" Returns index of first selected item in list or -1, if parameter is undefined. Otherwise, it returns reference to this igCombo.- index
- Type:number
- Optional
- New selected index for combo. In order to clear selection, use -1.
Code Sample
//Get var index = $(".selector").igCombo("selectedIndex"); //Set $(".selector").igCombo("selectedIndex", -1); -
setFocus
- .igCombo( "setFocus", [delay:number] );
- Return Type:
- object
Set focus to combo with possible delay.
- delay
- Type:number
- Optional
- Delay in milliseconds. If parameter is missing, then 0 is used. If parameter is -1, then focus is set without delay.
Code Sample
$(".selector").igCombo("setFocus"); -
text
- .igCombo( "text", [text:string] );
Gets sets text text in field.
returnType="string|object" If parameter is undefined, then current text in field is returned. Otherwise, it returns reference to this igCombo.- text
- Type:string
- Optional
- New text for combo. In case of enabled multiselection, that parameter may optionally contain multiple items separated by itemSeparator.
Code Sample
//Get var text = $(".selector").igCombo("text"); //Set $(".selector").igCombo("text", "Orange"); -
validate
- .igCombo( "validate" );
Trigger validation.
returnType="number|object" Possible values:
1 - application canceled error message.
2 - error message is displayed.
Any other value or undefined means that target is valid or validation is not enabled.Code Sample
$(".selector").igCombo("validate"); -
validator
- .igCombo( "validator", [destroy:bool] );
- Return Type:
- object
Gets reference to igValidator used by igCombo.
- destroy
- Type:bool
- Optional
- Request to destroy validator.
Code Sample
var validator = $(".selector").igCombo("validator"); -
value
- .igCombo( "value", [val:object] );
Gets sets value of first selected item in list (item for valueKey column).
returnType="string|object" Returns value of first selected item in list if parameter is undefined. Otherwise, it returns reference to this igCombo.- val
- Type:object
- Optional
- New selected value. In case of enabled multiselection, that parameter may optionally contain multiple formatted string-items separated by itemSeparator.
Code Sample
//Get var value = $(".selector").igCombo("value"); //Set $(".selector").igCombo("value", "Orange"); -
values
- .igCombo( "values", [vals:array] );
- Return Type:
- array
Gets sets array of selected values in list (items for valueKey column).
- vals
- Type:array
- Optional
- New selected values.
Code Sample
//Get var values = $(".selector").igCombo("values"); //Set $(".selector").igCombo("values", valuesArray);
-
ui-igcombo-button ui-state-default
- Class applied to the SPAN element which represents dropdown button. Default value is 'ui-igcombo-button ui-state-default'.
-
ui-igcombo-button-focus
- Classes applied to the SPAN element of dropdown button when editor has focus. Default value is 'ui-igcombo-button-focus'.
-
ui-igcombo-button-hover ui-state-hover
- Classes applied to the SPAN element of dropdown button in mouse-over state. Default value is 'ui-igcombo-button-hover ui-state-hover'.
-
ui-igcombo-buttonicon ui-icon-triangle-1-s ui-icon
- Classes applied to the SPAN element which represents image on dropdown button. Default value is 'ui-igcombo-button-icon ui-icon-triangle-1-s ui-icon'.
-
ui-igcombo-button-ltr ui-corner-right
- Class applied to the SPAN element which represents dropdown button when direction is ltr. Default value is 'ui-igcombo-button-ltr ui-corner-right'.
-
ui-igcombo-button-pressed ui-state-highlight
- Classes applied to the SPAN element of dropdown button in pressed state. Default value is 'ui-igcombo-button-pressed ui-state-highlight'.
-
ui-igcombo-button-rtl ui-corner-left
- Class applied to the SPAN element which represents dropdown button when direction is rtl. Default value is 'ui-igcombo-button-rtl ui-corner-left'.
-
ui-state-default ui-corner-all ui-igcombo-checkbox ui-igcheckbox-small
- Class applied to the SPAN element which represents checkbox in list item. Default value is 'ui-state-default ui-corner-all ui-igcombo-checkbox ui-igcheckbox-small'.
-
ui-state-hover ui-igcombo-checkbox-hover
- Class applied to the SPAN element which represents checkbox in mouser over state. Default value is 'ui-state-hover ui-igcombo-checkbox-hover'.
-
ui-state-hover ui-igcombo-checkboxicon-hover
- Class applied to the SPAN element which represents icon of checkbox in mouser over state. Default value is 'ui-state-hover ui-igcombo-checkboxicon-hover'.
-
ui-icon ui-igcombo-checkbox-off ui-igcheckbox-small-off
- Class applied to the SPAN element which represents icon in unchecked checkbox. Default value is 'ui-icon ui-igcombo-checkbox-off ui-igcheckbox-small-off'.
-
ui-icon ui-icon-check ui-igcombo-checkbox-on ui-igcheckbox-small-on
- Class applied to the SPAN element which represents icon in unchecked checkbox. Default value is 'ui-icon ui-icon-check ui-igcombo-checkbox-on ui-igcheckbox-small-on'.
-
ui-igcombo-clear
- Class applied to the SPAN element which represents clear button. Default value is 'ui-igcombo-clear'.
-
ui-igcombo-clear-focus
- Classes applied to the SPAN element of clear button when editor has focus. Default value is 'ui-igcombo-clear-focus'.
-
ui-igcombo-clear-hover ui-state-hover
- Classes applied to the SPAN element of clear button in mouse-over state. Default value is 'ui-igcombo-clear-hover ui-state-hover'.
-
ui-igcombo-clearicon ui-icon-circle-close ui-icon
- Class applied to the SPAN element which represents image on clear button. Default value is 'ui-igcombo-clearicon ui-icon-circle-close ui-icon'.
-
ui-igcombo-clear-pressed ui-state-highlight
- Classes applied to the SPAN element of clear button in pressed state. Default value is 'ui-igcombo-clear-pressed ui-state-highlight'.
-
ui-igcombo ui-widget
- Class applied to the main/top element. Default value is 'ui-igcombo'.
-
ui-igcombo-disabled ui-state-disabled
- Classes applied to the main/top element in disabled state. Default value is 'ui-igcombo-disabled ui-state-disabled'.
-
ui-igcombo-field
- Class applied to the editing element. Default value is 'ui-igcombo-field'.
-
ui-igcombo-field-focus
- Class applied to the editing element in focus state. Default value is 'ui-igcombo-focus'.
-
ui-igcombo-fieldholder ui-state-default
- Class applied to the holder of editing element. Default value is 'ui-igcombo-fieldholder ui-state-default'.
-
ui-igcombo-fieldholder-ltr ui-corner-left
- Class applied to the holder of editing element when direction is ltr. Default value is 'ui-igcombo-fieldholder-ltr ui-corner-left'.
-
ui-igcombo-fieldholder-rtl ui-corner-right
- Class applied to the holder of editing element when direction is rtl. Default value is 'ui-igcombo-fieldholder-rtl ui-corner-right'.
-
ui-igcombo-field-hover
- Class applied to the editing element in mouse-over state. Default value is 'ui-igcombo-field-hover'.
-
ui-igcombo-focus ui-state-focus ui-corner-all
- Class applied to the main/top element in focus state. Default value is 'ui-igcombo-focus ui-state-focus ui-corner-all'.
-
ui-igcombo-hover ui-state-hover ui-corner-all
- Class applied to the main/top element in mouse-over state. Default value is 'ui-igcombo-hover ui-state-hover ui-corner-all'.
-
ui-igcombo-list ui-widget ui-widget-content
- Class applied to the DIV element which is used as container for dropdown list. Default value is 'ui-igcombo-list ui-widget ui-widget-content'.
-
ui-igcombo-listitem ui-state-default
- Class applied to the LI element which represents item in dropdown list. Default value is 'ui-igcombo-listitem ui-state-default'.
-
ui-igcombo-listitem-active ui-state-active
- Class applied to the LI element which represents active item in dropdown list. Default value is 'ui-igcombo-listitem-active ui-state-active'.
-
ui-igcombo-listitemholder
- Class applied to the UL element which is used as container for list items. Default value is 'ui-igcombo-listitemholder'.
-
ui-igcombo-listitem-hover ui-state-hover
- Class applied to the LI element which represents item in dropdown list with mouse-over state. Default value is 'ui-igcombo-listitem-hover ui-state-hover'.
-
ui-igcombo-listitem-match
- Class applied to the text in item which matches with current value in field. Default value is 'ui-igcombo-listitem-match'.
-
ui-igcombo-listitem-selected ui-state-highlight
- Class applied to the LI element which represents selected item in dropdown list. Default value is 'ui-igcombo-listitem-selected ui-state-highlight'.
-
ui-igcombo-listitemtextwithcheckbox
- Class applied to the SPAN element which represents text of item in dropdown list when checkboxes are enabled. Default value is 'ui-igcombo-listitemtextwithcheckbox'.
-
ui-igcombo-nulltext
- Class applied to the editing element when it has no value. Default value is 'ui-igedit-nullvalue'.
-
ui-igcombo-waitfiltering
- Class applied to the element while editor waits for response from server on request to filter data. That has effect only when option "filteringType" is set to "remote". Default value is 'ui-igcombo-waitfiltering'.
