Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to do server-side sorting/filtering in angular-grid?

There is currently an open issue to add server-side sorting/filtering to the angular-grid project. Has anyone found a work-around to implement this functionality with the current grid implementation? Hacky or not, I'll still take it.

like image 232
Travis Collins Avatar asked Apr 27 '15 16:04

Travis Collins


People also ask

Is it possible to add server-side sorting/filtering to angular-grid project?

There is currently an open issue to add server-side sorting/filtering to the angular-grid project. Has anyone found a work-around to implement this functionality with the current grid implementati... Stack Overflow About Products For Teams Stack OverflowPublic questions & answers

How do I enable server-side sorting in the grid?

This section covers Server-Side Sorting using the Server-Side Row Model. Sorting is enabled in the grid via the sortable column definition attribute. Some example column definitions with sorting enabled are shown below: For more details on sorting configurations see the section on Row Sorting.

What is AG-grid for angular?

Introduction In this article, we are going to see ag-Grid for Angular applications. ag-Grid provides a feature to display the data in proper grid format with filtering and sorting features already included in it and many more. Ag-grid is a fully-featured and highly customizable javascript data grid.

How do I sort the columns in the grid?

The grid is using the Full Store by setting the grid property serverSideStoreType = full. All columns have sorting enabled using the defaultColDef.sortable = true. Rows are loaded once. All sorting is then subsequently done by the grid.


1 Answers

You can have more information here:

http://www.ag-grid.com/angular-grid-virtual-paging/

Any column can be sorted by clicking the header. When this happens, the datasource is called again with the new sort options.

The columns Age, Country and Year can be filtered. When this happens, the datasource is called again with the new filtering options.

  $scope.gridOptions = {
        enableServerSideSorting: true,
        enableServerSideFilter: true
  }
  ...
  $scope.gridOptions.api.setDatasource(dataSource);

The datasource has a getRows() which can use params.startRow and params.endRow, plus params.sortModel, params.filterModel to request the data from the server via an http call.

like image 51
Micaël Félix Avatar answered Sep 29 '22 15:09

Micaël Félix