Skip to content

Flicker effect when expanding a subgrid with a lot of columns, using ui-grid-auto-resize #3048

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ComeOutToPlay opened this issue Mar 18, 2015 · 3 comments

Comments

@ComeOutToPlay
Copy link

I have an expandable grid that modifies its height dinamically when an item is expanded. I use rowExpandedStateChanged to increase the grid size accordingly:

   gridApi.expandable.on.rowExpandedStateChanged($scope, function(row){

          // Get grid height
          var gridHeight = $scope.getExpandableGridHeight( ... );

          // Set scope variable in pixels
          $scope.gridHeight = gridHeight + 'px';

      });
  },

In the HTML I am using ui-grid-auto-resize

What happens to me is that ui-grid-auto-resize works good in general, but when there is a subgrid with a lot of columns, the renderization shows an undesired flicker effect.

Here is my Plunkr, where the ROW with ID 2 contains a subgrid with a lot of columns, and the grid does this flicker effect I do not know how to avoid. Any help will be appreciated.

http://plnkr.co/edit/4NLMt6T4XP35E8uIy9dL?p=preview

I am using the last ui-grid-unstable, in this time is the ui-grid 3.0 RC 20.

PD: Please use the plunkr preview in a separate window and test the row 2 several times

@ComeOutToPlay
Copy link
Author

I noticed this effect again in a simpler ui-grid with ui-grid-auto-resize . My new HTML grid definition is:

<div ui-grid="categoriesGridOptions" ui-grid-selection ui-grid-exporter ui-grid-resize-columns ui-grid-auto-resize style="background: white; width: 100%; height: 20em;" ></div>

<div style="padding-top:0.5em;">

    <a class="btn btn-primary" ng-click="addRow()">
        <i class="fa fa-plus-square-o fa-lg"></i> {{'BTN_ADD'|translate}}</a>

    <a class="btn btn-primary" ng-click="addRow()">
        <i class="fa fa-pencil-square-o fa-lg"></i> {{'BTN_EDIT'|translate}}</a>

    <a class="btn btn-primary" >
        <i class="fa fa-save fa-lg"></i> {{'BTN_SAVE'|translate}}</a>

    <a class="btn btn-primary" >
        <i class="fa fa-trash-o fa-lg"></i> {{'BTN_DELETE'|translate}}</a>          
</div>

When I resize the navigator window horizontally, it does this effect:
primero

It is like the grid content is rendered at the bottom and then it is moved to the right place.

After some miliseconds, the grid is rendered well:
segundo

@PaulL1
Copy link
Contributor

PaulL1 commented Mar 26, 2015

I think this will be related to #3050, and therefore also to #1957.

@PaulL1 PaulL1 modified the milestones: 3.0, 3.1 Mar 26, 2015
@Weestdudochnicht
Copy link

Any news here? i got the same Problen with v4.0.7. Then window flicker when i expand any row in my grid

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants