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

ui.igCombo_image

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

jquery-1.4.4.js
jquery.ui.core.js
jquery.ui.widget.js
ig.util.js
ig.datasource.js
  • 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

Show Details
  • 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'.