CODEWITHSUNDEEP
angularjsfilterexternalangular-ui-grid
Zuzu
Zuzu

Reputation: 1

Unable to clear data when no result using external filtering in UI.Grid (Angular)

I am using angular-ui-grid and it's really a powerfull lib. I am trying to use the externalFiltering option to have instant filter. I follows the tutorial but i am not able to clear grid data when the search return no data.

for testing purpose i have tried to empty data like this: 

$scope.gridOptions.data = [{title: '', category: '', releaseYear: '', length: ''}];

It works but not really clean code :/ If i don't specific action for clearing data, the old data are already there (even force refresh through uigrid api)

Bellow the full code

    angular.module('frontendApp').controller('MainCtrl', function ($scope, FilmService, uiGridConstants){

    var paginationOptions = {
      pageNumber: 1,
      pageSize: 25,
      sort: null
    };

    var lastCallFilter = '';

    $scope.gridOptions = {

      paginationPageSizes: [25, 50, 75],
      paginationPageSize: 25,
      enableFiltering: true,
      useExternalFiltering: true,
      useExternalPagination: false,
      useExternalSorting: false,
      columnDefs: [
        { name: 'title', width: '40%'},
        { name: 'category', field: 'category.name', enableFiltering: false},
        { name: 'releaseYear', enableFiltering: false},
        { name: 'length', enableFiltering: false}
      ]
      ,
      onRegisterApi: function( gridApi ) {
        $scope.gridApi = gridApi;
        $scope.gridApi.core.on.filterChanged($scope, function () {

          var grid = this.grid;
          lastCallFilter = grid.columns[0].filters[0].term

          // Check if a filter has been typed
          if (lastCallFilter){

            // Make a closure to keep value of lastCallFilter (keep in 'filter') during async process
            (function (filter) {

                // Make async call
                FilmService.querySummaryWithTitleFilter(filter).then(function (springDataResponse) {
                if(lastCallFilter == filter){

                  var data = springDataResponse._embeddedItems;
                  if (typeof(data) == "undefined") {

                   // ###################################################################
                   // If there is no data the data are cleared :( no really clean way... 
                   // ###################################################################   
                   $scope.gridOptions.data = [{title: '', category: '', releaseYear: '', length: ''}];

                  }
                  else {
                    // otherwise the data are updated
                    $scope.gridOptions.data = data;
                  }
                }
                });
            })(lastCallFilter);
          }

          // Otherwise normal datas are retrieved
          else {
            FilmService.querySummary().then(function(springDataResponse) {
              $scope.gridOptions.data = springDataResponse._embeddedItems;

            });
          }

        });
      }
    };


    FilmService.querySummary().then(function(springDataResponse) {
      $scope.gridOptions.data = springDataResponse._embeddedItems;
    });

Could tell me if there is a better way to do this ?

Regards

Upvotes: 0

Views: 2532

Answers (3)

Vedran
Vedran

Reputation: 11039

$scope.gridOptions.data = [] shows the No Data message but disables the grid and prevents you for clearing the filter that returned no data.

$scope.gridOptions.data = [0] shows an empty row but doesn't disable the grid.

At this moment I'm unaware of a way how to do this to behave the same as when not using external filters.

Upvotes: 2

GSpiteri
GSpiteri

Reputation: 1

I recently went through the same thing but decided to simply hide the grid i had issues with ng-show and ng-hide but if you use ng-if="vm.showHideGrid()" on the grid it works.

Upvotes: 0

michelem
michelem

Reputation: 14590

You don't need to clear the data variable, just display a message instead loading the grid if data is not present:

JS:

if (typeof (data) == "undefined") {
    $scope.noData = true;    
} else {
    // otherwise the data are updated
    $scope.gridOptions.data = data;
    $scope.noData = false;
}

HTML:

<p ng-if="noData">You haven't any data to be displayed.</p>
<div class="table-responsive" ng-if="!noData">
    <div ng-grid="gridOptions"></div>
</div>

Upvotes: 0

Related Questions