How to Get Filtered data from paged ui-grid

Question

I'd like to get filtered data from a ui-grid when the paging feature is enabled. In general case I used

 $scope.gridApi.core.on.filterChanged($scope, function () {

                if ($scope.gridApi.grid.columns[1].filter.term != "" && $scope.gridApi.grid.columns[1].filter.term != undefined) {
                    var dd =$scope.gridApi.core.getVisibleRows($scope.gridApi.grid);
                    console.log(dd);
            });

but the code doesn't work well when the paging is enabled, it return only rows of the first page. but I need all the filtered data.

the easiest solution is filter data source based on the filter term but it decreases the performance dramatically.

any advice?

Answer 1

Note: I didn't try it with pagination, just grouping, but hope it gives you a hint.


Try using the rowsVisibleChanged event together with the filterChanged event. You have to use both because if you use the filterChanged event alone it won't work since it's launched before the rows are actually filtered. I use a flag variable (filterChanged) to know if a filter was modified.

Then, use something like lodash to filter the $scope.gridApi.grid.rows that have the visible property set to true:

// UI-Grid v.3.0.7
var filterChanged = false;

$scope.gridApi.core.on.filterChanged($scope, function() {
    filterChanged = true;
});

$scope.gridApi.core.on.rowsVisibleChanged($scope, function() {
    if(!filterChanged){
        return;
    }
    filterChanged = false;
    // The following line extracts the filtered rows
    var filtered = _.filter($scope.gridApi.grid.rows, function(o) { return o.visible; });
    var entities = _.map(filtered, 'entity'); // Entities extracted from the GridRow array
});

Answer 2

I was able to export filtered data across all pagination via uiGridExporterService service. Thanks to @Patricio's above answer for the hint.

//you can set it to ALL or VISIBLE or SELECTED
var columnsDownloadType = uiGridExporterConstants.ALL;

//get all the visible rows across all paginations
var filtered = _.filter(grid.api.grid.rows, function (o) {
    return o.visible;
});

//get the entities of each of the filtered rows
var entities = _.map(filtered, 'entity');

//get all or visible column headers of this grid depending on the columnsDownloadType
var exportColumnHeaders = grid.options.showHeader ? uiGridExporterService.getColumnHeaders(grid, columnsDownloadType) : [];

var exportData = [];
/**this lodash for-each loop will covert the grid data into below array of array format 
* [[{value:'row1col1value'},{value:'row1col2value'}],[{value:'row2col1value'},{value:'row2col2value'}].....]
* uiGridExporterService.formatAsCsv expects it in this format
**/
_.each(entities, function (row) {
    var values = [];
    _.each(exportColumnHeaders, function (column) {
        var value = row[column.name];
        values.push({value: value});
    });
    exportData.push(values);
});

//format the header,content in csv format
var csvContent = uiGridExporterService.formatAsCsv(exportColumnHeaders, exportData, ',');

//export as csv file
uiGridExporterService.downloadFile(grid.options.exporterCsvFilename, csvContent, grid.options.exporterOlderExcelCompatibility);

Answer 3

I tried the custom exporter and it worked!

• Prerequisites :

  enableSelectAll:true,
  multiSelect:true,
  

• your controller needs :

  uiGridExporterService,uiGridExporterConstants
  

• app module needs :

  "ui.grid.selection"   ,"ui.grid.exporter"
  
  $scope.exportCSV = function(){
                       var exportService=uiGridExporterService;
                       var grid=$scope.gridApi.grid;
                       var fileName="myfile.csv";
  
                       exportService.loadAllDataIfNeeded(grid, uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE).then(function() {
                         var exportColumnHeaders = exportService.getColumnHeaders(grid, uiGridExporterConstants.VISIBLE);
  
                         $scope.gridApi.selection.selectAllVisibleRows();
  
                         var exportData = exportService.getData(grid, uiGridExporterConstants.SELECTED,uiGridExporterConstants.VISIBLE);
                         var csvContent = exportService.formatAsCsv(exportColumnHeaders, exportData, grid.options.exporterCsvColumnSeparator);
                         exportService.downloadFile(fileName, csvContent, grid.options.exporterOlderExcelCompatibility);
                         $scope.gridApi.selection.clearSelectedRows();
                       });
                     }