Click on button in wijmo cells (height > gridHeight) scrolls grid row to top

Posted by: webworx on 11 February 2018, 8:54 pm EST

    • Post Options:
    • Link

    Posted 11 February 2018, 8:54 pm EST

    Hi, most probably this is a Feature but in my case, it brings issues.

    I have a grid where the Content of a cell can be really Long. This means that a row/cell height can be bigger than the grid height. The result is, when i click on a button in a “big height” cell, the grid automatically scrolls to the top of this current row and the button Event is cancelled.

    I would like to prevent this “autoscroll” Feature of the flexgrid.

    I am working on this code in order to prevent the jump/scroll issue.

    flex.addEventListener(flex.hostElement, ‘mousedown’, (event) => {

    console.log(‘event.target.nodeName:’);

    console.log(event.target.nodeName);

            if(event.target.nodeName == 'I'){
                event.stopPropagation();
                event.preventDefault();
                event.cancel = true;
                console.log('button icon click');
            }else{
                console.log('cell click');
            }
    
    
        }, true);
    

    Any ideas?

    Best regards, Asmo

  • Posted 11 February 2018, 10:51 pm EST

    It seems to work on the latest

    build(5.20173.405).

    Could you please download the latest build from here & let me know if you are still facing issues.

    https://www.grapecity.com/en/download/wijmo-core

  • Posted 11 February 2018, 11:09 pm EST

    Hi, thank you for the fast reply! I will download a new Version of wijmo today and let you know if it works.

  • Posted 12 February 2018, 1:26 am EST

    Hello Abhishek, i have tested it with the new version in a fiddle because we couldnt download any package from your server today. And its not working, as you can see on the fiddle link.

    http://fiddle.jshell.net/MrGrande/rs7fnkLw/

    When you scroll the row a bit down and click on the button in the last column (cell not selected), the grid scrolls the row automatically up.

    Best regards, Asmo

  • Posted 12 February 2018, 2:11 pm EST

    Hi, this seems like a bug. I will be creating a case for the dev team to look at . I will share the case ID with you soon.

  • Posted 13 February 2018, 7:18 pm EST

    Hi,

    I was able to workaround this. I have attached a sample. Please look into it and let me know if it works for you.

    PS: Please change the path of Wijmo NPM Image in package JSON file as per your location of NPM image in your system before running the sample

    Thanks,

    AbhisheklongCellProblem.zip

  • Posted 14 February 2018, 3:06 am EST

    Hi, thanks! I have tried it and ist working fine in Chrome. But in IE11 not at all, only an undefined js error in the console. Can you tell whats missing to run your example also in IE11?

    The best solution for me would be if there is any Chance to deactivate/prevent the scrollIntoView method of the grid. Do you see any Chance?

    I am asking because i dont want to repeat this Workaround code to every component which uses a wijmo grid.

    Or can you tell me how i can create a wijmo grid base class in order to have such code only once in the Project? Kind of generic wijmo grid class…

    Best regards, Asmo

  • Posted 14 February 2018, 7:26 pm EST

    Hi,

    The support problem for IE11 was because the polyfills needed by the IE were commented by default in polyfills.ts. I have made the required changes to Support IE 11 as well.

    I have added a Custom Directive Property to the Wijmo Component to support generic behavior. Please take a look at the attached sample and let me know it works for you.

    RegardslongCellProblem.zip

  • Posted 15 February 2018, 3:12 am EST

    Hi, thanks. I dont see any difference in the code. And every file has the same timestamp like the last provided zip.

    Did you maybe attached the last/old zip?

    Best regards, Asmo

  • Posted 15 February 2018, 3:43 am EST

    Hi,

    Sorry about that. Here’s the correct one

    longCellProblemDirective.zip

  • Posted 15 February 2018, 9:26 pm EST

    Hi, thank you very much! Ist working fine.

    Best regards, Asmo

  • Posted 20 February 2018, 1:41 am EST

    Hi, i found a problem during my tests. There are some Buttons in the cells which still force the grid to scroll up to the top-position of the current row.

    The only thing which helps me, is to put…

    event.stopPropagation();

    event.preventDefault();

    …at the start of every function which is called from a button in the cell.

    Is it maybe possible to completely deactivate the Auto scroll Feature of the flexgrid?

    I have a Client which wants from me to achieve exactly that.

    Best regards, Asmo

  • Posted 20 February 2018, 2:20 am EST

    Unfortunately there isn’t a property to disable Autoscroll Feature of Flexgrid. I will however create an enhancement request for this and add you as a correspondent to this case. You will be notified if this feature is implemented in future releases.

    I will share the Tracking ID for this enhancement request tomorrow.

  • Posted 20 February 2018, 3:05 am EST

    Hi, thanks! it sounds promising.

    Best regards, Asmo

  • Posted 20 February 2018, 10:48 pm EST

    Hi,

    You mentioned that you were still facing some issues with Buttons in the cells which still force the grid to scroll up to the top-position of the current row even after using the workaround provided in this thread. I was trying to replicate this behavior, but I couldn’t do so.

    Could you please provide a sample or may be modify the one that I gave you earlier so that it reproduces your use case and I can pass the same on the Dev Team and they may look into it.

    Thanks

    Abhishek

  • Posted 27 February 2018, 11:59 pm EST

    Hi, after a lot of testing i found the issue. The reason was the button markup.

    I changed my button html code from:

    <button (click)=“myFunction($event)”>

    (fa = fontAwesome icons)

    to:

    <button (click)=“myFunction($event)” class=“btn-class-name”>

    and it worked out. It seems that the click Event was disturbed by the extra Markup for the button Icon.

    Never the less, it would be great to have an Option for the autoscrolling Feature.

    Best regards, Asmo

  • Posted 1 March 2018, 1:30 am EST

    Great to know you were able to solve the issue. I will create the Enhancement request and share the tracking ID on Monday.

  • Posted 4 March 2018, 6:09 pm EST

    Hi ,

    The Tracking ID for the feature request is 311286.

    Thanks,

    Abhishek

  • Posted 16 April 2018, 1:09 am EST

    Hello Abhishek,

    our testers found an issue with your WjNoScrollDirective directive.

    Clicking on flexgrid scrollbar arrows is not working anymore. When you click nothing happens, only when you long-hold the arrow, it starts Scrolling the grid.

    Can you help me with this issue?

    Best regards, Asmo

  • Posted 16 April 2018, 9:09 pm EST

    Hi,

    Please refer to the following updated example which includes the fix:

    https://stackblitz.com/edit/angular-alx7vh?file=app%2Fflex-grid-no-scroll%2Fwj-no-scroll.directive.ts

    ~nilay

  • Posted 17 April 2018, 2:35 am EST

    hello nilay, thank you very much for the fix. It’s working fine.

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels