Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New version of checkbox has issues with multiselect = true + RowSelectionModel.selectActiveRow = true #345

Open
SatanEnglish opened this issue Feb 24, 2019 · 31 comments

Comments

@SatanEnglish
Copy link
Contributor

SatanEnglish commented Feb 24, 2019

On examples like http://6pac.github.io/SlickGrid/examples/example-checkbox-header-row.html

If you turn on Checkbox multiselect and RowSelecitonModel.selectActiveRow

The new version will not allow multiselect to work.

Old version would allow you to select each row by the check box and have multiple selected.
New version does not

     if (lookup[row] !== _selectedRowsLookup[row]) 
    {
          _grid.invalidateRow(row);
          delete _selectedRowsLookup[row];
    }

The above is deleting the row even tho it is the same row.

The issue seems to be one of the commented out rows below.

     function toggleRowSelection(row) {
            if (_selectedRowsLookup[row]) {
                _grid.setSelectedRows($.grep(_grid.getSelectedRows(), function (n) {
                    return n != row
                }));
            } else {
                _grid.setSelectedRows(_grid.getSelectedRows().concat(row));
            }
+            //_grid.setActiveCell(row, getCheckboxColumnCellIndex());
+            //_grid.focus();
        }

The set and then focus seems to be acting like a double click on the checkbox/row

@SatanEnglish SatanEnglish changed the title checkbox New version of checkbox has issues with multiselect = true + RowSelectionModel.selectActiveRow = true Feb 24, 2019
@SatanEnglish
Copy link
Contributor Author

SatanEnglish commented Feb 24, 2019

New version

2019-02-25_11-28-33

Old version did
2019-02-25_11-29-21

This is without holding CTR or Shift which still do the correct funcitonality

@ghiscoding
Copy link
Collaborator

ghiscoding commented Feb 25, 2019

What do you mean by old vs new versions? Do you mean since Frozen feature was introduced?
The answer is... yes it does still works. Here's the proof, see my Aurelia-Slickgrid demo (top portion is single click, bottom portion is multiple selection) and my repo was updated to use latest version that include Frozen feature, the row selection still works as before...

Also if you look at the other example-checkbox-row-select.html it does support multi-select well enough. From what I understood with how to have single versus multiple selection, is to use new Slick.RowSelectionModel({ selectActiveRow: true }) (where true makes single selection, while false will do multiple). I don't think anything changed there, I can still do single or multi whenever I want.

EDIT

I also pulled latest code of slickgrid master, opened the example-checkbox-header-row.html, toggle the boolean flag of selectActiveRow and it works as intended, which is what I wrote in previous paragraph (where true makes single selection, while false will do multiple). So I don't see any problem on my side but I only tried in Chrome. Maybe make sure to clear your cache after changing the flag, javascript stays in the cache, usually doing Ctrl+R and Ctrl+F5 helps remove the cache.

@SatanEnglish
Copy link
Contributor Author

SatanEnglish commented Feb 25, 2019

@ghiscoding
Yep I think it's before the update for the frozen features.

Also it doesn't seem to work how expected which was what i've shown in the gifs.
Original you can have both the selectActiveRow true and multiple set to true and be able to use check boxes to select multiple rows.

2019-02-25_16-13-01

PS: Your example is working but it never has worked if you hold control and click.

Here is the piece of code to fix that as I've never uploaded the fix by the looks of it.

Inside the slick.rowselectionmodel.js add the commented section

        function handleKeyDown(e) {
            var activeRow = _grid.getActiveCell();
            if (activeRow && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey && (e.which == 38 || e.which == 40)) {
                var selectedRows = getSelectedRows();
                selectedRows.sort(function (x, y) {
                    return x - y
                });

                if (!selectedRows.length) {
                    selectedRows = [activeRow.row];
                }

                var top = selectedRows[0];
                var bottom = selectedRows[selectedRows.length - 1];
                var active;

                if (e.which == 40) {
                    active = activeRow.row < bottom || top == bottom ? ++bottom : ++top;
                } else {
                    active = activeRow.row < bottom ? --bottom : --top;
                }

+                // Edited to make so that multiSelect via arrows with shift or Ctrl won't happen
+                if (active >= 0 && active < _grid.getDataLength()) {
+                    _grid.scrollRowIntoView(active);
+                    if (!_grid.getOptions().multiSelect) {
+                        top = active;
+                        bottom = active;
+                    }
+                    var tempRanges = rowsToRanges(getRowsRange(top, bottom));
+                    setSelectedRanges(tempRanges);
+                }

                e.preventDefault();
                e.stopPropagation();
            }
        }

