Available in the OSS Version

Combo Box - Selection and Checkboxes

The igCombo control supports selection enabled, selection disabled, and selection with checkboxes.

Select Infragistics products by using:

- Single Selection, opens drop down on focus

- Multiple Selection

- Multiple Selection with Checkboxes

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

Use the keyboard or mouse to select items in the combo and experiment with the different selection options to see the variety of interactions available.

Code View

Show In JsFiddle

Copy to Clipboard

HTML

                    <!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>

</head>
<body>
    <style>        
        .combo-label {margin-bottom:.5em;}
    </style>
    <h3>Select Infragistics products by using:</h3>
    <br />
    <div class=".ui-widget-overlay"></div>
    <h4 class="combo-label">- Single Selection, opens drop down on focus</h4>
    <div id="singleSelectCombo"></div>

    <h4 class="combo-label">- Multiple Selection</h4>
    <div id="multiSelectCombo"></div>

    <h4 class="combo-label">- Multiple Selection with Checkboxes</h4>
    <div id="checkboxSelectCombo"></div>

    <script>

        var colors = [
            { Name: "jQuery/HTML5/ASP.NET MVC Controls" },
            { Name: "ASP.NET Controls" },
            { Name: "Windows Forms Controls" },
            { Name: "WPF Controls" },
            { Name: "Android Native mobile controls" },
            { Name: "iOS Controls" },
            { Name: "SharePlus" },
            { Name: "ReportPlus" },
            { Name: "Indigo Studio" }
        ];

        $(function () {

            $("#singleSelectCombo").igCombo({
                width: 300,
                dataSource: colors,
                textKey: "Name",
                valueKey: "Name",
                dropDownOnFocus: true,
                dropDownOrientation: "bottom"
            });

            $("#multiSelectCombo").igCombo({
                width: 300,
                dataSource: colors,
                textKey: "Name",
                valueKey: "Name",
                multiSelection: {
                    enabled: true
                },
                dropDownOrientation: "bottom"
            });

            $("#checkboxSelectCombo").igCombo({
                width: 300,
                dataSource: colors,
                textKey: "Name",
                valueKey: "Name",
                multiSelection: {
                    enabled: true,
                    showCheckboxes: true
                },
                dropDownOrientation: "bottom"
            });

        });

    </script>

</body>
</html>

Ignite UI for jQuery | Samples