Our blazing fast Grid component built with pure JavaScript


Post by gregc »

Hi, I have this ongoing issue with grid painting. You can see an example of it here:

https://www.dndcombat.com/dndcombat/Welcome.do?section=Compendium

1) Go to the page and use your scroll bar to scroll down to the bottom of the grid
2) Click on the items menu
3) Now go back and click on the Compendium menu
4) Scroll down again and this time it does not load all of the rows, at the bottom there is a blank section with rows hidden
Image

I fix this in my production sites by reloading the grid twice, the equivalent of the table rows and you press the reload current page button which also works.

However its such a pain and creates other minor issues (e.g. performance overhead).

Last edited by gregc on Sun Jul 04, 2021 12:46 am, edited 1 time in total.

Post by mats »

What version are you using? Tried latest?


Post by gregc »

https://www.dndcombat.com/dndcombat/Welcome.do?section=Compendium
is now the latest.
seems a little worse, does it just with step one, scroll to the bottom of the grid and the blank section appears


Post by saki »

I was trying to check what is the problem but whenever I open Chrome Developer Tools it cannot be reproduced anymore. However, there is a problem with vertical spacing because my Chrome browser displays two vertical scrollbars when the dev tools is open.

Bryntum components and demos use flexbox for spacing and the best would be if you used it for your app where the grid resides.

If you could provide a simplified version of your code/page we could suggest the CSS for optimal layout/spacing.


Post by gregc »

I can replace it first time using the original instructions, open page scroll to the bottom, click items page, click back to compendium and scroll down to the bottom.

Here is the dev tools view Image


Post by saki »

The issue is most likely caused by fixed height of the grid container (90vh). This can do no good as we cannot say that the very inner container should always have 90% of viewport. I'd suggest to use 100vh on body, display:flex on on others either with fixed height for menu and search-bar or flex set to 1 for grid.

Also, the element's (div) container chain seems to be too deep. This fact is not by itself not a cause of rendering problems but it is more work to address all elements in the containment chain with the proper css for the desired layout.

The good inspiration for simple yet flexible containers is our demo: https://bryntum.com/examples/grid/basic/. It only contains one container, one header and one grid so it's very easy to address with css.

I don't think the problem is that some records are not loaded. It can be easily checked by typing

bryntum.query('grid').store.allRecords

in the console.


Post by gregc »

Ok I figured its something along those lines, I'll play with a layout overhaul, these layouts started 10 years ago lol.


Post by Animal »

You have an issue with your avatars.

For one thing they are served at full size. All the images should be processed down to avatar size before being stored as an avatar in your database. You render them with img height and width, but the actual images can be hundreds of K

That wouldn't be so bad if your server returned HTTP 304 "Not modified" responses when the images are requested multiple times as you scroll up and down.

But each full sized image is served every time. Using the network tab and sorting by request size, here are some of the images and how long they take to load:

Screenshot 2021-07-02 at 10.49.29.png
Screenshot 2021-07-02 at 10.49.29.png (172.86 KiB) Viewed 1147 times

Just take a look at https://dndcombatpublic.s3.us-east-2.amazonaws.com/images/characters/vm_grog.png


Post by Animal »

And I very strongly urge you to ditch Dojo.

That example loads several hundred K of very outdated stuff, all in separate HTTP requests, when there are only two Dojo widgets on the page.

I urge you to use a tbar on the Grid which contains a Combo and a TextField They are simple to use, more capable, faster and more flexible, and prettier than Dojo widgets.


Post by Animal »

And I think you misunderstand the loading of data into records as contrasted with the loading of HTML content

When loading records into a store, you just pass data. Not HTML which will end up being displayed in a data cell. The Column renderer is responsible for wrapping data up in HTML to make it look right.

What the records should contain is the pure, searchable, queryable, operational data

So your response packets should look more like

{
    "success" : true,
    "total" : 1,
    "data" : [
        {
            "id" : "16368133".
            "avatar:  "icons/player.png",
            "name": "Altair",
            "class": "Rogue 1",
            ...etc in the same way...
        }
    ]
}

Field names which describe what the data is.

Then your code will look much more understandable. And you will be able to operate on real data in the data store to do searching and sorting and filtering etc.

It's the Columns which take raw data from the named fields and wrap it up nicely in whatever HTML you need.


Post Reply