@SatanEnglish
Copy link
Contributor Author

SatanEnglish commented Feb 25, 2019

@ghiscoding

Here is my example of how it worked / works with my changes.
MultiSelect = true, selectActiveRow = true

2019-02-25_16-29-07

Here you can see select checkboxes allows multi select clicking a row deselects all but selects single.
However holding ctrl and clicking acts like I clicked on the checkbox.

Here is how multiselect = false. selectActiveRow = true worked
2019-02-25_16-35-23

Here you can see select checkboxes only one active at a time clicking row deselects all but selects single.
Holding ctrl and clicking acts like I clicked on the checkbox this is only single allowed.

I've not used the second example if I need single select I always just use selectActiveRow = true and turn off checkboxes

@SatanEnglish
Copy link
Contributor Author

@ghiscoding @6pac
It has changed how the code used to work here.
By all means go and change to the old version and check if you want.

The functionality of these things should now change.
I've given the code here that fixes the issue can you look into if it causes you any issue if we comment out the 2 lines.

I've also given you the fix for if holding control or shift. (slick.rowselectionmodel.js fix)

Let me know if you still don't have enough information to understand the issue here and I can give step by step what to click and do to get the functionality of this plugin back to what it use to do.

Thanks

@ghiscoding
Copy link
Collaborator

I didn't even know we could use the Ctrl key with this plugin lol

I'll have to re-read everything another day, I'm just too tired now and I don't know what was the old way vs new way since I didn't know we could certain keyboard keys in combo with this plugin

@ghiscoding
Copy link
Collaborator

@SatanEnglish can this be close since PR #343 ?
I think you said that it was going to include fixes for this issue, correct?

@SatanEnglish
Copy link
Contributor Author

@ghiscoding
Just checked you seem to have removed the focus which fixes the Crtl key double click part of issue.

However may pay to do the fix to the slick.rowselectionmodel.js plugin mentioned above so that the items you gave me link to will work.

comment link

@SatanEnglish
Copy link
Contributor Author

@ghiscoding
Did you end up adding the stuff to the slick.rowselectionmodel.js?
Then we can close this one

@ghiscoding
Copy link
Collaborator

I didn't yet, I was focusing on the other PRs first. You could create a PR if you want.

@ghiscoding
Copy link
Collaborator

ghiscoding commented Mar 14, 2019

@SatanEnglish
I'm giving a try at the code change you mentioned here and the first thing I see is that

The first thing I see is that, only a small piece of code is different compare to the diff that you provided, so from what I can see, only this piece is different with latest code

        function handleKeyDown(e) {
            var activeRow = _grid.getActiveCell();
            if (activeRow && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey && (e.which == 38 || e.which == 40)) {
                // .... some code.... removed for brevity of this post

                if (e.which == 40) {
                    active = activeRow.row < bottom || top == bottom ? ++bottom : ++top;
                } else {
                    active = activeRow.row < bottom ? --bottom : --top;
                }

+                // Edited to make so that multiSelect via arrows with shift or Ctrl won't happen
                if (active >= 0 && active < _grid.getDataLength()) {
                    _grid.scrollRowIntoView(active);
+                    if (!_grid.getOptions().multiSelect) {
+                        top = active;
+                        bottom = active;
+                    }
                    var tempRanges = rowsToRanges(getRowsRange(top, bottom));
                    setSelectedRanges(tempRanges);
                }

                e.preventDefault();
                e.stopPropagation();
            }
        }

