handle jquery on click in a grid with smart rendering

I’m generating a DHMLX grid that has to show a big dataset (+ 2K rows). In the last column of the grid there are three buttons defined with html.

I’m handling the “click” event on this buttons with jQuery :

$("button.edit").on("click", function() { some stuff ... });

First try was to put this jQuery code the normal way :

$(document).ready(function() { ...}

This was not working so I put the jQuery in the event “onXLE” of the grid construction

mygrid.attachEvent("onXLE", function() { $("button.edit").on("click", function() { some stuff ... }); })

This is working fine but because it’s a big dataset and due to network performance I decided to use the smartrendering method of the grid.


The problem I’m facing now is that the buttons on the first records work like a charm but when you scroll down and more records are rendered the buttons with these records don’t work anymore.

Has anyone a solution on this ?


Unfortunately this is the expected behavior.
Your code applies the the rendered “buttons” only. In case of using the smart rendering mode only the visible part of the rows is rendered. so you apply your “click” event is applying only to the initially rendered rows. And you have to “recall” your jquery code each time the user scrolls the grid until all the rows will be rendered.

I recommend you to create a custom column type so that the clicking event can be added right to your button’s html.
Here you can find a tutorial about creating a custom exCells;
docs.dhtmlx.com/grid__columns_ty … olumntypes

Just another small question if you want to create a custom cell :
where do you have to put the code to generate the new type of cell ? Can you provide an example ?

Here you can a working example of the custom excells:
dhtmlx.com/docs/products/dhtmlxG … ormat.html