Search code examples
angular-ui-grid

UI-Grid SortChanged not called on expandable grid


UI-Grid: v3.2.1

When attempting to sort a column in an expanded grid I have noticed that the column does not call our SortChanged callback.

We are using external sorting in combination with expandable grids.

We set up sorting with the following call

controller.gridOptions = {
  data: controller.myData,
  enableHorizontalScrollbar: 0,
  enableVerticalScrollbar: 0,
  useExternalSorting: true,
  expandableRowTemplate: urls.SubGridTemplate,
  enableGridMenu: true,
  rowHeight: gridRowHeight,
  minRowsToShow: minRowsToShow,
  enableFiltering: true,
  useExternalFiltering: true,
  enableSelectionModeToggle: true,
  columnDefs: templates.getGridColumnDefinitions(
    { advancedFilterChanged: advancedFilterChanged },
    controller.gridSettings
  )
};

Then

angularGridApi.core.on.sortChanged($scope, sortChanged);

We then setup the expandable grid with

  angularGridApi.expandable.on.rowExpandedStateChanged(
    $scope,
    retrieveDetailRows
  );

Solution

  • Expandable grids do not appear to use the $scope.core.on.sortChanged($scope, sortChanged).

    In my case the default sorting algorithms were defaulting to string because of this caveat.

    "The sort algorithm is chosen based on the column type. ui-grid will guess the type based on the data, although if you load data asynchronously after the columns it will often decide all your columns are string." Sorting Documentation

    Explicitly setting column type fixed this for me.

    {
      field: "myDataField",
      displayName: "My Column Header",
      type: "number",
      minWidth: 93,
      maxWidth: 120
    }
    

    If you need a more complex sort you can set a custom sort on each column.