igGrid with combo editor

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/data-files/adventureworks.min.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<table id="grid"></table>

JavaScript

$(function () {
    var gridData = [
        { ID: 1, CustomerID: "CUST01" },
        { ID: 2, CustomerID: "CUST02" },
        { ID: 3, CustomerID: "CUST03" }
    ];

    var customerDataList = []; // Will be populated from the API

    // Fetch customer data from the API before initializing the grid
    $.ajax({
        type: "GET",
        url: "https://run.mocky.io/v3/4e14af6b-bf67-4b3c-aedb-48fe2152837e",
        dataType: "json",
        success: function (data) {
            customerDataList = data;

            // Initialize the grid after the customer data is loaded
            $("#grid").igGrid({
                primaryKey: "ID",
                autoCommit: true,
                columns: [
                    { headerText: "ID", key: "ID", dataType: "number" },
                    { headerText: "Customer", key: "CustomerID", dataType: "string" }
                ],
                dataSource: gridData,
                autoGenerateColumns: false,
                features: [
                    {
                        name: "Updating",
                        editMode: "dialog",
                        columnSettings: [
                            {
                                columnKey: "CustomerID",
                                editorType: "combo",
                                editorOptions: {
                                    mode: "editable",
                                    filteringType: "local", // Use 'local' since we're using local data
                                    dataSource: customerDataList, // Set the data source to the loaded data
                                    textKey: "CustomerName",
                                    valueKey: "CustomerID"
                                }
                            }
                        ],
                        editRowStarted: function (evt, ui) {
                            var idCell = $("#grid").igGridUpdating("editorForKey", 'CustomerID');

                         ...