QTable override on hover row selection
-
I’m working on a feature to allow row selection here https://github.com/nwfsc-fram/boatnet/issues/430 and I’m wondering if there’s any way to override/disable the onhover row selection?
We would like a user to be able to select multiple cells in a single column and I was able to develop that however as the user does a mousedown and drags down and mouseup, it’s also naturally selected the text in the rows.
Any hints/comments would be appreciated.
-
@Mak-NOAA did you mean to select rows on mouse hover? use native modifier
@mouseover.nativeon your q-tr inside your body-slot https://0ybb3.sse.codesandbox.io/table-extension, if you want to prevent text being selected add@mousedown.native.preventthis on yourq-tablethe sandbox uses both events. -
@metalsadman yes @mousedown.native.prevent did the trick, thank you
-
@metalsadman could you also please advise if I can do the following?
- Disable row-level highlighting once the user clicks on a column cell to start highlighting
- Highlight the column cells as the user is dragging over them, i.e. do not wait until the user releases the mouse, but do the highlighting dynamically.
This was my latest PR: https://github.com/nwfsc-fram/boatnet/pull/588
-
@metalsadman for #1, I added two types of triggers one using :style and the other using the “colors” helper but I don’t know how to reach the q-tr’s hover color so I can disable it.
See my progress here: https://github.com/nwfsc-fram/boatnet/commit/8551816be71de980b95a66c21327ad20b9d18382As far as #2, I need a way to trigger on mousedown AND mouseover. I tried to create a trigger (https://github.com/nwfsc-fram/boatnet/commit/74ada330660cd5eb3e8b3c3a6811572293a3867c) for mouseover but that’s not sufficient. How can I do 2 mouse events at the same time and control the highlighting that way on drag?
-
@Mak-NOAA
#1 usetable-classprop ie.<q-table ... table-class="myClass"... /> ... <style > .myClass tbody tr &:hover background none ...#2 was trying it last week but to no avail yet :(, since i want to emulate this functionality too as i’ve seen in some premium datatable out there.
was experimenting with this https://quasar.dev/vue-directives/touch-pan, my idea was to get the element the mouse is hovering.
http://jsfiddle.net/Brv6J/3/ you’re trying to achieve something like this right? -
@metalsadman for #1, I want the myClass to be dynamic. So I want highlighting on hover to be “none” on mousedown but back to normal when mouseup. How do I make myClass dynamic. I added myClass to test it out and it’s not even disabling the hover selection statically (https://github.com/nwfsc-fram/boatnet/commit/b84524cf66d368020e9f9e95f6c3c975682d07f0)
#2: I’m trying to do exactly http://jsfiddle.net/Brv6J/3/ for a QTable column. I wish there was an easy way to do what that link does in QTable.
-
@Mak-NOAA
#1 i think you can do with listener and change yourtable-classaccording to a condition. ie:table-class="hoveringCondition ? 'hoverClass' : 'someClass'".
#2 almost there https://0ybb3.sse.codesandbox.io/table-extension, sleep for now :x -
@metalsadman
#1 can you elaborate on #1 listener? I can’t find anything in the documentation
#2 that looks awesome, how do I use the “QTable extension” in my code? -
@Mak-NOAA can check it on my sandbox https://codesandbox.io/s/0ybb3.
-
#1 “listener” is in your sandbox too? Can you point to where that would be?
#2 so do I just need to download the Dynamic.vue and use that instead of QTable? -
@Mak-NOAA
#1 nope didn’t do that in my example
#2 not rly you can just take and customize functions that you need. It’s just a sample. -
#1: any link you can point me to show a listener?
#2 See last comment from one of our engineers: https://github.com/nwfsc-fram/boatnet/issues/430#issuecomment-509727006 we might have an issue running the extension. If I copy functions from your code, can I still use it with QTable? -
@Mak-NOAA #1 prolly at vue docs, or you can really just listen to native one’s.
#2 yeah ofc, the sample is just a qtable with added functionality anyway. -
@metalsadman for #1, I haven’t found anything on the vue docs, I even searched for listener. Any url you see?
-
@metalsadman I’m gonna try the suggestions at the latest comments in https://github.com/nwfsc-fram/boatnet/issues/430 for selection but if you figure it out, please do let me know. You’re collaboration has been super helpful.
-
@metalsadman with the latest PR https://github.com/nwfsc-fram/boatnet/pull/614 we were able to get the selecting working. We do have an issue though which is if the user selects a column with the mouse too fast, it skips a few cell selections.
Back to #1, I think I have the listener to trigger on selection however, I don’t know which CSS value needs to be set to None so it actually turns it off. Any thoughts there?
See these rows:
https://github.com/nwfsc-fram/boatnet/blob/f333e8319d6643c962280598b657b149c557257c/apps/obs-web/src/views/DebrieferTrips.vue#L74
https://github.com/nwfsc-fram/boatnet/blob/f333e8319d6643c962280598b657b149c557257c/apps/obs-web/src/views/DebrieferTrips.vue#L15 -
@metalsadman I figured out how to get around the mouse moving fast issue here https://github.com/nwfsc-fram/boatnet/pull/628
So only thing left here is the CSS issue in my last comment. Anything concrete you can point us to?
-
@Mak-NOAA you want the column or the row that the column belongs to deselected? Dontneed css i think if you have reference to the prop fur current targetted column, you can set prop.selected = false, same as selecting/deselecting the checkbox.
-
@metalsadman I want the row not highlighted as I have mousedown and selecting cells in one column. While I move the mousedown each row is being highlighted CSS wise. This has nothing to do with the checkboxes but purely about the highlighting that happens on hover. How do I dynamically enable/disable the hover highlighting?
