mleibman / SlickGrid

A lightning fast JavaScript grid/spreadsheet
http://wiki.github.com/mleibman/SlickGrid
MIT License
6.82k stars 1.98k forks source link

formatter called twice for each row #1043

Open DemersM opened 9 years ago

DemersM commented 9 years ago

if you are using an ajax loader such

$.ajax({
      type: "GET",
      url: "/basqui/layer/shapefile/attributesTable/loader/1/",
      success: function(r) {
                  dataView.beginUpdate();
                  dataView.setItems(r);
                  dataView.setFilter(filter);
                  dataView.endUpdate();
                },
});

with those standard dataview events subscribed:

dataView.onRowCountChanged.subscribe(function (e, args) {
  grid.updateRowCount();
  grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
  grid.invalidateRows(args.rows);
  grid.render();
});

each row are formatted twice ( You can see this by using a custom formatter for a column and console.log() in its function ).

Is this normal?

GerHobbelt commented 9 years ago

You're calling .render() on each event and one of them has .invalidateRows() (as it should), so yes, this is expected behaviour.

Advanced / Suggestion how to fix/optimize this out

If you want to optimize the .render() call count, you can do by, for example, queueing the .render() in a delayed function (I use a 'debouncer' object for this which encodes such behaviour in a generic way, inspired by the 'debouncer circuits' used to 'debounce' physical buttons by experienced electronic engineers). The fundamental approach here is to set a timer (and kill and retrigger it in either one event) which fires off the .render() when the timeout expires.

The 'debouncer' approach is a good way of doing this as you cannot predict the number of events (1 or 2) here unless you do some deep analysis of the data you're feeding the SlickGrid animal and that would thwart the concept of 'black boxing' the component.

Met vriendelijke groeten / Best regards,

Ger Hobbelt


web: http://www.hobbelt.com/ http://www.hebbut.net/ mail: ger@hobbelt.com

mobile: +31-6-11 120 978

On Wed, Jan 7, 2015 at 5:42 PM, DemarsM notifications@github.com wrote:

if you are using an ajax loader such

$.ajax({ type: "GET", url: "/basqui/layer/shapefile/attributesTable/loader/1/", success: function(r) { dataView.beginUpdate(); dataView.setItems(r); dataView.setFilter(filter); dataView.endUpdate(); }, });

with those standard dataview events subscribed:

dataView.onRowCountChanged.subscribe(function (e, args) { grid.updateRowCount(); grid.render(); });

dataView.onRowsChanged.subscribe(function (e, args) { grid.invalidateRows(args.rows); grid.render(); });

each row are formatted twice ( You can see this by using a custom formatter for a column and console.log() in its function ).

Is this normal?

— Reply to this email directly or view it on GitHub https://github.com/mleibman/SlickGrid/issues/1043.

DemersM commented 9 years ago

You debounce suggestion make sense. Do you suggest to add a debouncer on render() in the main branch or not?

I imagine there is many events (such resize) that may trigger render() repeatedly and could benifit of a debouncer

haqk commented 2 years ago

...in the meantime here's a workaround:

let t = null;
function debouncedRender() {
    if (t) clearTimeout(t);
    t = setTimeout(grid.render, 50);
}

Use debouncedRender instead of grid.render.