Unable to create multiple grid instances

[AmirF27]

I'm trying to create multiple grid instances, but I'm getting errors in the console if I try to do this. I get the same errors simply if I terminate a grid and then try to create another instance.

These are the errors I'm getting:

Canvas.js:305 TypeError: Cannot read property 'cellPadding' of undefined
    at Constructor.resetRowHeaderColumnWidth (index.js:1516)
    at Constructor.renderGrid (index.js:545)
    at Constructor.paint (index.js:203)
    at Canvas.paintNow (Canvas.js:303)
    at Canvas.repaint (Canvas.js:539)
    at Constructor.repaint (index.js:959)
    at Column.set header [as header] (Column.js:139)
    at Object.set (columnProperties.js:47)
    at assignOrDelete.js:23
    at Array.forEach (<anonymous>)

ERROR TypeError: Cannot read property 'reduce' of undefined
    at Constructor.getFooterRowCount (subgrids.js:133)
    at Constructor.getVisibleScrollHeight (index.js:221)
    at Constructor.synchronizeScrollingBoundaries (scrolling.js:330)
    at Constructor.behaviorShapeChanged (index.js:904)
    at Constructor.behaviorChanged (index.js:888)
    at Constructor.changed (Behavior.js:812)
    at Constructor.createColumns (Behavior.js:332)
    at Constructor.createColumns (index.js:47)
    at Constructor.reset (Behavior.js:133)
    at Constructor.initialize (Behavior.js:57)

I'm using version 3.2.0.

Basically I have multiple tabs and I would like to have a separate grid in each of the tabs.

Is this possible?

[joneit]

hey @AmirF27 thanks for the feedback. Please paste in some sample code and I would be happy to create a patch release to make this work for you. That said, I do see that the multiple-grids demo seems to be working....

[AmirF27]

@joneit I did not know about this demo, thanks for posting a link to it. I eventually tracked down the cause of this to the fact that I'm stopping the paint loop as soon as the grid instance is created. I'm using Angular and each paint loop cycle is needlessly triggering a change detection cycle which is weighing down on performance heavily. So I had to disable it so that I could manually tell it when to re-paint.

This is how I'm doing it (all in the AfterViewInit lifecycle hook):

this.grid = new Hypergrid(this.gridContainer.nativeElement, {
  dataModel: dataModel
});

this.grid.canvas.stopPaintLoop();

Is there a way to disable the paint loop while still having the ability to have multiple grid instances?

[AmirF27]

@joneit Are there any updates on this? Stopping the paint loop seems to cause those errors when creating multiple grid instances. I need to be able to stop the paint loop in order to restart it outside the context of Angular because otherwise it creates many unnecessary change detection cycles.

[joneit]

I’ll try to take a look today.

On Dec 10, 2018, at 4:13 AM, Amir Fakheraldeen [email protected] wrote:

@joneit https://github.com/joneit Are there any updates on this? Stopping the paint loop seems to cause those errors when creating multiple grid instances. I need to be able to stop the paint loop in order to restart it outside the context of Angular because otherwise it creates many unnecessary change detection cycles.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/fin-hypergrid/core/issues/782#issuecomment-445743162, or mute the thread https://github.com/notifications/unsubscribe-auth/AFt_EHJcQTn2j1K9aj8qvX6rIfEox5VSks5u3iWkgaJpZM4Y5j62.

[anuradhamudalige]

Yes. You have to give an unique table id. Ex: on HTML,

<div [id]="tableId" #hypergrid></div>

and on TS or JS uniquely set the tableId property