igGrid load remote data to the 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" }
    ];

    // Initialize the grid
    $("#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: "remote", 
                            filterExprUrlKey: "filter", 
                            filteringCondition: "startsWith", 
                            dataSource: "https://run.mocky.io/v3/4e14af6b-bf67-4b3c-aedb-48fe2152837e",
                            textKey: "CustomerName",
                            valueKey: "CustomerID"
                        }
                    }
                ],
                editRowStarted: function (evt, ui) {
                    if (ui.rowAdding) return; // No need to proceed when adding a new row
                    
                    var idcell = $("#grid").igGridUpdating("editorForKey", 'CustomerID'),
                        rowData = $("#grid").igGrid("findRecordByKey", ui.rowID);

                    if (!rowData) {
                        alert("Row data not found.");
                        return;
                    }

                    var customerID = rowData.CustomerID;

                    // Delay to ensure data is loaded
                    setTimeout(() => {
                        var comboDataSource =...