Devexpress AngularJS get dynamic data for Pivot

Question

In my AngularJS web app, I'm doing a Pivot with devexpress. Particularly, I'm using the Field Chooser: https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/FieldChooser/AngularJS/Light/

In the example there are static data. I have to retrieve them from the server. So, I wrote this:

$scope.testData = null;
$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
   fields: [{
     caption: "Nome",
     dataField: "fullName",
     area: "row"
    }, {
     caption: "Country",
     dataField: "country",
    area: "column"
  }, {
    caption: "Count",
    dataField: "countOne",
    dataType: "number",
    summaryType: "sum",
    area: "data"
  }],
     store: $scope.testData
  });

  $scope.pivotGridOptions = {
     allowSortingBySummary: true,
     allowSorting: true,
     allowFiltering: true,
     showBorders: true,
     dataSource: $scope.pivotGridDataSource,
     fieldChooser: {
        enabled: false
     }
   },

   $scope.fieldChooserOptions = {
      dataSource: $scope.pivotGridDataSource,
         texts: {
            allFields: "All",
            columnFields: "Columns",
            dataFields: "Data",
            rowFields: "Rows",
            filterFields: "Filter"
           },
          width: 400,
          height: 400,
          bindingOptions: {
             layout: "layout"
          }
      };

  // Now I call the function to retrieve data
  $scope.getTestData = () => {
     // I call the server and save the data
     ........
      $scope.testData = result;
  }

The problem is that the table, after the calling, is still empty. There is written "No data". Why? I also tried to write

$scope.pivotGridDataSource.load();
$scope.pivotGridDataSource.reload();

after the call to the server, but it doesn't work yet.

Answer 1

The problem is in your store, so do something like this

var dataStore = new DevExpress.data.CustomStore({
                load: function (loadOptions) {
                    var d = $.Deferred();
                    $.ajax({
                        url: UrlApi,
                        method: "GET",
                    }).done(function (result) {
                        d.resolve(result, {
                        });
                    });
                    return d.promise();
                },
                key: "Id",
            });


$scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
   .......
     store: dataStore
  });

See this code below, it is jquery, but AngularJS is basically the same

var dataStore = new DevExpress.data.CustomStore({
                load: function (loadOptions) {
                    var d = $.Deferred();
                    $.ajax({
                        url: UrlApi,
                        method: "GET",
                    }).done(function (result) {
                        d.resolve(result, {
                        });
                    });
                    return d.promise();
                },
                key: "Id",
            });
        $("#pvtSales").dxPivotGrid({
            showBorders: true,
            "export": {
                enabled: true,
                fileName: "Sales"
            },
            dataSource: {
                fields: [{
                    caption: "Fecha",
                    dataField: "maeFecha",
                    width: 350,
                    area: "row"
                }, {
                    caption: "Nombre",
                    dataField: "maeNombre",
                    dataType: "number",
                    summaryType: "count",
                    area: "data"
                }, {
                    dataField: "maeGestion",
                    width: 350,
                    area: "column"
                }],
                store: dataStore
            }
        });

And see the results