ui-grid infinite scroll with row processor filtering

Question

I have an angularjs app using ui.grid with the infinite scrolling module. I am using whole row filtering as described in the documentation like so:

function MyController($scope){
    var that = this;

    var getData = function(){
        //logic left out for brevity
    };
    var onRegisterApi = function(gridApi){
        gridApi.grid.registerRowsProcessor(function (rows) {
            return that.filterRowProcessor.apply(that, [rows]);
        }, 200);

        gridApi.infiniteScroll.on.needLoadMoreData($scope, getData);
    };

    this.options["onRegisterApi"] = onRegisterApi;
}

//...code excluded for brevity...

MyController.prototype.filterRowProcessor = function(renderableRows){
    renderableRows.forEach(function(row) {
        if (this.selectedMap[row.entity["Id"]]) {
            row.visible = false;                
        }
    });
    return renderableRows;
}

The idea is to filter out rows which have an Id belonging to a specific collection; which works as designed. My problem is that when I get my first page of data the filter row processor removes enough rows from visibility that my scroll bar disappears. This in turn causes the infinite scroll api to never raise the "needLoadMoreData" event.

Is this uncharted territory, or is there a way around this? I am also open to not filtering by that mechanism if its easier to do another way.

UPDATE (01/08/2016)

I have found a work around that I don't like very much. Essentially I have a known page size and if the data coming in to the grid is less than that page size and my callback returns false for "end of query", I automatically issue a next page query. I would rather find a solution via the grid api, but for now this will work.

if(this.itemsSource.data.length < constants.PAGE_SIZE && !continuation.endOfQuery){
    //call get data again
}

Justin Blakley · Accepted Answer · 2016-01-11 16:21:13Z

After thinking about it for a while I decided on the below method as my solution. I am still open to suggestions if it makes more sense to do it a different way. Rather than relying on a length of data (which only loosely translates to having a scroll bar) I decided to calculate the height of the total rows visible, compared to the viewport of the grid.

//this method get called from the callback from needsMoreData
//hasMoreData is the same boolean flag sent in to dataLoaded
var shouldRetrieveMore = function (gridApi, hasMoreData){
    if (!hasMoreData) {
        return false;
    }

    var totalCountOfRows = gridApi.grid.getVisibleRowCount();
    if (totalCountOfRows === 0) {
        return true;
    }

    var height = gridApi.grid.getViewportHeight();
    var heightOfRow = gridApi.grid.getVisibleRows()[0].$$height;

    return ((heightOfRow * totalCountOfRows) <= height);
}

One additional addendum to the solution could be to sum the $$heights of all the rows, but I decided against it since in my uses they are always the same height.

Collectives™ on Stack Overflow

ui-grid infinite scroll with row processor filtering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related