0

I've been struggling for more than 1 day trying to find a solution to pre-fill angular-ui-grid dropdown with data from the backend. And yes, I've seen many similar questions, but none of them talks about filling a selectOption with real data from backend.

It works fine with a pre-defined array like this: $scope.tiposArquivoSelecionados = [{ value: 1, label: 'First'}, { value: 2, label: 'Second'}, { value: 3, label: 'Third'}];

enter image description here

But when I try to fill the selectOption with data gathered from backend, the selectOption is not displayed. Take a look:

enter image description here

The data is gathered successfully, the grid is rendered successfully, what makes me think it's a timing problem.

Here is a list of a few workarounds I tried (all failed) to solve the possible timing problem:

  • refresh the grid after gathering the data;
  • put the columnDefs inside the service success callback
  • put a ng-if in the .html to display the grid only if the array.length > 0

None of them worked =/


selectOptions array declaration:

$scope.tiposArquivoGridSelectOptions = [];

Code from the GridOptions.columnDefs:

{
  field: 'controleArquivoId',
  name: 'Tipo de Arquivo',
  cellClass: 'ui-grid-cell-padding',
  enableFiltering: true,
  enableSorting: true,
  enableHiding: true,
  filter: {
    type: uiGridConstants.filter.SELECT,
    selectOptions: $scope.tiposArquivoGridSelectOptions,
  },
  sort: {
    direction: uiGridConstants.ASC,
    priority: 3
  }
},

In my controller, I have the init() method, which calls the service to gather the data from the backend and fills the selectOption array.

AutorizacoesReenvioService.listarTiposArquivoPorAno(moment().year()).then(
  function (success) {
    var responseData = success.data;

    responseData.forEach(function(item) {
      $scope.tiposArquivoGridSelectOptions.push(
        {
          value: item.id,
          label: item.nomeArquivo
        }
      );
    });

    $scope.gridApi.core.refresh();
  },
  function (error) {
    console.error(success.data);
  }
);
3
  • I tried using a plunker, but found no problems... There is no need to refresh the grid. Please check this plunker. The dropdown is toggled by pressing the 'toggle filtering' button. Commented Mar 22, 2019 at 8:37
  • Thank you @Remko, but the problem is when I try to fill the dropdown options with data from backend using $http. Commented Mar 22, 2019 at 12:41
  • That should not make any difference. Check the plunker again, I changed the toggleFiltering function (makes even less sense now ;), but it still works. Could you try and make a plunker showing the issue you are having, since I cannot reproduce your problem? Commented Mar 22, 2019 at 15:26

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.