ui-grid 3.0 and editDropdownOptionsArray with $http

[xavadu]

Hello,

It isn't possible to assign editDropdownOptionsArray to a columDefs loading it async with $http?

PoC:

CountryModel.get().then(function(r){
    $scope.countries = r.data.data;
});

$scope.gridOptions = {
    columnDefs: [
         {field:'country_iso', displayName:'Country ISO',
                editableCellTemplate: 'ui-grid/dropdownEditor', 
                editDropdownOptionsArray: $scope.countries,
                editDropdownIdLabel: 'country_iso',  
                editDropdownValueLabel: 'country_name'
        },
    ]
}

or any solution to accomplish it?
Thanks

[PaulL1]

It is, but not via an interim variable. This is a pointer thing - you're making editDropdownOptionsArray a pointer to $scope.countries when $scope.countries is empty - so it's a pointer to an empty array. Then later you replace the $scope.countries pointer with a pointer to a new array, but the editDropDownOptionsArray isn't updated. If you instead did:

CountryModel.get().then(function(r){
    $scope.gridOptions.columnDefs[0].editDropdownOptionsArray = r.data.data;
});

it would probably work.

[xavadu]

It worked!

Thanks!

[crediblebytes]

Shouldn't the correct functionality of editDropdownOptionsArray be expected to be a pointer? Order of the columns can change.

[PaulL1]

It should be expected to be a pointer. But the problem in this example was outside ui-grid:

var A = [1, 2, 3];
var B = A;
A = [3, 4, 5];

Irrespective of ui-grid, B is still pointing to [1, 2, 3]. In the example above @xavadu never set the dropdown options into a variable that ui-grid could see, equivalent to giving ui-grid B and expecting us to somehow now that A has changed.

[jainrocks]

@PaulL1 It worked! But is there any other way of not using " $scope.gridOptions.columnDefs[0]" since the colDefs may change regularly.

[tseanf]

I have this working, instead of assigning a new array instance, just loop through your data returned and .push it into the existing array and all will be well.

        if (promise.data) {
            promise.data.forEach((item) => list.push(item));
        }

[alexey-vasyunin]

@tseanf Could you show demo with your solution, please? At plnkr or real site.

[lacivert]

@alexey-vasyunin I think this would be for the same example;

CountryModel.get().then(function(r){
    // $scope.gridOptions.columnDefs[0].editDropdownOptionsArray = r.data.data; //not this but same as
    r.data.data.forEach((item) => $scope.countries.push(item));
});