Jump to content

JavaScript experts raise your hands! Need help with agGrid event handling...


bernhard
 Share

Recommended Posts

 

@MrSnoozles introduced me to aggrid and so far my first experiments where great. Unfortunately I got stuck now when looking at events. I hope someone can help me:

 

I have this sample setup:

5abe8011a043f_2018-03-3020_19_24-Home.png.06f083aa8a5d5e9bc1027fca7e351d5b.png

Data is fetched by @adrian 's findObjects() suggestion. Works great. Custom cell renderers are also easy to achieve (see column "rand") and also custom filters are easy (not visible here). So far, so good.

The problem is the last row: I'm using a pinned row and I want to show aggregated data for the columns in that row. Statistics, sums, min/max, average etc.; Coming from datatables.net events there made a lot more sense to me: https://datatables.net/manual/events

As far as I understand from the docs of aggrid, I have these events available: https://www.ag-grid.com/javascript-grid-events/

Usage is like this:

var gridOptions = {
  columnDefs: columnDefs,
  rowData: rowData,
  enableSorting: true,
  enableFilter: true,
  rowSelection: 'multiple',

  // pinned footer row
  getRowStyle: function (params) {
    if (params.node.rowPinned) {
      return {'font-weight': 'bold', 'border-top': '1px solid #afafaf'};
    }
  },
  pinnedBottomRowData: [{}],

  // events
  onGridReady: function(params) {
    params.api.sizeColumnsToFit();
    console.log('grid is ready');
  },
};

 

This sucks, because I have no option to attach multiple event handlers to one event. I want my module to be extensible, so for example I want to build a "columnSum" plugin that shows stats of the colum whenever the table is filtered, sorted, rendered etc. In datatables I had the draw() event that fired on the dom element of the table.

Having multiple plugins would have been easy, because in each of the plugins I could have added the event listener:

// plugin A
$('#mytable').on('draw', function() {
  // do my plugin logic for plugin A
});

// plugin B
$('#mytable').on('draw', function() {
  // do my plugin logic for plugin B
});

 

So, can anybody give me a hint how I could do something like

$('#myAgGrid').on('draw', function() {
  // populate all footer cells with statistics
  // in the screenshot this row has "x" in every column
  // the "x" should get populated with some html
});

Of course, aggrid does not use jquery. It's just an example related to the jQuery datatables way of doing it.

Thanks!

Link to comment
Share on other sites

Awesome!!! Thanks!! Thought I've read the whole docs and examples and googled for an hour but found nothing... now it will be a lot more fun working on this tomorrow :):):)

Maybe I should change the topic title to "everybody who can rtfm better than me, raise your hands" ??

  • Like 1
  • Haha 5
Link to comment
Share on other sites

Hi @Sephiroth, thanks for your hint. I know about the cell renderers, but it's not exactly what I'm looking for. If you are only working with one table (grid) then cell renderers are perfectly fine, but I want to make it possible to modify the setup of the table by external plugins, modifying the cell renderers by the needs of the plugin without having to change the initial gridOptions object.

For example I want to have a plugin that shows column statistics. Or one that shows tooltips when hovering over a cell. One that shows action buttons (show page details, delete row, open link in new tab etc). And of course both need to work in combination. So I need to apply multiple cell renderers based on some parameters. I'm thinking of building one cell renderer that applies all the others and does something similar to what we know from processwire hooks: Passing parameters, modifying return values.

What I do NOT want is that the user has to apply complex cellRenderers with a squillion of if/else in the grid's options object ;)

Hope that makes sense. Any hints welcome :)

Link to comment
Share on other sites

23 hours ago, bernhard said:

Hi @Sephiroth, thanks for your hint. I know about the cell renderers, but it's not exactly what I'm looking for. If you are only working with one table (grid) then cell renderers are perfectly fine, but I want to make it possible to modify the setup of the table by external plugins, modifying the cell renderers by the needs of the plugin without having to change the initial gridOptions object.

For example I want to have a plugin that shows column statistics. Or one that shows tooltips when hovering over a cell. One that shows action buttons (show page details, delete row, open link in new tab etc). And of course both need to work in combination. So I need to apply multiple cell renderers based on some parameters. I'm thinking of building one cell renderer that applies all the others and does something similar to what we know from processwire hooks: Passing parameters, modifying return values.

What I do NOT want is that the user has to apply complex cellRenderers with a squillion of if/else in the grid's options object ;)

Hope that makes sense. Any hints welcome :)

Oh i see what you mean, an external plugin that adds to the column without altering the data , Hmm I will look at the documentation more. I think i get now 

  • Like 1
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...