Angular JS: get top ten contents of ng-grid

Question

I am new to angular JS. Working on ng-grid.the table contains variable data rows. i.e the grid can have 10 rows or 27 rows or even greater than that. I am currently defining the column defs as follows

$scope.gridOptions = { 


        data: 'evnts',
        enableColumnResize: false,
        enableRowSelection: false,
        enableCellSelection: false,
        enableSorting:true,
        multiSelect: false,
        showFilter: false,
        showColumnMenu: false,
        plugins: [new ngGridFlexibleHeightPlugin()],
        selectedItems: $scope.selectedRows,
         //For Impact Column        
         //filterOptions: {filterText: '', useExternalFilter: false},
        afterSelectionChange: function(data) {
            row = $scope.selectedRows[0]
            if (!row) {return;}
            selectedRowFactory.row = row
            $location.path('/event/'+row.id)
        },


    columnDefs: [
                            {field:'rl', displayName:'Importance',sortFn:impSortFn,width:'80px'},
                            {field:'dt', displayName:'Time', width:'57px', cellFilter:'date:\"HH:mm:ss\"',headerClass:'grad1',cellTemplate:'<div class="text-center">{{row.getProperty(\'dt\')|timefilter}}</div>'},
                            {field:'fl', sortable:true, displayName:'Country',width:'60px', 
                                cellTemplate:'<div class="ngCellText text-center" ng-class="col.colIndex()"><span ng-cell-text><img class="flag" src="img/Country_Images/{{row.getProperty(col.field)}}"></img></span></div>',
                                width: '80px',headerClass:'grad1'},
                            {field:'ev', displayName:'Event', width:'******',headerClass:'grad1'},
                            ]

Index.html

  <div class="view" data-ng-view></div>

is there an option to limit the contents of ng grid to top 10? I have gone through the limitTo functionality but don't know if the same functionality is available in defining the grid options. Please help.

Thanks in advance.

I'd suggest doing it server side, here's a nice tutorial: http://nadeemkhedr.wordpress.com/2013/09/01/build-angularjs-grid-with-server-side-paging-sorting-filtering/ — user3036342, Jun 03 '14 at 12:49
@user3036342 sorry but this is a static page. And Server side programming is not possible in this situation.. — Incpetor, Jun 03 '14 at 12:53
Your question is a bit unclear to be honest. You show the column definitions and say you want to limit the rows, but then you are talking about grid options functionality? I'm assuming you define a grid with 4 columns, and can get multiple rows back (data you don't include in your question, nor the markup of the html). If this is the case ng-repeat="item in items | limitTo:2"> when building up your rows — user3036342, Jun 03 '14 at 12:59
http://jsfiddle.net/bens/Pr8cH/ with pagination that limits the data without server side — user3036342, Jun 03 '14 at 13:00

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

You should prepare the top data in your controller and then tell ng-grid to use the prepared data.

In this Plunker example I get the top 3 of exiting data by sorting by the "age" key, then splicing out the first 3 entrys to the array sData and assigning this to the ng-grid.

    var app = angular.module('myApp', ['ngGrid']);

    function sortByKey(array, key) {
        return array.sort(function(a, b) {
            var x = a[key]; var y = b[key];
            return ((x > y) ? -1 : ((x < y) ? 1 : 0));
        });
    }
    app.controller('MyCtrl', function($scope) {
        $scope.myData = [{name: "Moroni", age: 50},
                         {name: "Tiancum", age: 43},
                         {name: "Jacob", age: 27},
                         {name: "Nephi", age: 29},
                         {name: "Enos", age: 34}];
        $scope.sData=sortByKey($scope.myData,'age').splice(0,3)                 
        $scope.gridOptions = { data: 'sData' };
    });

This way you have a reduced dataset that can be sorted again by the ng-grid sort functions. The sort function I used was found here on SO (here, kudos to David).

That what you wanted?

edited May 23 '17 at 12:32

Community

1
1

answered Jun 03 '14 at 13:54

mainguy

8,283
2
31
40

is it possible to apply the filter you mentioned here http://stackoverflow.com/questions/23211914/custom-cellfilter-in-angular-js surprisingly even this is answered by you – Incpetor Jun 04 '14 at 09:33
What do you mean? Instead of the sort-then-reduce function? Or as replacement for the borrowed sort function? Or as a custom sorting function for the reduced dataset? – mainguy Jun 04 '14 at 12:52
there are two task 1-apply the `impSortFn`to complete data array and not just to a field. 2- the resultant sorted data needs to be filtered as only top 10 values need to be taken out.. Anyways.. I have covered it in back end as `sorting+filtering` is a bit difficult.. thanks a lot for helping me out.. – Incpetor Jun 04 '14 at 13:19
1

Look at this plunker: http://plnkr.co/edit/zwS4aG?p=preview. It uses a multi-sort routine in sortby.js which sorts names descending and afterwards names in ascending order, then cuts out the first 10 values. I was lazy, so I took the sort routine from here: http://stackoverflow.com/questions/6913512/how-to-sort-an-array-of-objects-by-multiple-fields Be a good fellow and give @Felix Kling an upvote for his excellent work!Add more sorting field as you need them. Good Luck! – mainguy Jun 06 '14 at 13:39
1

angular also has a built in "orderBy" filter, so this could be reduced to : $filter('orderBy')($scope.myData,'age').splice(0,3); – chrismarx Mar 12 '17 at 22:46

Angular JS: get top ten contents of ng-grid

1 Answers1