However even if I add that piece of code, it doesn't seem to change anything on my side. That is, if I enable both flags like so { selectActiveRow: true, multiSelect: true } { selectActiveRow: true (plugin option) and multiSelect: true } (grid option) and I try to choose multiple rows from the 1st column, it doesn't work, however if I use the keyboard Ctrl & select multiple rows, that works. What is the expected behavior when selectActiveRow: true? You seem to say that it should allow multiple rows to be selected when on 1st column, but is it really suppose to permit that? selectActiveRow to me seems more like this explanation "only select the active row (only 1)"

Here's an animated gif of that test I did, the last step I'm doing is with the Ctrl key, that is the only time I can select multiple rows.
aNu5iZsblk

Also note, you don't seem to have latest code since this line (118 for me) if (e.which == 40) { was replaced by if (e.which == Slick.keyCode.DOWN) { and that was February of last year. Lastly, by looking at the history, that file never got touched or affected by the frozen feature, you can see that by looking at the commit history

There's actually another bug, which you said earlier I think, if we use it like this {selectActiveRow: true, multiSelect: false} and use Ctrl key, it still allows user to select multiple rows even though multiSelect is false. I tried with and without your code change and no difference. OMG I just realized that multiSelect is on the root Grid Options while only selectActiveRow is in the plugin options, so that is not a bug then

@ghiscoding
Copy link
Collaborator

@6pac
If we look at @SatanEnglish post here, what would you expect the behavior to be when selectActiveRow: true (plugin option) and multiSelect: true (grid option)? @SatanEnglish says that when both flags are True, it should permit user to select multiple rows by clicking on 1st column, but to me selectActiveRow: true seems more like a single row selection, at all time and even if user select from 1st column.

@6pac
Copy link
Owner

6pac commented Mar 14, 2019

My first instinct is to agree that selectActiveRow is single row selection at all times.

However, looking at the linked sample, this is a very useful feature, but it probably should be called toggleSelectOnActiveRow, since it toggles on or off, which I don't think it does with multiselect: false.

So we either view this as an overloaded flag that has slightly different meaning depending on the value of multiselect, and make sure it is well documented as such, or create a new option as above for use only with multiselect on.

@ghiscoding
Copy link
Collaborator

@6pac
Thanks I agree, I would rather keep selectActiveRow as a single row selection at all time and come up with another flag to allow multi-select on 1st column but single row selection (active row) on any other column. I wasn't sure about your new flag name toggleSelectOnActiveRow but after reflection it does make sense, it's to provide selectActiveRow on any columns but toggleSelect on 1st column, I guess it make sense... and yes this plugin is totally missing documentation, we should add it the same as we did with other plugins on top of the plugin file.

@SatanEnglish
Would you be ok to keep selectActiveRow as a single row selection at all time but add a new flag name toggleSelectOnActiveRow to do what you described in the first animated gif of your previous post here?

@SatanEnglish
Copy link
Contributor Author

SatanEnglish commented Mar 14, 2019

@ghiscoding
Interesting that yours isn't working from checkboxes for {multiSelect: true, selectActiveRow: true}
With the pull #346 change id expect Ctrl + click on row and click on checkboxes to work the same way.

+                    if (!_grid.getOptions().multiSelect) {
+                        top = active;
+                        bottom = active;
+                    }

The code above is for when you have {multiSelect: false, selectActiveRow: true}
What this does is stops you being able to Ctrl + click multiple rows

PS: Stops what happens in Gif in #345 (comment)

@SatanEnglish
Copy link
Contributor Author

@ghiscoding @6pac
The fix here just fixes up the single select version.
The multi works how I want for me at the moment so don't want to change it.

If you look at the code !_grid.getOptions().multiSelect => If we are not using multiSelect.

@ghiscoding
Copy link
Collaborator

@SatanEnglish
with selectActiveRow: true (plugin option) and multiSelect: true (grid option), the code you provided doesn't make multi-select working when using 1st column, only Ctrl key does. But like I said, you seem to have older code. Give it a try with latest plugin code and your code change. That doesn't change anything on my side. And I did Ctrl+R and Ctrl+F5 to make sure it's not a browser cache problem

@SatanEnglish
Copy link
Contributor Author

@ghiscoding
Ok I'll check tomorrow and get back to you or find how to replicate on current version

