jQuery UI Widgets Forums Grid VirtualMode bug offset viewable area and changes selected rows

Tagged: ,

This topic contains 4 replies, has 2 voices, and was last updated by  Peter Stoev 8 years, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • TP_DTNA
    Participant

    I’ve been beating my head against the wall trying to work around a nasty issue we’re having using a grid in virtual mode. Important details:
    1. There is no paging, rather it just has one large scrollable view.
    2. The data is fetched using the data source’s loadServerData callback

    If a user loads this grid and starts scrolling downward, the bottom visible rows start to appear blank and the grid’s internal idea about where the visible items match up with the data it has becomes offset. If a user has selected a row, it will move that selection to a completely different row that it thinks has the same visibleindex.

    That is a rather significant bug! Imagine our users complaining that the item they selected was not the item acted upon, and that the data is corrupt without any way to determine which entries are wrong.

    Also, why does the row data have so many things added to it? What if there’s a conflict with my data, like if I choose to have a field named “visibleindex” or any of the other names added to the set? Do I need to identify all these added members and avoid naming fields with the same name?

    Okay, back to the original issue: the problem seems to be the async nature of sending the retrieved data with the callback method in loadServerData. To reproduce this bug, I crafted a fiddle that asynchronously generates data and fires the callback when done. The data source looks like this:

    `var source = {
    datatype: “json”,
    // having no ‘localdata’ and having a url member are needed to engage loadServerData
    // localdata: {},
    url: ‘/asdasd’,
    totalrecords: 10000,
    loadServerData: function (data,source,callback) {
    var result = {
    records: generatedata(0,50),
    totalrecords: 10000
    }
    // simulate an async data retrieval, like an ajax call
    setTimeout(function() { callback(result) }, 300);
    }
    };`
    (edit: I tried to format that code to look pretty. Forum markup features for that don’t seem to work :/ )

    You can try this out for yourself in a fiddle here: http://jsfiddle.net/j8JUh/380/
    Start scrolling down and it happens for me by about the 49th row. I’m aware that the unique row id probably isn’t configured correctly, but that’s not causing the issue.

    I tested and examined this thoroughly and it happens in IE(11) and latest Chrome and Firefox with jqwidgets 3.9.1 and 4.1.2

    I hope the bug demo is enough for you, but if it is not I can produce a more thorough example.

    Thank you


    TP_DTNA
    Participant

    This also seems to happen even when the callback is called synchronously. I’m hoping there’s as easy fix for this, like I’m not connecting some obscure property somewhere.


    Peter Stoev
    Keymaster

    In Virtual Mode, users see the data returned in the rendergridrows. If the returned Array is with wrong size, wrong indexes, etc, blank rows will appear. If you wish, try our Virtual Scrolling demo. Members names are specified in the datafields array which in your sample you do not define so conflicts with your data member names can be easily avoided. Regarding the selection, we will look how to improve it in future releases.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/


    TP_DTNA
    Participant

    Huzzah! That clued me into the exact problem and I was able to fix it. Here’s what was happening:

    The callback argument in loadServerData is a function that takes one argument, an object with ‘records’ as an array of data objects and ‘totalrecords’ as a number of total rows in the data set. My problem was that I was starting the index of the records array at zero. Even though it expects an array of a few dozen values, that array needs to start at an index that matches the recordstartindex value (extracted from the loadServerData’s 1st/serverdata argument)

    Doing that solved my issue perfectly and I am very relieved. It would have saved me a lot of time to read about that in the documentation!

    The other issue, and perhaps this needs its own post, is that my grid data is polluted with members such that I have to reserve these field names and avoid using them: [‘boundindex’, ‘uniqueid’, ‘visibleindex’]. Another one called ‘uid’ is in there, but it doesn’t get overwritten if I provide my own. If I don’t, it appears with the same value as one of the other reserved fields. Not only do I have to avoid using these names as fields in my data, but I also have to strip them out in certain cases. Why did these values need to merge into my data instead of having their own space? The docs don’t seem to mention these either.

    Thanks for your help!


    Peter Stoev
    Keymaster

    Hi TP_DTNA,

    As I mentioned, you can define the fields in the datafields array and for example if in your data you have a member called boundindex, define a datafield with name myboundindex and set the datafield’s map to boundindex. This solves the conflict issue.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.