Available in the OSS Version

Combo Box - Grid Integration

This sample demonstrates the use of the igCombo control as an editor in the igGrid control.
ManufacturerNameDescriptionCategory
Add new row
Dough MastersBreadWhole grain breadFood
Smith BrothersMilkLow fat milkBeverages
Healthy DrinksVint SodaAmericana Variety - Mix of 6 flavorsBeverages
Healthy DrinksHavina ColaThe Original Key Lime ColaBeverages
Healthy DrinksFruit PunchMango flavor, 8.3 Ounce Cans (Pack of 24)Beverages
Healthy DrinksCranberry Juice16-Ounce Plastic Bottles (Pack of 12)Beverages
Healthy DrinksPink Lemonade36 Ounce Cans (Pack of 3)Beverages
Western ElectronicsDVD Player1080P Upconversion DVD PlayerElectronics
Western ElectronicsLCD HDTV42 inch 1080p LCD with Built-in Blu-ray Disc PlayerElectronics

This sample is designed for a larger screen size.

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

When using the igCombo control as an editor in the igGrid control, a formatter function is necessary to show the display text of the combo control. For performance reasons, the grid uses only one instance of the combo. During editing, the igCombo control commits its selected value to the grid and a JavaScript function is used to persist the selected text when the combo is no longer editing a cell.

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">
        #updatedMessage
        {
            padding-top: 20px;
        }

        @media all and (max-width:360px) {
            #gridProducts {
                font-size: 14px;
            }
        }
    </style>

    <div id="gridProducts"></div>
    <div id="updatedMessage"></div>

    <script>

        $(function () {

            var northwindProductsJSON = [
                { "ID": 0, "Manufacturer": "Dough Masters", "Name": "Bread", "Description": "Whole grain bread", "ReleaseDate": "1992-01-01T00:00:00.000Z", "DiscontinuedDate": null, "Rating": 4, "Price": "2.5", "CategoryID": 0 },
                { "ID": 1, "Manufacturer": "Smith Brothers", "Name": "Milk", "Description": "Low fat milk", "ReleaseDate": "1995-10-01T00:00:00.000Z", "DiscontinuedDate": null, "Rating": 3, "Price": "3.5", "CategoryID": 1 },
                { "ID": 2, "Manufacturer": "Healthy Drinks", "Name": "Vint Soda", "Description": "Americana Variety - Mix of 6 flavors", "ReleaseDate": "2000-10-01T00:00:00.000Z", "DiscontinuedDate": null, "Rating": 3, "Price": "20.9", "CategoryID": 1 },
                { "ID": 3, "Manufacturer": "Healthy Drinks", "Name": "Havina Cola", "Description": "The Original Key Lime Cola", "ReleaseDate": "2005-10-01T00:00:00.000Z", "DiscontinuedDate": "2006-10-01T00:00:00.000Z", "Rating": 3, "Price": "19.9", "CategoryID": 1 },
                { "ID": 4, "Manufacturer": "Healthy Drinks", "Name": "Fruit Punch", "Description": "Mango flavor, 8.3 Ounce Cans (Pack of 24)", "ReleaseDate": "2003-01-05T00:00:00.000Z", "DiscontinuedDate": null, "Rating": 3, "Price": "22.99", "CategoryID": 1 },
                { "ID": 5, "Manufacturer": "Healthy Drinks", "Name": "Cranberry Juice", "Description": "16-Ounce Plastic Bottles (Pack of 12)", "ReleaseDate": "2006-08-04T00:00:00.000Z", "DiscontinuedDate": null, "Rating": 3, "Price": "22.8", "CategoryID": 1 },
                { "ID": 6, "Manufacturer": "Healthy Drinks", "Name": "Pink Lemonade", "Description": "36 Ounce Cans (Pack of 3)", "ReleaseDate": "2006-11-05T00:00:00.000Z", "DiscontinuedDate": null, "Rating": 3, "Price": "18.8", "CategoryID": 1 },
                { "ID": 7, "Manufacturer": "Western Electronics", "Name": "DVD Player", "Description": "1080P Upconversion DVD Player", "ReleaseDate": "2006-11-15T00:00:00.000Z", "DiscontinuedDate": null, "Rating": 3, "Price": "35.88", "CategoryID": 2 },
                { "ID": 8, "Manufacturer": "Western Electronics", "Name": "LCD HDTV", "Description": "42 inch 1080p LCD with Built-in Blu-ray Disc Player", "ReleaseDate": "2008-05-08T00:00:00.000Z", "DiscontinuedDate": null, "Rating": 3, "Price": "1088.8", "CategoryID": 2 }
            ],

            northWindCategoriesJSON = [
                { "ID": 0, "Name": "Food" },
                { "ID": 1, "Name": "Beverages" },
                { "ID": 2, "Name": "Electronics" }
            ];

            //Formatting for igGrid cells to display igCombo text as opposed to igCombo value
            function formatCategoryCombo(val) {
                var i, category;
                for (i = 0; i < northWindCategoriesJSON.length; i++) {
                    category = northWindCategoriesJSON[i];
                    if (category.ID == val) {
                        val = category.Name;
                    }
                }

                return val;
            }

            function showFeedback(elementID, message) {
                var selector = '#' + elementID;
                $(selector).stop(true, true).html(message)
                    .fadeIn(500).delay(3000).fadeOut(500);
            }

            //Grid Initialization
            $("#gridProducts").igGrid({
                dataSource: northwindProductsJSON,
                autoGenerateColumns: false,
                primaryKey: "ID",
                autoCommit: true,
                width: "100%",
                height: "360px",
                columns: [
                    { headerText: "", key: "ID", dataType: "number", hidden: true },
                    { headerText: "Manufacturer", key: "Manufacturer", dataType: "string", width: "20%" },
                    { headerText: "Name", key: "Name", dataType: "string", width: "20%" },
                    { headerText: "Description", key: "Description", dataType: "string", width: "30%" },
                    { headerText: "Category", key: "CategoryID", dataType: "number", width: "30%", formatter: formatCategoryCombo }
                ],
                features: [
                    {
                        name: 'Updating',
                        columnSettings: [{
                            //The combo is defined as an editor provider. Combo options are defined under 'editorOptions'.
                            columnKey: "CategoryID",
                            editorType: 'combo',
                            required: true,
                            editorOptions: {
                                mode: "dropdown",
                                dataSource: northWindCategoriesJSON,
                                textKey: "Name",
                                valueKey: "ID"
                            }
                        }],
                        editRowEnded: function () {
                            //To access the updated igGrid data
                            northwindProductsJSON = $("#gridProducts").igGrid().data().igGrid.dataSourceObject();

                            //Show feedback
                            var message = "The grid's data has been updated...";
                            showFeedback("updatedMessage", message);
                        }
                    }
                ]
            });
        });

    </script>

</body>
</html>