Performance Issue

The situation I’m currently in is as follows:

I am essentially creating an electronic, online TV Guide. I have to organize data in a grid style format, however each cell in the grid can potentially be a different size. The size of each cell is based on its percentage of the time in a two hour slot (ie. a 45 Minute show takes up 30% of that row) and each cell acts as a button which links to information about the show in question.

The way I am doing this is by placing a label at the beginning of the row, showing the channel number and call letter, followed by a button for every show on that channel in the 2 hour block. With over 250 channels, this begins to take a great toll on the scrolling of the page, almost rendering it useless on certain devices (earlier iPhones, BlackBerrys, etc.)

I’m wondering if there is a way to prerender the items or something of the like, as it seems that dynamic loading is out of the question (I am not using any components that support dynamic loading). If I need to explain in more detail, let me know.

To scroll something on touch device - you need to fully render it, so there is no way to renders something dynamically|partially.

if you have 250 rows with few buttons in each - it creates about 1000 active elements - which is quite a lot.

Using html templates to render each row, instead of button may help

Hey Stanislav,

I found out what was causing the majority of my slow scrolling problems!

It turned out to be the after-touch scroll. ie. If you did a short upward flick, the calculations used to determine where the list or view would scroll to was causing less powerful devices to render the animation slowly and choppy. Once I used the line:

dhx.Touch.config.gravity = 0;

it made scrolling very smooth and operable on every device!

Thanks for your input!