CODEWITHSUNDEEP
htmlangularag-grid
cfr
cfr

Reputation: 147

ag-Grid - Is it possible to create a floating menu for each row?

I'm trying to create a menu that appears when a user hovers on a row, just like in the image below. enter image description here

I did not find any built-in option to achieve this. Also tried using a custom CellRenderer function to create an element that I could move around later, but that didn't work as expected since it presented some other challenges (css wise) and was not really achieving the goal.

Is there a way to build this kind of menus in ag-Grid?

Upvotes: 1

Views: 2451

Answers (1)

kamil-kubicki
kamil-kubicki

Reputation: 628

To work around the problem, you could use onCellMouseOver & onCellMouseOut methods:

var gridOptions = {
    columnDefs: columnDefs,
    onCellMouseOver : onCellMouseOver,
    onCellMouseOut:   onCellMouseOut,
    ...
};

Define both functions:

var onCellMouseOver = function(event){
    //Get current row
    var rowIndex = event.node.rowIndex;
    var row = gridOptions.api.getDisplayedRowAtIndex(rowIndex);

    //Set current row as not selected - in order to base on 'cellStyle' function
    row.setSelected(true);

    //Setup refresh params
    var params = {
        force: true, //Force refresh as cell value didn't change
        rowNodes: [row]
    };

    //Refresh current row cells
    gridOptions.api.refreshCells(params);
}

var onCellMouseOut = function(event){
    //Get current row
    var rowIndex = event.node.rowIndex;
    var row = gridOptions.api.getDisplayedRowAtIndex(rowIndex);

    //Set current row as not selected - in order to base on 'cellStyle' function
    row.setSelected(false);


    //Setup refresh params
    var params = {
        force: true, //Force refresh as cell value didn't change
        rowNodes: [row]
    };

Then define 'cellStyle' function for your column:

var columnDefs = [
    {headerName: "your_column_name", field: "your_column",
       cellStyle: function(params) {;
       console.log('Is row selected', params.node.selected);
            if (params.node.selected) {
                return {display : 'none'};
            } else {
                return {display : 'inherit'};
            }
        }
    }
];

You can find more about data refresh here: https://www.ag-grid.com/javascript-grid-refresh/

The full implementation of the code above might be found here: Working example

Second solution, edited after comments:

Another way is to use css classes to achieve the result.

   {
      headerName: "Price",
      field: "price",
      cellStyle: { "text-align": "center" },
      cellRenderer: function(params) {
        return (
          "<div class='buttons'>" +
          "<div class='back'>" +
          params.value +
          "</div>" +
          "<div class='front'><button>Option A</button><button>Option B</button></div>" +
          "</div>"
        );
      }

Buttons are shown on hover based on .ag-row-hover ag-grid class:

.front {
  display: none;
}
.ag-row-hover .front {
  display: inherit;
}

Working example

Upvotes: 2

Related Questions