Row Selection is not consistent when we navigate between pages.

[AgDude]

From @pandey-mohit on April 7, 2015 10:33

This link is present in your officical site under "Server-Side Paging Example"
http://plnkr.co/edit/50vJrs?p=preview

Steps to reporduce:

1. Select number of rows in 1st page, let say, you selected 2 rows. Then, "Selected Items" counts will show "2".
2. Now move to 2nd page and do not perform any action.
3. Now come back(navigate) to 1st page again.
4. Here, no row is selected but "Selected Items" counts still show "2". Moreover, if we select more rows, it will start incrementing the count from "2" to "3". And on unselecting, count will go back to "2" (but not to zero, in any case).

Copied from original issue: angular-ui/ui-grid#3224

[AgDude]

From @c0bra on April 7, 2015 21:47

@pandey-mohit This is ng-grid (v2.x) and will be superseded by UI-Grid (3.x) in the near future.

Here's a quick plunker showing selection + pagination in 3.x: http://plnkr.co/edit/qoEQd6F6qHvGwrrUrIzp?p=preview

[AgDude]

From @pandey-mohit on April 8, 2015 4:23

@c0bra : I already implemented ng-grid in our current project and its harder to switch to ui-grid.

Is there any quick-fix for it?

[AgDude]

From @c0bra on April 8, 2015 16:6

@pandey-mohit There may be a fix, but I'm not aware of one; sorry! I was never involved in the 2.x pagination stuff.

[AgDude]

From @tzweiner on April 21, 2015 22:19

@c0bra: can you show an example with server-side pagination? I'm experiencing the exact same issue on ui.grid 3.0.0 rc20.

Your plunker is using standard pagination, and it works just fine. However, I'm using external pagination and I'm seeing the exact behavior that pandey-mohit described above.

[AgDude]

From @pandey-mohit on April 22, 2015 5:42

@tzweiner : I solve the above issue by adding "primaryKey" property to gridOptions. You need to pass a unique field to it.

Example:
Let say, you have a data
[{
id: 1,
name: "tzweiner"
}, {
id: 2,
name: "pandey-mohit"
}, {
id: 3,
name: "cObra"
}]

In it, "id" is your unique field, you can assign it as a primary key "primaryKey: 'id'". It will solve the above mentioned issue (in my case, it works like a charm).

Also, "primaryKey" field is never mentioned in ng-grid documentation but i read about it in another open issue raised for row selection problem.

[AgDude]

From @tzweiner on April 22, 2015 12:47

Yes, I did read about primaryKey and included it. This is what I've included in my gridOptions:
primaryKey: 'documentId',
columnDefs: [
{field: 'ti', displayName: 'Pub. Title'},
{field: 'pt', displayName: 'Journal Title'},
{field: 'vol', displayName: 'Pub. Volume'},
{field: 'iss', displayName: 'Pub. Issue'},
{field: 'documentId', displayName: 'Doc ID'}],

I still get the unwanted behavior of Selected Items remembering an obsolete count after paging (via external pagination).

[AgDude]

From @pandey-mohit on April 22, 2015 12:55

Please create an example (http://jsfiddle.net/) for it.

[AgDude]

From @tzweiner on April 22, 2015 14:26

I tried Plnkr but as soon as I add in ui-grid it blanks out.

[AgDude]

From @tzweiner on April 22, 2015 16:3

@pandey-mohit I forked @c0bra 's plnkr which uses ui-grid and take a look here
http://plnkr.co/edit/UBrmbISCSaYIkFG173lX?p=preview

Select some rows on page 1, then go to next page, come back to page 1. Nothing there is selected but Selected Items keeps showing the old count and when you select more rows, the count is incremented in a way that does not correspond to the number of selected rows.

This uses primaryKey.

[AgDude]

From @tzweiner on April 22, 2015 16:10

This is essentially happening because with External Pagination we are loading new data every time. So we lose track of any row properties (such as "selected") when we load in the new page data. We probably need to maintain a record of what's been selected separately in a service or something and then select manually any rows that were previously selected.

I still think that there's something wonky about Selected Items tho. It should show 0 after you load another set of rows, or remember internally which rows were previously selected when you come back to a page with already selected rows.

[AgDude]

From @PaulL1 on April 22, 2015 17:56

Expected behaviour for ui-grid based on looking at the code is that:

1. With internal pagination we have access to the full set of rows, we're just showing a page at a time using a rowProcessor. So if you select a row then change pages then that row is still selected, when you go back to the page the row should still be selected (it just wasn't visible for a while, similar to having filtered it)
2. With external pagination we can no longer see the row - you're removing it from the data. So when you change page we lose sight of the row, and lose it's selected status. If you want to retain the selection status you'd need to do "getSelectedRows" before changing page, save it somewhere (perhaps in an array of selection states, one per page), and then apply it again when the user comes back to that same page. You could perhaps use saveState for this if you wanted, but it's probably not overly complex to code it directly.

[AgDude]

From @tzweiner on April 23, 2015 18:11

Yes, that was the conclusion I arrived at too. I ended up saving any checked off rows in a service and then selecting them back manually once we bring them back into the result set.

I had to remove this tho: 'showGridFooter: true' because it was causing Selected Items in the footer to show the wrong count. I implemented my own counter for that as well.

[AgDude]

From @syoon7575 on July 9, 2015 22:18

@tzweiner I have the exact issue with external pagination.
Although this post has been a while, is it possible for you to tell me how you fixed this problem in detail?

I tried saving the selected rows and re-selecting inside "on.paginationChanged" function, but it selects the previous page's row. When the pagination is complete, the grid refreshes and removes all selection again.

[AgDude]

From @nivek91 on July 24, 2015 15:30

+1 , how did you solve this?

[AgDude]

From @syoon7575 on July 24, 2015 19:18

@nivek91 You could check out http://ui-grid.info/docs/#/tutorial/208_save_state this

But how I solved this is:

1. In gridApi.selection.on.rowSelectionChanged function, I saved selected rows into a hash table (that is saved in a factory), and delete unselected rows from the hash table.
2. In gridApi.core.on.rowsRendered function, I call the hash table, and manually selected any rows that were previous selected (as in.. this.grid.rows[i].isSelected=true;)

[bbhide]

Yes I did Make it work with keeping a separate selected array in the scope

$scope.gridApi.core.on.rowsRendered( $scope, function(){
var grid = this.grid;
grid.rows.forEach(function(part, index, theArray) {
if($scope.keptSelectionArray[theArray[index].entity.id]){
theArray[index].isSelected = true;
}
});
});