GridLayout for table - very laggy


#1

Hello,

is there someone who could help me with very laggy grid layout? I need to create table for football standings.
It should looks like this, but thats very laggy.

If someone could update this play template I appreciate it.

Thanks


#2

First thing I notice, that thing has over 20 rows, and 8 columns, this is at least 160 cells. On a single screen. Each cell will have to have its width and height calculated and then rendered. - Number one reason to experience laggyness.

What is the end result supposed to look like? Certainly, users of the application won’t want to look at tiny UI, perhaps you should rethink your UI layout logic - use a tabview, or a listview, or even a couple of screens, not just 1.


#3

Yes, I know there is so many cells. But it should looks like this. That´s football standings table. Unfortunately lt must looks like this.
There is no other way.


#4

As Peter suggested, you must try a ListView - design the row template with GridLayout so number of cells in one layout is reduced and ListView can give better performance.


#5

I tried it, but performance is still bad. Now there is problem with columns. It doesn’t acting like table. There is different cells width across rows. Now standings are really unclear. :frowning: I am kinda disappointed. Maybe I must solve it by HTMLView. But this performance problem is really strange. When I see the other apps (swift or react native) there are using more difficult layouts :open_mouth:


#6

Haha I tried HTMLview and I thing that is the best solution for this kind of problem :slight_smile: hurray


#7

Do want to take a look at this once? If still lagging may I know what device you are using?


#8

This solution is good. I have iPhone 6S


#9

Great, so there is no more lagging on UI?


#10

No, it’s great! Thanks! :slight_smile:


#11

Cool. Most newbies do 2 biggest mistakes which I saw in your code too,

  • Nested scrollable containers - for example placing ListView / RadListView (which itself has built-in scrollers) inside a ScrollView. Never do it!!!
  • Nested layouts / views - for example placing ScrollView inside a StackLayout, until you don’t have multiple views to wrap in specific order, you can directly add a view to it’s parent.

Spending good time in learning the basics of layouts can greatly help here. This one seems to be a good interactive tutorial

Besides most people start judging too early that ReactNative has better feature set than NativeScript. But anyone who really understands the basics of the framework will easily sense NativeScript is way more powerful than ReactNative. The only biggest advantage I could see in ReactNative, there are a lot of samples projects / blogs to copy / paste the code without worrying how it works. NativeScript may eventually reach there too :joy:


#12

OK, so @b4rtt’s solution is to use an HTML view, the guys at Ionic will love to hear that!

But @manojdcoder seems to believe the original code used Nativescript layouts wrongly which might have contributed to the laggy display?

It would be REALLY good to know if @manojdcoder is correct and using Nativescript layouts correctly is faster, or as fast, as an HTML view - otherwise, why are we using Nativescript??


#13

Yes it could seems bad using HTML view, but believe me. In my use case - pages with more tables on one view it HTML view best way how to solve it. In my standings and statistics tables haven’t any logic. It’s only shows data.

Solution by @manojdcoder is fast as possible I think. But I still think that will not act like classic HTML Table. Because he is using predefined cell sizes.
He also says that placing ListView / RadListView (which itself has built-in scrollers) inside a ScrollView. Never do it!!! - But how to solve more tables in one view?


#14

@b4rtt @PurpleEdge It is possible to build almost any sort of UI with NativeScript, but your performance is measured by how you build it rather what you build.

  • A good UI/UX Design
  • Using right layouts and components in right place

are keys to your performance. If you fail in either of two, honestly even if you build an app with native Android still the performance will be poor. My solution was really a quick sample to you, how many layouts / components you could possibly reduce to build similar UI in your example.

I don’t know your app or what exactly it would do, so it is definitely not possible for me to give you the exact code. All I tried to suggest was, focus on how better it could be designed and using right layouts and components in place.

For instance I did say Never nest scrollable containers but if at all your UI needs to have multiple list in a single page, you can of course wrap them inside scroll view but make the list to not have it’s own scroller Or even you can merge multiple data set inside one RadListView with different item templates.