ctrlOptions with existing data, existing dropdown values not selected

[zulq]

Using appendgrid with drop down in one of the columns. However when I load existing data for edit, the existing options are not selected. Below is my code:

var sampleDetailsGrid = new AppendGrid({
                element: "Samples",
                uiFramework: "bootstrap4",
                iconFramework: "fontawesome5",
                iconParams: {
                    // Override the icon used on buttons
                    icons: {
                        append: "far fa-plus-square",
                        removeLast: "far fa-minus-square"
                    }
                },
                initRows: 1,
                hideButtons: {
                    moveUp: true,
                    moveDown: true
                },
                columns: [
                    {
                        name: "sampleDef",
                        display: "Sample Definition (Water,Salt etc)",
                        type: "select",
                        ctrlOptions: function (elem) {
                            $.getJSON("GetSampleDefinitions")
                                .done(function (data) {
                                    elem.appendChild(new Option("Please select..", "", false, true));
                                    data.forEach(sampleType => {
                                        elem.appendChild(new Option(sampleDef.name, sampleDef.name));
                                    });
                                });
                        }
                    },
                    {
                        name: "estimatedNumbers",
                        display: "Estimated Quantity"
                    },                    
                    {
                        name: "DateGiven",
                        type: "hidden",
                    }
                    ,
                    {
                        name: "GivenBy",
                        type: "hidden",
                    }
                ],
                // Optional CSS classes, to make table slimmer!
                sectionClasses: {
                    table: "table-sm",
                    control: "form-control-sm",
                    buttonGroup: "btn-group-sm"
                }
            });

            function bindData() {
                $.getJSON("GetSamplesDefinitionsById", { parentId: $("#Id").val() })
                    .done(function (data) {
                        if (Array.isArray(data) && data.length) { sampleDetailsGrid.load(data); }
                    });

            }

            bindData();

[hkalbertl]

Hi zulq,

If a function is specified for ctrlOptions, AppendGrid will expect the options are added manually (and ready to use) by it. So, options are not generated in your case. Alternatively, you can get your options first and initialize AppendGrid after that. For example:

// Get select options first
$.getJSON("GetSampleDefinitions").done(function (data) {
  // Implement the `generateOptions` function to convert server response to AppendGrid supported option style
  // Ref: http://appendgrid.apphb.com/Documentation#link-ctrlOptions
  var dropDownOptions = generateOptions(data);
  var sampleDetailsGrid = new AppendGrid({
    columns: [
    {
        name: "sampleDef",
        display: "Sample Definition (Water,Salt etc)",
        type: "select",
        ctrlOptions: dropDownOptions 
    },
    ...
  });
});

Hope it can help. Thanks for using AppendGrid!

[zulq]

@hkalbertl options are generated but after the data was already loaded. I've resolved it anyway, thanks.