(See this question and this question for background...)
Given:
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
grid.onSelectedRowsChanged.subscribe(function() {
row_ids = grid.getSelectedRows();
console.log(row_ids);
});
... when I select one row (say, row 5), I get an output of
[4]
... which is what I would expect. However, CMD+Click or SHIFT+Click -ing another row (say, row 3) in addition to this row gives me an output of
[2]
[4, 2]
... which is NOT what I would expect (I would expect just [4, 2]
). This seems to happen so long as the number of rows selected is > 1
. So, if I were to continue to select another row (say, row 17), I would get this
[16]
[4, 2, 16]
I added a breakpoint on the console.log
statement and verified that the onSelectedRowsChanged
is being fired twice: once for the newly clicked row, and once for all the selected rows.
Why is this? I only want it fired once, giving me the complete array of the selected rows. How would I accomplish this? Or am I missing something?
The problem (I've since discovered) lies in the row selection model Slick.RowSelectionModel()
.
Specifically, when the row was selected, handleActiveCellChange()
AND handleClick()
were being called, each which calls setSelectedRanges()
, while the former only sets it to the currently clicked row, and the latter sets it to all the selected rows.
I fixed this by unregistering in init()
(inside slick.rowSelectionModel.js
) _grid.onActiveCellChanged
handler and moved the call inside handleClick()
:
function init(grid) {
_options = $.extend(true, {}, _defaults, options);
_grid = grid;
// _grid.onActiveCellChanged.subscribe(handleActiveCellChange);
_grid.onKeyDown.subscribe(handleKeyDown);
_grid.onClick.subscribe(handleClick);
}
...
function handleClick(e, data) {
...
if (!e.ctrlKey && !e.shiftKey && !e.metaKey) {
handleActiveCellChange(e, data);
return false;
}
...
}
I don't know if this has been fixed by the author in "v2 master", as @fbuchinger said, and I know this fix is quick and dirty (this breaks keyboard navigation and selection between rows), but it works and gives me the expected behavior described in my question. Since I care more about the clicks working properly than the keyboard navigation, I'm sticking with this for now.
Anyone know of a better way?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With