angular-ui/ui-grid

Expandable rows expands inside the column and overlaps next row in parent grid

Open

#6,222 opened on May 17, 2017

View on GitHub
 (4 comments) (0 reactions) (0 assignees)JavaScript (2,496 forks)batch import
help wanted

Repository metrics

Stars
 (5,395 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

When click on '+' symbol in grid, no child grow is shown until the page is reloaded. Once parent grid is loaded, I need to reload whole page. Once reload, I can see grid when '+' symbol is clicked.

Is there any bug in ui-grid related to this?

EDIT: Upon investigation, I found that ui-grid does not set 'expandableRow' angular property until page is reloaded. If I am not wrong, that property is coming from below code in ui-grid.js

 $templateCache.put('ui-grid/expandableScrollFiller',
"<div ng-if=\"expandableRow.shouldRenderFiller()\" ng-class=\"{scrollFiller:true, scrollFillerClass:(colContainer.name === 'body')}\" ng-style=\"{ width: (grid.getViewportWidth()) + 'px', height: row.expandedRowHeight + 2 + 'px', 'margin-left': grid.options.rowHeader.rowHeaderWidth + 'px' }\"><i class=\"ui-grid-icon-spin5 ui-grid-animate-spin\" ng-style=\"{'margin-top': ( row.expandedRowHeight/2 - 5) + 'px', 'margin-left' : ((grid.getViewportWidth() - grid.options.rowHeader.rowHeaderWidth)/2 - 5) + 'px'}\"></i></div>"

);

Is there something related to caching issue?

Contributor guide