Grid loading cells after grid is loaded

[jccompagnonParticipant]

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

[DimitarParticipant]

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/

[jccompagnonParticipant]

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

[DimitarParticipant]

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/

[jccompagnonParticipant]

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

[DimitarParticipant]

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/

[jccompagnonParticipant]

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, …

[jccompagnonParticipant]

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

[DimitarParticipant]

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/

[jccompagnonParticipant]

I will try that

[Author]

Posts