igGrid load data in the edit row dialog combo

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 customerDataList = []; // Global variable to hold the preloaded customer data

    // Function to preload the customer data
    function preloadCustomerData() {
        return $.ajax({
            type: "GET",
            url: "https://run.mocky.io/v3/4e14af6b-bf67-4b3c-aedb-48fe2152837e", // Your API URL to get customer data
            dataType: "json",
            success: function (data) {
                // Assuming the API returns an array of customers
                customerDataList = data; // Store the customer data globally
            },
            error: function () {
                alert("Error loading customer data");
            }
        });
    }

    // Call the function to preload the data before initializing the grid
    preloadCustomerData().done(function () {
        // Once the customer data is preloaded, initialize the grid
        initializeGrid();
    });

    // Function to initialize the grid
    function initializeGrid() {
        var gridData = [
            { ID: 1, CustomerID: "CUST01", Name: "John Doe" },
            { ID: 2, CustomerID: "CUST02", Name: "Jane Smith" },
            { ID: 3, CustomerID: "CUST03", Name: "Michael Brown" }
        ];

        $("#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",
                               ...