The action after the render () method has completed

Question

I need to do some action when the render() method has completed its work and added all the HTML elements to the DOM. How to subscribe to the onRenderEnds event (no such event)? Can I write my own event outside the slickgrid code and attach it to the render() method?

---

There are several events "onScroll", "onViewportChanged" , but they occurred before the completion of render() (in some cases).

---

Update: I am writing a formatter for a column:

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

When the grid is displayed (using my formatter), I need to go through all the ".operationList" divs and convert them to other constructs (based on the data-my attribute). I need to replace the ".operationList" divs with a complex structure with event handlers.

Answer 1

Main answer: DO NOT! What you offer is a very poor design and contradicts the basic principles and architecture of SlickGrid.

You end up doing a lot of redundant work and deny most of SlickGrid's performance benefits. The grid will create and delete DOM nodes on the line “on the fly” when you scroll and execute it either synchronously or asynchronously, depending on which one is best suited at the time. If you must have rich interactive content in cells, use your own cell renderers and delegate all event processing to the grid level using provided events such as onClick. If the cell contents are absolutely impossible to create using the renderer, use async post-rendering - http://mleibman.github.com/SlickGrid/examples/example10-async-post-render.html . However, the content of the grid should not contain event listeners registered directly on the DOM nodes.

To refer to the @magiconair comment, you really should not display the entire SELECT with all its parameters and event handlers until the cell switches to edit mode.

Answer 2

To answer my own comment, I came up with the following hack . It may not be very 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 open API:

 "onRenderCompleted": new Slick.Event(), 

Bind to a new event in your code:

 grid.onRenderCompleted.subscribe(function() { console.log('onRenderCompleted'); });