Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27303] Windows: Issue with TableView scrollend event (Windows 10 uwp apps)

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionWon't Do
Resolution Date2020-05-15T18:25:20.000+0000
Affected Version/sRelease 7.0.2, Release 8.0.2
Fix Version/sn/a
ComponentsWindows
Labelsn/a
ReporterAminul Islam
AssigneeUnknown
Created2019-08-02T13:48:28.000+0000
Updated2020-05-15T18:25:26.000+0000

Description

Hello! Scroll event attached in Ti.UI.createTableView. After scroll event-triggered then the user wants to refresh table view. While scrolling, the table view shows blank. This is happening in Windows 10 app (UWP) but working fine in android/iOS Teste project: TestUWP.zip *Steps to reproduce:* 1. Import attached project. 2. Build with sdk 8.0.2.GA or 7.0.2.GA on Windows 10 uwp apps on Windows Desktop 3. Scroll the table view 4. It showing blank 
Operating System
  Name                        = Microsoft Windows 10 Pro
  Version                     = 10.0.17134
  Architecture                = 32bit
  # CPUs                      = 4
  Memory                      = 17091956736
Node.js
  Node.js Version             = 8.9.1
  npm Version                 = 5.5.1
Titanium CLI
  CLI Version                 = 5.1.1
Titanium SDK
  SDK Version                 = 8.0.2.GA
  SDK Path                    = C:\ProgramData\Titanium\mobilesdk\win32\8.0.2.GA
  Target Platform             = windows
Thanks

Attachments

FileDateSize
TestUWP.zip2019-08-02T13:44:17.000+0000101637

Comments

  1. Kota Iguchi 2019-08-15

    So it turns out the reason why table view shows blank is because UI is too busy rendering the table view. We see there are multiple reasons there;

    Updating TableView.data causes re-creating of _entire_ table view row

    In the scrollend event in [^TestUWP.zip] shows that you update TableView.data property with empty array, and the update with concatenated array like below: 
       tblPartsList.addEventListener('scrollend', function(e){
     var cData = generateRamdomArray();
     searchedResult = searchedResult.concat(cData);
       		
     tblPartsList.data = [];
     tblPartsList.data = searchedResult;
   });
    However, this cause _re-creation of entire table view row_ despite you only want to append new rows. Instead of doing this, following code would be much better because this does not re-create entire table view rows. 
       tblPartsList.addEventListener('scrollend', function(e){
     var cData = generateRamdomArray();    		
     tblPartsList.appendRow(cData);
   });

    scrollend is fired too often when you drag scroll bar on Windows desktop

    We see that Windows desktop TableView fires scrollend too often when you drag scroll bar. This is because Windows UWP component actually fires the event too often and Titanium is only forwarding the event acoordingly:( FYI this does not happen when you click (not drag) scroll bar arrow button so I would think this is platform component behavior bug but TIMOB-27335 will be taking care of this to try to suppress this.

    Windows TableView is basically heavy weight UI component

    Windows TableView and ListView is relatively heavy weight UI component. You might want to check out the https://github.com/appcelerator-modules/ti.xaml.listview - we have much more lightweight module to represent tables - in case you want to push lot more rows to the table.
  2. Kota Iguchi 2019-08-26

    https://github.com/appcelerator/titanium_mobile_windows/pull/1422

JSON Source