Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-16494] TiAPI: Allow multiple markers in ListView

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2015-04-23T20:11:05.000+0000
Affected Version/sn/a
Fix Version/sRelease 4.1.0
ComponentsTiAPI
Labelsmodule_listview, qe-manualtest, qe-testadded, supportTeam
ReporterMostafizur Rahman
AssigneeHieu Pham
Created2014-02-24T05:24:05.000+0000
Updated2015-06-16T16:56:30.000+0000

Description

The current setMarker implementation works fine for a use case when you want to lazy-load data in a list or otherwise only care about scrolling in one direction. However, I have a use case in which I want to know if the user scrolls in either direction in a ListView. It appears that I can only set one marker on the list at a time. In the attached project, I populate the list with 100 items, scroll to item 50, and set markers at 30 and 70. I would like the marker event to fire if the user scrolls to either item 30 or item 70. Right now, I have to choose one or the other, which means I can't implement my desired interface with a ListView. If you allow setting multiple markers, perhaps it will be helpful to also add a clearMarkers method on ListView to remove them all at once. Although I selected iOS as the platform in the ticket, I assume this impacts all platforms.

Attachments

FileDateSize
Sample-ControllerStyleView.zip2014-02-24T05:30:41.000+00001471

Comments

  1. Hieu Pham 2015-04-17

    master PR for Android: https://github.com/appcelerator/titanium_mobile/pull/6787 Testing code:
       function getData(section){
           var data = [];
           
           for (i=0;i<150;i++){
               data.push({
                   template:Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT,
                   properties: {
                       title:'SECTION '+section+' ITEM '+i,
                       searchableText: 'SECTION '+section+' ITEM '+i
                   },
               });
           }
           return data;
       }
       
       function getSections(){
           //BOTH
           var section1 = Ti.UI.createListSection({
               headerTitle:'Section 0 Header',
               footerTitle:'Section 0 Footer'
           });
           //HEADER ONLY
           var section2 = Ti.UI.createListSection({
               headerTitle:'Section 1 Header'
           });
           //FOOTER ONLY
           var section3 = Ti.UI.createListSection({
               footerTitle:'Section 2 Footer'
           });
           //Neither
           var section4 = Ti.UI.createListSection();
           section1.setItems(getData(0));
           section2.setItems(getData(1));
           section3.setItems(getData(2));
           section4.setItems(getData(3));
           
           return [section1,section2,section3,section4];
       }
       
       var win = Ti.UI.createWindow({
           title:'Headers & Footers'
       });
           
       var platformName = Titanium.Platform.osname;
       var isIOS = (platformName == 'iphone' || platformName == 'ipad');
           
       var listView = Ti.UI.createListView({
           top: 20,
           caseInsensitiveSearch: true,
           sections:getSections(),
           headerTitle:'THIS IS LIST VIEW HEADER',
           footerTitle:'THIS IS LIST VIEW FOOTER. SHOULD BE AT BOTTOM'
       });
       listView.addEventListener('marker', function(e) {
       	Ti.API.info("Marker fired: Section " + e.sectionIndex + ", Item:" + e.itemIndex);
       });
       win.add(listView);
       listView.addMarker({sectionIndex: 1, itemIndex: 4});
       listView.addMarker({sectionIndex: 0, itemIndex: 80});
       win.open();
       
    1. Run code and scroll down, check logs to confirm the events are fired correctly.
  2. Vishal Duggal 2015-04-22

    PR for iOS master - https://github.com/appcelerator/titanium_mobile/pull/6800
  3. Lokesh Choudhary 2015-06-16

    Verified the fix for both IOS and Android. Multiple markers are fired as expected in the console. Closing the feature. Environment: Appc Studio : 4.1.0.201505071004 Ti SDK : 4.1.0.v20150614181235 Ti CLI : 4.0.1 Alloy : 1.6.2 MAC Yosemite : 10.10.3 Appc npm : 4.0.1 Appc CLI : 4.0.2 Node: v0.10.37 Nexus 6 - Android 5.0.1 Iphone Simulator : Iphone 5 IOS 8.3

JSON Source