How to Prevent Window Scroll to Top on Wijmo Flexgrid Click Event

How to Prevent Window Scroll to Top on Wijmo Flexgrid Click Event

Posted by: m-stramel on 14 September 2017, 12:05 pm EST

• 

  m-stramel

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:05 pm EST

  Clicking anywhere on a wj-flex-grid causes window position to scroll to the top of the page.

  Even if/when grid is below top of page by any amount.

  How do I disable auto-scroll to top?

  We are using… C1Wijmo-Enterprise-Eval-AMD-5.20171.293.tgz and viewing from Chrome.

  Thanks…

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hi,
  
  We are sorry, we are unable to replicate the issue with the build 5.20171.293.

  Please refer to the attached sample that implements the same.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/06/FlexGrid_scrollTop_issue_293_2.zip

• 

  m-stramel

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  The issue occurs when inside an @angular/material <md-sidenav-container>.

  Fewest steps to reproduce with your attachment.

  (Version that works with the angular versions in your example.)

  
  npm install --save @angular/material@2.0.0-beta.2

  Add

  import { MdSidenavModule } from '@angular/material';

  to app.module.ts.
  
  Add MdSidenavModule to app.module.imports as well.

  Replace app.component.html with the following markup.

  <md-sidenav-container>
    <h1>
      {{title}}
    </h1>
    <wj-flex-grid #flex [itemsSource]="data" [allowDelete]="true" style="height:500px;">
    </wj-flex-grid>
    <div style=height:3000px;>
    </div>
  </md-sidenav-container>

  Scroll any amount, where you are still able to click on grid. Click and notice scroll to top.

  Thanks…

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hi,
  
  We are working on this and we will update you soon.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hello,
  
  Thank you for the additional information. We are able to replicate the issue and it looks like a bug. Hence, this issue has been escalated to the concerned team for further investigation with tracking id 268954.
  
  We will let you know as soon as we get any update on this issue.

  Thanks,
  
  Manish Kumar Gupta

• 

  eloy

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hello,
  
  any news about this issue?.. we’ve got the same problem when add a flexgrid into modal window of Bootstrap.

  –
  
  AngularJs: v1.53
  
  Wijmo: 5.20171.300

• 

  w-lohan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  It has to do with how the flexgrid gains focus inside an element with a transform css property. You can reproduce by wrapping

  <wj-flex-grid>

  in a

  <div style="transform: translate3d(0,0,0)">

  element.

  mat-sidenav-container

  and

  mat-sidenav-content

  have

  transform: translate3d(0,0,0)

  style that is used in “push” mode. If you arn’t using push mode you can use the following workaround.

  
  .mat-sidenav-container, .mat-sidenav-content {
      transform: none!important;
  }
  

• 

  eloy

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Thanks w.lohan!.. this solve our problem

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hi,
  
  This issue is still with our development team.
  
  @w-lohan
  
  Thank you for sharing your observation and answer here.

  Thanks,
  
  Manish Kumar Gupta

• 

  michael.prentice

  • Post Options:
  • Link
    Copy

  Posted 26 October 2017, 1:08 am EST

  Angular Material beta.12 now supports fixed content within a ```
  
  mat-sidenav-container

  
  There isn't much documentation for this feature yet though. So you'll need to review the PR here: https://github.com/angular/material2/pull/6712 and the demo here: https://mmalerba-demo5.firebaseapp.com/sidenav.
  
  It looks like you'll need to set ```
  [fixedInViewport]="true"
  ``` on your ```
  mat-sidenav
  ```s to get this functionality.
  
  
  
  Update: I just tested this with Angular Material beta.12 and it seems to be fixed w/ or w/o [fixedInViewport]="true".

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 8 January 2018, 9:20 am EST

  Hi,
  
  We are sorry for the late reply.
  
  This issue has been found fixed with version 5.20173.380.

  ~Manish