0

I am using Slickgrid and trying to achieve the visual effect below.

The blue dots can be any icon/button.

enter image description here

The key issue is how to create a floating DIV always centered on the selected cell... or a 3x3 table whose central cell is the selected cell.

Any suggestions on how to get started?

Many thanks!

P.S. I have attempted to solve this in two ways:

1) custom formatter

function styleFormatter(row, cell, value, columnDef, dataContext) {

    var button = "<button class='button' title='Manage comments'></button>";


    if (value == null || value === "") {

        return "";

    } else {
            return "<div class='classValueFormat'><div class='divButton'>" + button + "</span>" + value + "</div>";
        }

    }
}

Where the CSS for divButton sets margin-top to negative trying to push it out of the Cell border. The issue here is that margins push the main content of the cell down or up so it becomes impossible to see. I think the custom formatter is unfeasible as it forces any content to be within cell border.

2) Getting x and y position as suggested by Santiago and demonstrated by Michael in the context menu example was an idea but I gave up as I could not trigger the DIV to appear on navigation and also because it did not resize with the cell or move with the cell when scrolling the page.

Gian
  • 549
  • 3
  • 7
  • 18
  • [What have you tried?](http://mattgemmell.com/2008/12/08/what-have-you-tried/) – pankar Aug 07 '12 at 07:29
  • Have tried creating a custom formatter styling the
    with negative margins to position the buttons outside of the cell... however this pushes the main content of the cell down or up so impossible to see.
     – Gian Aug 07 '12 at 07:43
  • The above question means that you should post your coding effort to help us help you ;) – pankar Aug 07 '12 at 07:54
  • Edited with approaches and code. Hoe this helps to help :-) – Gian Aug 07 '12 at 09:24

3 Answers3

1

Create the overlay DIV separately and append it to document body. Then, listen on the onActiveCellPositionChanged event and use getActiveCellPosition to reposition the overlay.

Tin
  • 9,082
  • 2
  • 34
  • 32
0

Could you get the mouse position and send this values to position-x and position-y of the div through .css() or something like that?

On second thought: I guess what you need to use is the .focus() function

Ryan B
  • 3,364
  • 21
  • 35
Santiago Rebella
  • 2,399
  • 2
  • 22
  • 29
  • Thanks Santiago, I have edited the question and explained there what my difficulties are with this approach. – Gian Aug 07 '12 at 09:37
0

I have not tried this, and it may sound counter-intuitive, but maybe you could use an editor instead of a formatter. The editor will not actually edit the data, but could render the HTML you need over top of the cell location. You would have to handle the navigation from within your editor, but I think it's doable. See example 3, especially the Description field editor (it moves when the page is scrolled).

cyclops
  • 1