-1

Does anyone know why sorting is not working in angular's ui-gird ? It looks like setting type: 'string' and explicit enableSorting has no impact.

I am using ui-gird v4.0 but it neither works with earlier version.

Options

//ui-grid options
$scope.gridOptions = {
  paginationPageSize: 30,
  paginationPageSizes: [30, 60, 90],
  useExternalSorting: true,
  useExternalPagination: true,
  rowHeight: 40,
  showGridFooter: false,
  enableSorting: true,
  cellEditableCondition: true,
  exporterMenuCsv: true,
  exporterMenuPdf: false,
  enableGridMenu: true,
  columnDefs: [
    {field: 'actions', width: '100', enableFiltering: false, enableSorting: false, enableHiding: false, enableColumnMenu: false, cellTemplate: cellTemplate, headerCellTemplate: actionHeaderTemplate},
    {field: 'uploader', width: '150'},
    {field: 'files_name', width: '150', type: 'string', enableSorting: true},
    {field: 'sample_name', width: '120'},
    {field: 'ena_accession_nr', width: '150'},
    {field: 'pre_assembled', width: '130'},
    {field: 'sequencing_platform', width: '170'},
    {field: 'sequencing_type', width: '145'},
    {field: 'isolation_source', width: '140'},
    {field: 'source_notes', width: '120', enableSorting: false},
    {field: 'pathogenic', width: '105'},
    {field: 'pathogenicity_notes', width: '160', enableSorting: false},
    {field: 'organism', width: '95'},
    {field: 'strain', width: '75'},
    {field: 'subtype', width: '90'},
    {field: 'collection_date', width: '130'},
    {field: 'collected_by', width: '100'},
    {field: 'country', width: '120'},
    {field: 'region', width: '120'},
    {field: 'city', width: '100'},
    {field: 'zip_code', width: '100'},
    {field: 'latitude', width: '100'},
    {field: 'longitude', width: '100'},
    {field: 'location_notes', width: '30%', enableSorting: false},
    {field: 'notes', width: '30%', enableSorting: false},
  ],
  onRegisterApi: function(gridApi) {
    $scope.gridApi = gridApi;
    $scope.gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
      paginationOptions.pageNumber = newPage;
      paginationOptions.pageSize = pageSize;
      $scope.paginate();
    });
  }
};

Paginator

// Function gets paginated data
$scope.paginate = function() {

  var successCallback = function(response) {
    $scope.gridOptions.data = [];
    $scope.gridOptions.totalItems = response.data.count;

    // Normalize endpoint data -transform it to samples
    for (var index in response.data.data) {
      var samples = response.data.data[index][1]['metadata'];
      var filesId = response.data.data[index][1]['files'].map(function(file){ return file.file_id; });

      samples['ids'] = filesId.join();
      samples['files_name'] = file.filename;
      samples['sample_name'] = response.data.data[index][0];

      // add samples to grid data
      $scope.gridOptions.data.push(samples);
    }
  }

  var errorCallback = function(response) {
    var message = (response.data['message'] != undefined) ? response.data.message : response.data.non_field_errors[0];
    alert.show('Error: ' + message, 'danger');
  }

  var url = 'app/api/v1/user/samples?limit=' + paginationOptions.pageSize + '&page=' + paginationOptions.pageNumber;
  $http.get(url).then(successCallback, errorCallback);
}

Data

// Example of content of $scope.gridOptions.data[0]
{
  city : ""
  collected_by : ""
  collection_date : "Unknown"
  country : "Tanzania"
  created_on : "2016-12-12T09:32:46.076532Z"
  ena_accession_nr : ""
  file_upload : "c9696fa4-421c-422c-9dac-039ceabab7f5"
  files_name : "KLMC2.fna"
  id : "c37e3963-6f68-443f-b076-aed7b975872d"
  ids : "c9696fa4-421c-422c-9dac-039ceabad7a5"
  isolation_source : "Other"
  latitude : 0
  location_notes : ""
  longitude : 0
  notes : ""
  organism : "Unknown"
  pathogenic : "Unknown"
  pathogenicity_notes : ""
  pre_assembled : "Yes"
  region : ""
  sample_name : "KLMC2"
  sequencing_platform : ""
  sequencing_type : "Unknown"
  source_notes : ""
  strain : ""
  subtype : ""
  uploader : "compare"
  zip_code : ""
}
2
  • Are you not able to sort completely or its any specific scenario where you have the issue. Commented Dec 12, 2016 at 16:15
  • I am not able to sort completely Commented Dec 12, 2016 at 17:42

1 Answer 1

3

The sorting was not working due to grid option (useExternalSorting) that prevents the internal sorting from executing.

Solution: Set boolean to false on useExternalSorting option.

useExternalSorting: false

Sign up to request clarification or add additional context in comments.

Comments

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.