Available in the OSS Version

Combo Box - Load on Demand

This sample demonstrates how to use the combo box load-on-demand and paging functionality using a remote OData data source.

This sample is designed for a larger screen size.

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

Type a value in the combo to further filter items. Then, scroll to choose the specific item to select.

Code View

Copy to Clipboard 
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/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.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>
    <style type="text/css">
        .propName { font-weight: bold; border-bottom: 2px dotted Gray; padding-right: 10px; }
        .propValue { font-weight: normal; border-bottom: 2px dotted Gray; }
        .boxed { border: 1px solid Gray; margin: 3px 3px 3px 3px; padding: 3px 3px 3px 3px; border-radius: 3px; font-weight: bold; }
        .dropDownHeaderFooter
         {
            border: 1px solid Gray; 
            margin: 3px 3px 3px 3px; 
            padding: 3px 3px 3px 3px; 
            border-radius: 3px; 
            font-weight: bold; 
         }
        #selItemLabel { font-weight: bold; margin: 20px 3px 3px 3px; }
    </style>

    <div>
        <!--Combo Rendering-->
        <input id="combo" />
    </div>
    <div id="itemData">
        <!-- Selected item display panel -->
        <div id="selItemLabel">Selected Item</div>
        <table id="table" class="boxed"></table>
    </div>

    <script id="selectedItemTemplate" type="text/x-jquery-tmpl">
        <tr>
            <td class="propName">${ propertyName }</td>
            <td class="propValue">${ propertyValue }</td>
        </tr>
    </script>

    <script>

        //  Helper function to put an item data token to the selected item table utilizing a jQuery template
        var selectedItemTemplate = '<tr><td class="propName">${propertyName}</td><td class="propValue">${propertyValue}</td></tr>';
        function addItemValue(tableObject, item, itemProp) {
            if (!($.isFunction(item[itemProp]))) {
                $($.ig.tmpl(selectedItemTemplate,
                    {
                        "propertyName": itemProp,
                        "propertyValue": item[itemProp]
                    })
                ).appendTo(tableObject);
            }
        }

        $(function () {

            //  Hide the selected item div and initialize the selected item row template
            $("#itemData").hide();

            $("#combo").igCombo({
                loadOnDemandSettings: {
                    enabled: true,
                    pageSize: 25
                },
                responseDataKey: "d.results.Results",
                responseTotalRecCountKey: "d.results.Count",
                dataSource: "https://www.igniteui.com/api/products?callback=?",
                width: "400px",
                textKey: "ProductName",
                valueKey: "ID",
                virtualization: true,
                autoComplete: true,
                headerTemplate: "<div class='dropDownHeaderFooter'>Available Products</div>",
                footerTemplate: "<div class='dropDownHeaderFooter'>Product Count: {0} / {3}</div>",
                itemTemplate: "<div>${ProductName} (${QuantityPerUnit})</div>",
                placeHolder: "Please, select a product",
                filterExprUrlKey: 'startsWith',
                highlightMatchesMode: "startsWith",
                filteringCondition: "startsWith",
                selectionChanged: function (evt, ui) {
                    //  Clear the selected item table and hide the div
                    $("#table").empty();
                    $("#itemData").hide();
                    //  Add selected item data only if an item has been selected
                    if (ui.items && ui.items[0]) {
                        //  Get the selected item
                        var itemData = ui.items[0].data;
                        //  Display item's valueKey and textKey settings
                        addItemValue($("#table"), itemData, ui.owner.options.valueKey);
                        addItemValue($("#table"), itemData, ui.owner.options.textKey);
                        //  Show the selected item div
                        $("#itemData").fadeIn(500);
                    }
                }
            });
        });

    </script>

</body>
</html>