9

I need to do some action when render() method finished its work and appended all HTML elements to DOM. How to subscribe to onRenderEnds event (there is no such event)? Can I write my own event outside of slickgrid code and attach it to render() method?

There are some events "onScroll", "onViewportChanged" but they happened before render() finished (in some cases).

Update: I write formatter for column: 

formatter: function(row, cell, value, columnDef, dataContext){
    return "<div class='operationList' data-my='" + myData + "'></div>";            
}

When grid rendered (applying my formatter) i need to go through all ".operationList" divs and convert them to other constructions (based on data-my attribute). I need to replace ".operationList" divs with a complex structure with event handlers.

Kalinin
  • 2,489
  • 8
  • 37
  • 49
  • @Tin, see my question update. – Kalinin Jun 06 '11 at 05:46
  • @Tin: I have a similar problem since I want to style – magiconair Nov 04 '11 at 08:48

2 Answers2

9

To answer on my own comment I've come up with the following hack. It may not be pretty but it seems to work.

Add the following line to the render() method just below renderRows(rendered);

function render() {
    ...
    renderRows(rendered);
    trigger(self.onRenderCompleted, {}); // fire when rendering is done
    ...
}

Add a new event handler to the public API:

"onRenderCompleted":            new Slick.Event(),

Bind to the new event in your code:

grid.onRenderCompleted.subscribe(function() {
    console.log('onRenderCompleted');
});
magiconair
  • 6,659
  • 4
  • 29
  • 26
  • Your solution is very good. There is only one drawback: it is necessary to go into the library code and edit it. What happens if you want to update slickGrid library? You will need to copy your code into a new code library. This is bad. As you said - a "hack". But this is the best way I know. Now. – Kalinin Nov 07 '11 at 06:00
  • 3
    What you could do is to fork the code on github and maintain your own changes. Then when you want to update the code you pull the changes from the master repo and your changes should be merged automatically. – magiconair Nov 07 '11 at 11:12
  • This trigger(self.onRenderCompleted, {}); should really be at the very end of the render method - because render is not completed until the method has finished. – Ken Jul 09 '20 at 15:11
  • BTW: I had to resort to this solution as well as my scaffolding was dependent on a a somewhat customized slickGrid. – Ken Jul 11 '20 at 17:36
  • Triggers also when [] items are passed to the grid (so no data) – DavidDunham Jun 11 '21 at 10:17
4

The basic answer is DON'T ! What you are proposing is a very bad design and goes against the core principles and architecture of SlickGrid.

You will end up doing a lot of redundant work and negating most of the performance advantages of SlickGrid. The grid will create and remove row DOM nodes on the fly as you scroll and do it either synchronously or asynchronously depending on which one suits best at the time. If you must have rich interactive content in the cells, use custom cell renderers and delegate all event handling to the grid level using its provided events such as onClick. If the content of the cell absolutely cannot be created using renderer, use async post-rendering - http://mleibman.github.com/SlickGrid/examples/example10-async-post-render.html. Even so, the grid content should not have any event listeners registered directly to the DOM nodes.

To address @magiconair's comment, you really shouldn't render a whole SELECT with all its options and event handlers until a cell switches into edit mode.

Tin
  • 9,082
  • 2
  • 34
  • 32