ui-grid, could not understand if I can set the editDropdownOptionsArray from a $http.get

Question

I was looking at the Ui Grid tutorials and saw them using a filter to populate drop downs within each row of the grid.

I am trying to understand the concept and see if I may use this to get the options using a $http.get method or using a service.

Can someone point me to a better tutorial or guide me?

I wrote something like

    $scope.ContractDetails.columnDefs = [
        { name: 'Contract_Detail_Id', enableCellEdit: false, visible: false },
        { name: 'Contract_Id', enableCellEdit: false, visible: false },
        { name: 'Contract_Detail_Sl', displayName: 'Sl', enableCellEdit: false },
        { name: 'Contract_Cust_Location', displayName: 'Customer Location' },
        {
            name: 'Contract_Cust_Location', displayName: 'Customer Location',
            editableCellTemplate: 'ui-grid/dropdownEditor',
            editDropdownIdLabel: 'Loc_Id', editDropdownValueLabel: 'Loc_Name',
            editDropdownOptionsArray: $scope.clientLocs,
            cellFilter: 'mapClientLocs:row.grid.appScope.clientLocs:"Loc_Id":"Loc_Name"'
        },
        {
            name: 'Fixed_or_Percentage', displayName: 'Fixed %', editableCellTemplate: 'ui-grid/dropdownEditor',
            cellFilter: 'mapFixed', editDropdownValueLabel: 'Fixed_or_Percentage', editDropdownOptionsArray: [
            { id: false, Fixed_or_Percentage: 'Fixed' },
            { id: true, Fixed_or_Percentage: 'Percentage' }
            ]
        },
]

And added the two filters:

.filter('mapFixed', function () {
    var fixedHash = {
        false: 'Fixed',
        true: 'Percentage'
    };

    return function (input) {
        if (!input) {
            return '';
        } else {
            return fixedHash[input];
        }
    };
})
.filter('mapClientLocs', function (ClientDataService) {
    var clientLocs = {};
    ClientDataService.GetClientLocs()
    .then(function (response) {
        clientLocs = response;
        console.log("response", response);
        return clientLocs;
    });
    return clientLocs;
});

The first filter is working fine. But the one where I am trying to get the data from the service, that is not working. I get an error like angular.js:11655 TypeError: fn.apply is not a function

Answer 1

Your mapClientLocs filter does not do what you are intending. It's returning an empty object immediately and then basically throwing away the result once the asynchronous request finishes. You should read up on promises if you don't understand why.

Basically, a filter is not a good place to write async calls. You'll want to do those in your controller before passing the data to ui-grid.

Answer 2

As Dana mentioned, a filter is not the appropriate place to do this, and it should be done in the controller.

If I understand this correctly, following logic like this should work:

ClientDataService.GetClientLocs()
        .then(function (response) {
            $scope.ContractDetails.columnDefs[4].editDropdownOptionsArray = response;
        });