Configuring Selection (igCombo)

Topic Overview

Purpose

The igCombo™ control supports single and multiple selection, checkboxes, selection events and an API for changing the selection behavior programmatically. This topic shows how these different aspects of the selection functionality can be configured.

In this topic

This topic contains the following sections:

• igCombo Selection Configuration Overview
• Configure Multiple Selection
  • Multiple selection details
  • Multiple selection settings
• Code Example: Configure checkboxes
• Clear Selection
  • Clear selection details
  • Clear selection settings
• Handle selection Events
  • Selection events details
  • Selection events settings
• Cancel Selection
  • Introduction
  • Overview
  • Steps
• Related Topics

Required background

The table below lists the background you need to fully understand the information in this topic.

Topics

You need to first read the igCombo Overview and Adding igCombo topic.

External Resources

You need to first read the following articles:

• jQuery bind() API
• jQuery live() API

igCombo Selection Configuration Overview

Selection configuration

The table below lists the configurable behaviors of the igCombo control.

Configure Multiple Selection

Multiple selection details

Enabling multiple selection allows the user to select multiple items with the mouse or keyboard from the dropdown. In addition, the users also can type multiple values in the text box separating them by itemSeparator to select corresponding values. Default value for the itemSeparator is ', '.

Finally, you can enable checkboxes to facilitate multiple selection.

Multiple selection settings

The table below maps the desired configurations to property settings. The properties are accessed through the igCombo control options.

Code Example: Configure checkboxes

Following is the full code used in this example to configure multiple selection with checkboxes using the igCombo control options with the following parameters:

Multiple Selection – Enabled with checkboxes

In HTML:

<script type="text/javascript">
    $(function () {
        $("#comboTarget").igCombo({
            dataSource: colors,
            multiSelection: {
                enabled: true,
                showCheckboxes: true
            }
        });
    });
</script>

In ASPX:

<%= Html.
    Infragistics().
    Combo().
    DataSource(this.Model as IQueryable<System.Drawing.Color>).
    MultiSelectionSettings(ms => {
        ms.Enabled(true);
        ms.ShowCheckBoxes(true);
    }).   
    Render()
%>

Multiple selection property reference

For detailed information about these properties, refer to their listing in the property reference section:

igCombo Options

Clear selection

Clear selection details

To clear the selection of the igCombo control programmatically, use the method deselectAll.

Clear selection settings

The table below maps the desired behaviors to property settings. The properties are accessed through the igCombo options.

Handle selection events

Selection events details

You can use selection events to perform logic when a selection operation occurs. The selectionChanging is raised before the selection is changed within the control and the selectionChanged event is raised directly after the igCombo’s selection is changed.

Selection events settings

The table below maps the desired configurations to property settings. The properties are accessed through the igCombo options.

Cancel Selection

Introduction

By handling the selectionChanging event, you can cancel a selection operation.

Overview

• Following is a conceptual overview of the process:

• Handling the selectionChanging event

• Cancelling the event by returning false

Steps

1. Handle the selectionChanging event.

   1. Define a handler function.

      Define a function that is called when the selectionChanging event is raised.

      In HTML and JavaScript:

      <script type="text/javascript">        
          function comboSelectionChanging(evt, ui) {
      
          };   
      </script>
      

   2. Configure the handler for the selectionChanging event.

      Once you have a handler defined, you must set it as the handler for the selectionChanging event. In jQuery, this can be done when the widget is instantiated. In ASP.NET MVC, the event should be attached using the jQuery live or bind API. Using the live or bind API is an option for attaching the event in a pure jQuery implementation as well. The type for this event is ‘igcomboselectionchanging’.

      In HTML:

      $("#comboTarget").igCombo({
                  selectionChanging: comboSelectionChanging
      });
      

      In ASPX:

       $("#comboTarget").bind("igcomboselectionchanging", comboSelectionChanging);
      

2. Cancel the event by returning false.

   In HTML and JavaScript:

   <script type="text/javascript">
   
       function comboSelectionChanging(evt, ui) {
          if (conditionNotMet)
             return false;
        };   
   </script>
   

Related Topics

Following are some other topics you may find useful.

• Configuring igCombo