slickgrid - floating DIV or Table centered on cells

Question

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

The blue dots can be any icon/button.

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.

Answer 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.