AutoFill + scrollY/scrollX = AutoFill._getPosition( node, targetParent ) returns bad value ?

AutoFill + scrollY/scrollX = AutoFill._getPosition( node, targetParent ) returns bad value ?

Jin-KJin-K Posts: 1Questions: 1Answers: 0

Hi, I'm having an issue with the autofill extension when I scroll the table to the bottom or the right (scrollX and scrollY enabled).

The handle button (position: absolute) appears lower when the table (position: relative) is scrolled down, or shifted to the right when scrolled to the right.

At the begin I thought it could be related to my bootstrap 4 version, but I see that the issue is also present in the example page and it doesn't use bootstrap: https://datatables.net/extensions/autofill/examples/initialisation/scrolling
Just scroll down the table a little bit and hover a cell with your mouse to see the problem.

Should I change the position of another element ?
Or draw the <div class="dt-autofill-handle"></div> button my self ? If yes, how should I do this ?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    Hi @Jin-K ,

    Thanks for that link. Yep, agreed, there does appear to be a problem. I've raised this internally (DD-873 for my future reference), and we'll report back here when we've had a chance to look at it.

    Cheers,

    Colin

  • allanallan Posts: 61,649Questions: 1Answers: 10,093 Site admin
    Answer ✓

    Fixed here. The nightly will rebuild with the changes in the next few minutes.

    Regards,
    Allan

  • HubertyHuberty Posts: 2Questions: 0Answers: 0

    Hi @colin and @allan ,

    He didn't answered yet because he is facing another problem that seems to be related to this one ( by the way, @Jin-K is a colleague :D )

    We are using the majority of your extensions and we don't always find examples showing how to use this kind of combinations.

    We have a datatable with the paid Editor extension and Server-side processing, with keyTable and autoFill extensions activated:

    serverSide: true,
    autoFill: {
        horizontal: false,
        vertical: true,
        columns: ".editable",
        editor: editor
    },
    keys: {
        editor: editor
    },
    

    It seems there is an issue when we have the serverside enabled because after each request and response the table is drawn again, for example after a manipulation of the autoFill extension, and in this case we see the origin cell loses focus ==> if we then try to reuse the autoFill without clicking on another part of the table: the AutoFill._getPosition method is throwing an error again. (It is like some inner variables are referencing to DOM content that doesn't exist anymore)
    And the most dangerous is that an erroneous request is made to the server overwritting the content of other rows :open_mouth:

    I can't give you a draft of our case because we are using serverside, but I have this Unlisted video on youtube that is a screen recording of our error case: https://youtu.be/p21DaoyAraM

    I hope there is a solution for this because our project depends on more than 50% on your plugin.

    Regards,
    Angel

  • allanallan Posts: 61,649Questions: 1Answers: 10,093 Site admin

    Is that with the nightly version containing the fix from above?

    Whatever you make an edit (be it with AutoFill or anything else) when server-side processing is used, then DataTables will always make a request to the server for fresh data.

    I'm not clear from this point:

    And the most dangerous is that an erroneous request is made to the server overwritting the content of other rows

    Are you suggesting that there is unsaved data, and the draw is wiping that out. Is that the issue? If so, then yes, that would be expected if you are using server-side processing. You'd need to save the data on-the-fly instead.

    Allan

  • HubertyHuberty Posts: 2Questions: 0Answers: 0

    Hi @allan,

    Thank-you for answering so fast !

    Yes this is actually running with the nightly build (AutoFill 2.3.4-dev).

    And the most dangerous is that an erroneous request is made to the server overwritting the content of other rows

    if you look closer at 1:46 (to 1:58) of the screen record, you can see what I mean:
    1. I use the autoFill to set the 'M' value in the Part column of the 4 first rows
    2. Table is refreshed with the /GetScoping request that you can see on the left, but the origin column hasn't the focus anymore (even if the <div class="dt-autofill-handle"></div> is still there)
    3. I then try to reuse the autoFill handle button because I'm a end-user and I start seeing something strange is happening ==> text of other columns is being selected (actually, the issue is appearing in console)
    4. So, as a user, i release the mouse and then see that all the rows update with the 'S' value again on column Part

    The first /Ajax sends this:

    action: edit
    data[51296][Part]: M
    data[51297][Part]: M
    data[51298][Part]: M
    

    and the second one this:

    action: edit
    data[51295][Part]: S
    data[51296][Part]: S
    data[51297][Part]: S
    data[51298][Part]: S
    

    Angel

  • allanallan Posts: 61,649Questions: 1Answers: 10,093 Site admin

    Hi Angel,

    I see it in the video - thanks! However, I've not been able to reproduce that error myself. Can you give me a link to a page showing the issue - be it your own page, http://live.datatables.net , JSFiddle, CodePen or anything else. I'd need a way to be able to reproduce the error so I can dbeug it.

    Allan

This discussion has been closed.