jQuery UI Widgets Forums Grid Grid loading cells after grid is loaded

This topic contains 9 replies, has 2 voices, and was last updated by  jccompagnon 9 years, 6 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • Grid loading cells after grid is loaded #63798

    jccompagnon
    Participant

    Hi,
    I am trying for speed reason and page display to display a grid.
    Then in the 2nd cell for example load a photo of the product for example so that the grid and page is available but the photos load while the person can start viewing the grid

    do you have examples of how I could get this done ?

    Thanks

    Grid loading cells after grid is loaded #63812

    Dimitar
    Participant

    Hello jccompagnon,

    Do you mean you have an image column like in this example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/imagecolumn.htm?arctic and that you want all images to be pre-loaded so that they are instantly visible when you scroll to the particular row? If so, unfortunately, this is not possible. The image cell has to be rendered at least once for the image to be loaded by the browser. From then on, the image will be visible instantly, because it is preserved in the browser’s cache.

    Best Regards,
    Dimitar

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

    Grid loading cells after grid is loaded #63855

    jccompagnon
    Participant

    almost, like that yes but I want the image to be called loaded after the grid is loaded.

    Imagine that there are 3 billions images to load (I am exagerating but for the example) so I don’t want to wait for the image to be loaded for the grid to load I want to
    1 – load the grid
    2 – load the images as the person is reviewing the grid

    This goes for more than just the images.
    I could imagine a 3rd column with the Price that is loaded after the grid got loaded.

    Grid is loaded some cells are still loading:
    Loading

    Grid is all loaded:
    Loaded

    • This reply was modified 9 years, 6 months ago by  jccompagnon.
    • This reply was modified 9 years, 6 months ago by  jccompagnon.
    Grid loading cells after grid is loaded #63896

    Dimitar
    Participant

    Hi jccompagnon,

    The image loading behaviour does not depend on jqxGrid, but on the browser. In most cases, when the browser has finished loading an image, it preserves in the cache where it is available for later viewing without having to download it again. The grid renders only the currently visible cells and images in cells, which are not rendered, will not be loaded by the browser (yet).

    Best Regards,
    Dimitar

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

    Grid loading cells after grid is loaded #63920

    jccompagnon
    Participant

    Hi,
    I understand that the loading is a browser behavior. I don’t think you understand my question here.

    I have a HUGEEEEEEEEEE GRID to load with data coming from 20 different tables.

    What I want is for the basic data to load first and display the grid.
    Once the grid is loaded THEN I want to start looking for the additional data in other tables
    the image is an example as 1 of the data.

    Imagine that you have to load a grid with 1 million rows
    If I include in the grid definition 1 million images it will take for ever to load.
    Another column will have a field that will pull data from a slow API
    ….

    If I wait for all that data to be returned before loading the grid this is going to take hours.

    Instead what I want to do is
    1 – load the grid with the basic data I have in my DB
    2 – let the fields from the remote API populate as they are returned 1 by 1

    For example:
    1 – grid loads (1 million students):
    id | first Name | last name | Photo on FaceBook
    1 | John1 | doe | loading….
    2 | John2 | doe | loading….
    3 | John3 | doe | loading….
    4 | John4 | doe | loading….
    Grid is displayed

    2 – Then slowly “loading….” gets replaced by the result of an API call to the Facebook API and so on till all images are loaded from the remote API call to Facebook

    Grid loading cells after grid is loaded #63931

    Dimitar
    Participant

    Hi jccompagnon,

    I understand now and I think that you will find the grid’s virtual mode option suitable for your scenario. Here are two examples: Virtual Paging and Virtual Scrolling.

    Best Regards,
    Dimitar

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

    Grid loading cells after grid is loaded #63974

    jccompagnon
    Participant

    hum,
    Virtual mode still still loads the grid with all the data. it does not load the million rows at once but it is still.
    this stills loads as
    1 – grid loads done

    we want
    1 – grid loads
    2 – some cells are populated by an api call

    let’s try another example for you to understand
    let’s say we want to
    1 – load the grid at 1:00 pm
    2 – load the images from API call that takes 15 minutes to execute

    obviously we want the user to be able to look at the grid at 1:00pm without having to wait till 1:15pm till the api call return
    so the idea is 1 you load the grid. Once the grid is loaded you fire a function that then calls the api load that takes 15 minutes to retrieve
    Because the grid was loaded in 1 the user can start working with the grid without having to wait for the api load to return.

    There has to be an “afterrender” event or Afterload, …

    Grid loading cells after grid is loaded #63980

    jccompagnon
    Participant

    Please take a look at the video I did.
    I did slow down the video so that you can clearly see that
    1 – grid loads
    2 – once the grid is loaded it loads the values for certain cells

    that is what we want to do

    https://www.youtube.com/watch?v=EPBGLKcHYH8

    Grid loading cells after grid is loaded #63990

    Dimitar
    Participant

    Hello jccompagnon,

    You can use the grid method setcellvalue to set the cell values that are retrieved from your API when they are retrieved. By default, the cells may be loaded with an image, such as a loading animation, as in your example.

    There is no “afterrender” event but when the grid has been rendered, it fires the ready callback function. Please take a look at the API Documentation for more information and examples.

    Best Regards,
    Dimitar

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

    Grid loading cells after grid is loaded #63992

    jccompagnon
    Participant

    I will try that

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

You must be logged in to reply to this topic.