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.
Purpose of render(): React renders HTML to the web page by using a function called render(). The purpose of the function is to display the specified HTML code inside the specified HTML element. In the render() method, we can read props and state and return our JSX code to the root component of our app.
render() Calling setState() here makes it possible for a component to produce infinite loops. The render() function should be pure, meaning that it does not modify a component's state. It returns the same result each time it's invoked, and it does not directly interact with the browser.
If we just want to run the useEffect function after the initial render, as a second argument, we can give it an empty array. If we pass a second argument (array), React will run the callback after the first render and every time one of the elements in the array is changed.
Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update.
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');
});
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With