Do action after render() method is completed

问题

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.

回答1:

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.

回答2:

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');
});

来源：https://stackoverflow.com/questions/6224661/do-action-after-render-method-is-completed

标签

slickgrid