igGrid editing with dialog with combo editor

by georgianastasov

HTML

<!-- 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" />

    <!-- Used to style the API Viewer and Explorer UI -->
    <link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />

    <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>

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

JavaScript

$(function () {
						var data = [
                { ID: 1, OfficeCode: "OC01", Name: "John" },
                { ID: 2, OfficeCode: "OC02", Name: "Mary" },
                { ID: 3, OfficeCode: "OC03", Name: "Steve" },
                { ID: 4, OfficeCode: "OC01", Name: "Jack" },
                { ID: 5, OfficeCode: "OC02", Name: "Stacy" }
            ];
            
            function loadOfficeData() {
                return $.ajax({
                    url: 'https://run.mocky.io/v3/f110b67f-95ce-430d-aaed-73ac6e33709c', // Mock API URL
                    method: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        return response; // Returns the office data from the API
                    },
                    error: function (xhr, status, error) {
                        console.error("Error loading data from API:", error);
                    }
                });
            }

            loadOfficeData().done(function (officeData) {
                // Initialize the grid after the data is loaded
                $("#grid").igGrid({
                    primaryKey: "ID",
                    autoCommit: true,
                    columns: [
                        { headerText: "ID", key: "ID", dataType: "number" },
                        { headerText: "Name", key: "Name", dataType: "string" },
                        { headerText: "Office", key: "OfficeCode", dataType: "string" }
                    ],
                    dataSource: data,
                    autoGenerateColumns: false,
                    features: [
                        {
                            name: "Updating",
                            enableAddRow: true,
                            enableDeleteRow: true,
                            editMode: "dialog",
                            columnSettings: [
                                {
                                    columnKey: "OfficeCode",
                 ...