slickgrid - 如何遍历画布外的行？

Question

I am having some markers on map and same number of rows in slickgrid?

What I want is when a marker is clicked the id of marker is matched with all rows and corresponding row should get selected.

Here is my code:

var $canvas = $(grid.getCanvasNode());
var $allRows = $canvas.find('.slick-row');

    $($allRows).each(function() {
        if ($(this).rowID == selectedMarker) {
            $(this).addClass("active-row"); 
            grid.scrollRowIntoView($(this).index());
        }
    });

It works fine only when the row which I want is present in the grid but the grid DOM contains only 8 rows at a time (The grid has 30 rows).

How can I loop through all data?

Answer 1

You shouldn't be modifying SlickGrid's DOM at all. SlickGrid will overwrite any changes as it's only rendering the rows in view (with some buffer). When you scroll past that buffer any changes you made to the DOM are lost.

You have to change the row's data and allow SlickGrid to add the appropriate classes to the DOM when it's rendering.

Edit :

SlickGrid setup:

dataView.getItemMetadata = metadata(dataView.getItemMetadata);

function metadata(metadataProvider) {
  return function(row) {
    var item = this.getItem(row),
        ret = metadataProvider(row);

    if (item && item.isActive) {
      ret = ret || {};
      ret.cssClasses = (ret.cssClasses || '') + ' active-row';
    }

    return ret;
  };
}

Then when you click on a marker:

var item = dataView.getItemById(selectedMarker);
var row  = dataView.getRowById(selectedMarker);
item.isActive = true;
dataView.updateItem(item.id, item);
grid.scrollRowIntoView(row);