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

[bernhard]

 

@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:

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!

[Zeka]

@bernhard

Have you seen this https://www.ag-grid.com/javascript-grid-reference-overview/#listening-to-events?

[bernhard]

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" ??

[qtguru]

I maybe be wrong but it seems, you want to render a certain info based on the data provided, ideally most Table give options to enable you have power over the rendering process. 

Does this satisfy your feat, and also it's like a plugin too

https://www.ag-grid.com/javascript-grid-cell-rendering-components/

[bernhard]

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

[qtguru]

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 

[rick]

On 4/2/2018 at 4:52 AM, bernhard said:

squillion

+1