datatable row highlight on mouseover

Webix JS
1

I looked through documentation to see whether there is a param when constructing my datatable/treetable that would change row color as the mouse cursor moves over it but I couldn’t find this.

How would one go about writing a custom highlight? The existing webix css for datatable seems to target only header, footer, columns, and individual cell. There doesn’t seem to be a css tag for row.

2

You can use native hover
http://webix.com/snippet/b85c62fb

Or a bit more complicated solution, based on onMouseMoving event
http://webix.com/snippet/89118ab4

3

wow! that is amazing. webix is great!

4

Hello,

I know this is an old post, and Webix updates may have changed the way of doing this kind of row highlighting, but I want to do the same thing and I only found this post.

Problems

The method based on the onMouseMoving event is (now?) a little buggy. If you try to select some text inside the Datatable, the selection is going everywhere, mainly because the “id” is no actual id but event object. I fixed it using the “row” attribute instead, and enclose everything with a try catch (because the onMouseMoving takes an Event object, and row only exists in datatables).

Snippet

Here is the “fixed” snippet : http://webix.com/snippet/201cdc0a

Now the text selection works fine

Questions

  • Is there a better way to do this?
  • I am building a protoUi datatable including this onMouseMoving function, but how can I add the onMouseMove parameter as well? (snippet: http://webix.com/snippet/a4079283)
  • Is there a way to allow text selection row-wise instead of column-wise? (I guess this is html’s divs dependent tho)

Thanks!

5

ERRATUM

I completely missed the “hover” attribute for datatables!!!
That makes my previous post completely useless…
Sorry for that, still my question about the text selection row-wise persists!