CODEWITHSUNDEEP
javascripthtmljquery-uislickgrid
Gian
Gian

Reputation: 549

slickgrid - floating DIV or Table centered on cells

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.

Upvotes: 0

Views: 869

Answers (3)

Tin
Tin

Reputation: 9082

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

Upvotes: 1

Santiago Rebella
Santiago Rebella

Reputation: 2449

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

Upvotes: 0

cyclops
cyclops

Reputation: 1

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

Upvotes: 0

Related Questions