粘性列中的ag-grid菜单

Question

Is there any way to add a menu for each row in a sticky column (in Ag-grid)?

There is no mention about such feature in the official docu, so I'm not sure whether it's even possible. I have tried couple of ways but the menu is always trapped inside the sticky column wrapper.

The only way I could make it (at least) partially working, was by setting:

.ag-body-container .ag-row {
        z-index: 0;
    }

    .ag-ltr .ag-hacked-scroll .ag-pinned-right-cols-viewport {
        overflow: visible !important;
    }

but that completely ruined vertical scrolling.

 var columnDefs = [ {headerName: "ID", width: 50, valueGetter: 'node.id', cellRenderer: 'loadingRenderer' }, {headerName: "Athlete", field: "athlete", width: 150}, {headerName: "Age", field: "age", width: 90}, {headerName: "Country", field: "country", width: 120}, {headerName: "Year", field: "year", width: 90}, {headerName: "Date", field: "date", width: 110}, {headerName: "Sport", field: "sport", width: 210}, {headerName: "Gold", field: "gold", width: 300}, {headerName: "Silver", field: "silver", width: 400}, {headerName: "Bronze", field: "bronze", width: 200}, {headerName: "Menu", field: "", width: 100, pinned: 'right', cellRenderer: 'menuRenderer' } ]; function MenuRenderer( params ) { } MenuRenderer.prototype.init = function(params) { this.eGui = document.createElement('div'); this.eGui.classList.add('menu'); var menuElement = ` <a href="#"> * </a> <div class="menu--list"> </div> `; this.eGui.innerHTML = menuElement; }; MenuRenderer.prototype.getGui = function() { return this.eGui; }; var gridOptions = { components:{ loadingRenderer: function(params) { if (params.value !== undefined) { return params.value; } else { return '<img src="./loading.gif">' } }, 'menuRenderer': MenuRenderer }, columnDefs: columnDefs, rowBuffer: 0, rowModelType: 'infinite', paginationPageSize: 100, cacheOverflowSize: 2, maxConcurrentDatasourceRequests: 2, infiniteInitialRowCount: 0, maxBlocksInCache: 2, //embedFullWidthRows:true, onGridReady: function (params) { params.api.sizeColumnsToFit(); } } // wait for the document to be loaded, otherwise, // ag-Grid will not find the div in the document. document.addEventListener("DOMContentLoaded", function() { // lookup the container we want the Grid to use var eGridDiv = document.querySelector('#myGrid'); // create the grid passing in the div to use together with the columns & data we want to use new agGrid.Grid(eGridDiv, gridOptions); agGrid.simpleHttpRequest({url: 'https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json'}).then(function(data) { var dataSource = { rowCount: null, // behave as infinite scroll getRows: function (params) { console.log('asking for ' + params.startRow + ' to ' + params.endRow); // At this point in your code, you would call the server, using $http if in AngularJS 1.x. // To make the demo look real, wait for 500ms before returning setTimeout( function() { // take a slice of the total rows var rowsThisPage = data.slice(params.startRow, params.endRow); // if on or after the last page, work out the last row. var lastRow = -1; if (data.length <= params.endRow) { lastRow = data.length; } // call the success callback params.successCallback(rowsThisPage, lastRow); }, 500); } }; gridOptions.api.setDatasource(dataSource); }); }); 

 /* Menu */ .menu { z-index: 2 !important; position: fixed; top: 20%; left: 50%; } .menu a { text-decoration: none; } .menu .menu--list { display: none; position: absolute; top: 0; right: 0px; width: 100px; height: 50px; border: 1px solid red; } .ag-body-container .ag-row { z-index: 0; } .ag-ltr .ag-hacked-scroll .ag-pinned-right-cols-viewport { overflow: visible !important; } .ag-pinned-right-cols-viewport .ag-row:first-child .menu--list{ display: block; } /* [Layout] */ .fill-height-or-more { min-height: 100%; display: flex; flex-direction: column; border: 1px solid red; } .fill-height-or-more > div { flex: 1; display: flex; flex-direction: column; justify-content: center; } .some-area > div { padding: 1rem; } .some-area > div:nth-child(1) { flex-grow:0; background: #88cc66; } .some-area > div:nth-child(2) { flex-grow: 0; background: #ec971f; } .some-area > div:nth-child(3) { position: relative; padding: 0; justify-content: stretch; align-content: flex-start;; flex-grow:1; background: #8cbfd9; } .some-area > div:nth-child(4) { flex-grow: 0; position: absolute; background: #ec971f; } .some-area > div h2 { margin: 0 0 0.2rem 0; } .some-area > div p { margin: 0; } .inner{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } html, body { padding:0; margin: 0; height: 100%; overflow: hidden; } .ag-body-viewport { -webkit-overflow-scrolling: touch; } 

 <head> <script src="https://unpkg.com/ag-grid/dist/ag-grid.min.js"></script> </head> <html> <body> <section class="some-area fill-height-or-more"> <div> Header </div> <div> Action bar </div> <div> <div class="inner"> <div id="myGrid" style="height: 100%; width:100%; font-size: 1.4rem" class="ag-theme-fresh"></div> </div> </div> </section> </body> </html> 

Answer 1

I would completely abandon the idea of adding the menu inside the cell.

What I would do instead is:

• Add the menu outside the grid, hidden,
• Keep the link in the cell (this would trigger the menu later)
• Add click event to this link
• Create a class for the menu (can be global, as there will be only one menu, with changing context)
  • This would hide/show the menu
  • Have parameters, which store the context (data from your grid, or whatever)
• The click event on the links from the grid would have code which shows the menu

Something like this: This example has no error handling for brevity.

var gridMenu = function(selector) {
    var instance = this;
    instance.element = document.querySelector(selector);
    instance.context = null; // this can be any data, depends on your project

    // sender is the link from your cell
    // context is your data (see above)
    instance.open = function(sender, context) {
        instance.context = context;
        // you may even add the sender element to your context

        instance.element.style.display('block');
        // alternatively, you could use instance.element.classList.add('some_class_to_make_menu_visible')
        // you may need to add some positioning code here (sender would contain valuable data for that)
    }

    instance.close = function () {
        instance.context = null;
        instance.element.style.display = 'none';
        // or you may remove visibility class
    }

    // click events for menu items (if you use some Javascript processing, and the menu doesn't use simple links)
    instance.menuItem1Click = function(e) {
         // do whatever you wish here
         instance.close();
         // call this at the end of each of your menu item click event handlers
    }

    // ... more click event handlers for your other menu items (one for each menu item)

    return instance;
}

// Create your menu item somewhere in your document ready code, or even where you initiate your grid (before initializing the grid)
var menu = new gridMenu("#my_awesome_floating_menu");

This is a sample click event of your links inside the grid:

function cellLinkClick(event) {
    var context = {}; // whatever data you may want to send to the menu
    menu.open(event, context);
}