@SatanEnglish
Copy link
Contributor Author

@ghiscoding
Ok i've found it.

@6pac changed the code 6 days ago.
prevent multiselect behaviour from shift-UP/DOWN when multiSelect

Main change is that it will never get in there for multiSelect anymore.

+ if (activeRow 
-  if (_grid.getOptions().multiSelect && activeRow 

Can no longer use row selection with multiSelect which don't work for me.
Going to have to have a longer look into this as I cannot get it working correctly at all now.

@6pac
Copy link
Owner

6pac commented Mar 14, 2019

... not aware of changing anything recently to do with this? there are small unrelated changes being applied from time to time that may screw up line numbers tho, and the odd pull from a PR ...

@SatanEnglish
Copy link
Contributor Author

@SatanEnglish
Copy link
Contributor Author

@6pac
I'll try have a look into it and see if I can work out whats needed to make the ROWSelection work under the 4 conditions according to how it work.

I should also look into making the checkbox plugin taking into account the grid.options.multiSelect

@6pac
Copy link
Owner

6pac commented Mar 14, 2019

ah yes, that was a PR

@6pac
Copy link
Owner

6pac commented Mar 15, 2019

feel free to change that. the PR seemed innocuous enough to me at the time, i though it was just about shift-clicking :-)

@ghiscoding
Copy link
Collaborator

ghiscoding commented Mar 15, 2019

@6pac FYI the changes that @SatanEnglish found in this comment was not enough to fix the entire problem (I tried it) and he did mention that there's other issues, in particular 4 conditions that needs to work. It's been a busy week on my side, so I don't have much time to help unfortunately.

@SatanEnglish
Copy link
Contributor Author

@6pac @ghiscoding Sorry still haven't found time to play with this again yet will try look within next couple of weeks

@SatanEnglish
Copy link
Contributor Author

Notes for the 4 cases for when I next get a chance to work on this again or incase someone else finds time.

Need to fix up to work for all 4 cases.

Should be able to select multiple rows via check box and ctrl/Shift clicking. These should highlight and select checkboxes if using ctrl/Shift. (Clicking directly on a checkbox is equivalent to holding ctrl and clicking a row)
multiSelect: true
selectActiveRow: true

Should be able to select multiple rows via check box and ctrl/Shift clicking. NO rows should highlight
multiSelect: true
selectActiveRow: false

If using Checkboxes should only allow one to be selected. (Needs update to checkbox plugin)
Only one row can be highlight. (selected rows should only have 0 OR 1 item in selection SelectedRows : [1])
multiSelect: false
selectActiveRow: true

If using Checkboxes should only allow one to be selected. (Needs update to checkbox plugin)
NO rows should highlight.
multiSelect: false
selectActiveRow: false

May edit this if I think of more information that i've missed about the cases

@swatiwak
Copy link

I am using RowSelectionModel.
When I select any row, only last column is highlighted.

Can anyone help me out over here?
Is this a bug.

@SatanEnglish
Copy link
Contributor Author

@swatiwak
Sorry been away.
Not sure if it's a bug depends how you have it set up.
Tho I plan to review how it now works and try to make it work for all the old cases.

@swatiwak
Copy link

@SatanEnglish
I am using rowselection model.
grid.setSelectionModel(new Slick.RowSelectionModel());

I have installed slickgrid.
"slickgrid": "^2.4.7"

I have imported below files as per my need.
import 'slickgrid/lib/jquery.event.drag-2.3.0.js';
import 'slickgrid/slick.editors.js'
import 'slickgrid/slick.core.js';
import 'slickgrid/slick.grid.js';
import 'slickgrid/plugins/slick.rowselectionmodel.js'
import "slickgrid/slick.grid.css";
import "slickgrid/css/smoothness/jquery-ui-1.11.3.custom.css";
import "slickgrid/slick-default-theme.css";

When I select any row, only last column is highlighted.

If I redraw table complete row is highlighted.
Is this bug or let me know correct way to use row selection model

@SatanEnglish
Copy link
Contributor Author

@swatiwak
I cannot replicate it sorry.
Try getting the newer version and if it's still an issue post a separate issue for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants