Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do action after render() method is completed

Tags:

slickgrid

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.

like image 647
Kalinin Avatar asked Jun 03 '11 08:06

Kalinin


People also ask

What does a render () method in ReactJS return?

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.

What happens when you execute setState () in the render () method?

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.

How do you call a function after rendering?

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 always run after render?

Does useEffect run after every render? Yes! By default, it runs both after the first render and after every update.


2 Answers

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');
});
like image 171
magiconair Avatar answered Sep 19 '22 19:09

magiconair


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.

like image 42
Tin Avatar answered Sep 17 '22 19:09

Tin