angular2-grid
angular2-grid copied to clipboard
[(ngGridItem)] binding causes freezes
First it occurred when i implemented router reuse for my nav. And figured it must be a bug with the reuse strategy so i disabled router reuse for the page with this grid.
Now i was implementing it for a toggle sidebar - and browser froze every time i added the component with the grid.
Any idea why two bind would cause it to freeze? added in:
<ng-sidebar-container>
<ng-sidebar [(opened)]="opened" [mode]="over" position="right" >
<sidebarView [initData]="initSidebarData"></sidebarView>
</ng-sidebar>
</ng-sidebar-container>
And the grid:
<div class="sidebar-container" [ngGrid]="gridConfig">
<div class="widget-container" [(ngGridItem)]= "{minWidth: 350, minHeight: 300, resizable: false, col: 1, row: 1, dragHandle: '.handle'}">
<div class="handle"><h4>test</h4></div>
</div>
</div>
If i remove the ngGridItem bind - it works fine. It freezes when you resize or navigate to the component.
And grid conf:
private gridConfig: NgGridConfig = <NgGridConfig>{
margins: [5], // The size of the margins of each item. Supports up to four values in the same way as CSS margins. Can be updated using setMargins()
draggable: true, // Whether the items can be dragged. Can be updated using enableDrag()/disableDrag()
resizable: true, // Whether the items can be resized. Can be updated using enableResize()/disableResize()
max_cols: 2, // The maximum number of columns allowed. Set to 0 for infinite. Cannot be used with max_rows
max_rows: 0, // The maximum number of rows allowed. Set to 0 for infinite. Cannot be used with max_cols
visible_cols: 0, // The number of columns shown on screen when auto_resize is set to true. Set to 0 to not auto_resize. Will be overriden by max_cols
visible_rows: 0, // The number of rows shown on screen when auto_resize is set to true. Set to 0 to not auto_resize. Will be overriden by max_rows
min_cols: 0, // The minimum number of columns allowed. Can be any number greater than or equal to 1.
min_rows: 0, // The minimum number of rows allowed. Can be any number greater than or equal to 1.
col_width: 300, // The width of each column
row_height: 25, // The height of each row
cascade: 'up', // The direction to cascade primeng items ('up', 'right', 'down', 'left')
min_width: 25, // The minimum width of an item. If greater than col_width, this will update the value of min_cols
min_height: 25, // The minimum height of an item. If greater than row_height, this will update the value of min_rows
fix_to_grid: true, // Fix all item movements to the primeng
auto_style: true, // Automatically add required element styles at run-time
auto_resize: false, // Automatically set col_width/row_height so that max_cols/max_rows fills the screen. Only has effect is max_cols or max_rows is set
maintain_ratio: false, // Attempts to maintain aspect ratio based on the colWidth/rowHeight values set in the config
limit_to_screen: true, // When resizing the screen, with this true and auto_resize false, the primeng will re-arrange to fit the screen size. Please note, at present this only works with cascade direction up.
};
After some more testing - this seems to be caused by limit_to_screen. Possibly when elements are not visible on screen (hidden sidepanel, router reuse storing dom).
Does it crash if you 2-way bind it to an instance of the NgGridItemConfig interface instead of a statically defined object like that? I'm not sure that would be a problem, but I've not seen that error pop up prior.
Seems like this may have been a false positive - simply a coincidence because limit_to_screen: true was set. Which is the real cause of freezes in many cases.