Titanium JIRA Archive
Appcelerator Community (AC)

[AC-948] ListView Marker won't work with sections and templates

GitHub Issuen/a
TypeBug
Priorityn/a
StatusResolved
ResolutionCannot Reproduce
Resolution Date2015-08-30T08:13:52.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK & CLI
Labelsios, listSections, listView, templates
ReporterSebastian Klaus
AssigneeShak Hossain
Created2015-05-18T07:46:12.000+0000
Updated2016-03-08T07:37:16.000+0000

Description

Operating System
  Name                        = Mac OS X
  Version                     = 10.10.4
  Architecture                = 64bit
  # CPUs                      = 8
  Memory                      = 17179869184
Node.js
  Node.js Version             = 0.10.38
  npm Version                 = 1.4.28
Titanium CLI
  CLI Version                 = 4.1.0-dev
Titanium SDK
  SDK Version                 = 4.1.0.v20150516202834
  SDK Path                    = /Volumes/Data/Users/sebastian/Library/Application Support/Titanium/mobilesdk/osx/4.1.0.v20150516202834
  Target Platform             = iphone
Using sections for each row with additional marker will not work when using templates
var win = Ti.UI.createWindow({backgroundColor: 'white'});
var plainTemplate = {
    childTemplates: [
        {
            type: 'Ti.UI.Label', // Use a label
            bindId: 'rowtitle',  // Bind ID for this label
            properties: {        // Sets the Label.left property
                left: '10dp'
            }
        },
        {
            type: 'Ti.UI.ImageView',  // Use an image view
            bindId: 'pic',            // Bind ID for this image view
            properties: {             // Sets the ImageView.image property
                image: 'KS_nav_ui.png'
            }
        },
        {
            type: 'Ti.UI.Button',   // Use a button
            bindId: 'button',       // Bind ID for this button
            properties: {           // Sets several button properties
                width: '80dp',
                height: '30dp',
                right: '10dp',
                title: 'press me'
            },
            events: {click: report}  // Binds a callback to the button's click event
        }
    ]
};
function report(e) {
    Ti.API.info(e.type);
}
var listView = Ti.UI.createListView({
    // Maps the plainTemplate object to the 'plain' style name
    templates: {'plain': plainTemplate},
    // Use the plain template, that is, the plainTemplate object defined earlier
    // for all data list items in this list view
    defaultItemTemplate: 'plain'
});
var sectionData = [];
var i = 25;
for (var k = 0; k < 25; k++) {
    var section = Ti.UI.createListSection();
    section.setItems([{
        properties: {
            title: 'Row ' + (k + 1)
        },
        rowtitle: {
            text: 'Row ' + (k + 1)
        }
    }]);
    sectionData.push(section);
}
listView.setSections(sectionData);

// Set the initial item threshold
listView.setMarker({sectionIndex: (i - 1), itemIndex: 0});

// Load more data and set a new threshold when item threshold is reached
listView.addEventListener('marker', function (e) {
    var max = i + 25;
    var data = [];
    for (var k = i; k < max; k++) {
        var section = Ti.UI.createListSection();
        section.setItems([{
            properties: {
                title: 'Row ' + (k + 1)
            },
            rowtitle: {
                text: 'Row ' + (k + 1)
            }
        }]);
        listView.appendSection(section);
    }
    i = i + 25;
    listView.setMarker({sectionIndex: (i - 1), itemIndex: 0});
});

win.add(listView);
win.open();
Replacing the listview create method with
var listView = Ti.UI.createListView({
    // Maps the plainTemplate object to the 'plain' style name
    //templates: {'plain': plainTemplate},
    // Use the plain template, that is, the plainTemplate object defined earlier
    // for all data list items in this list view
    //defaultItemTemplate: 'plain'
});
Let the marker work again

Attachments

FileDateSize
TestApp.zip2015-05-19T07:27:39.000+00002954631

Comments

  1. Radamantis Torres-Lechuga 2015-05-19

    [~benutzername] we can not replicate this issue, and it looks like the attached test case is not related to this, can you please check and try to share more info on how to replicate? Thanks
  2. Sebastian Klaus 2015-05-19

    Start the TestApp and scroll down. As you see, the marker will not be fired
  3. Harish Mridha 2015-05-19

    Hi I have tested new TestApp . marker event fired properly . *Code*
       
       listView.addEventListener('marker', function (e) {
       	Ti.API.info("marker Fired when the list view displays the reference item or an item beyond the reference item.");
           var max = i + 25;
           var data = [];
           for (var k = i; k < max; k++) {
               var section = Ti.UI.createListSection();
               section.setItems([{
                   properties: {
                       title: 'Row ' + (k + 1)
                   },
                   rowtitle: {
                       text: 'Row ' + (k + 1)
                   }
               }]);
               listView.appendSection(section);
               Ti.API.info('Row ' + (k + 1));
           }
           i = i + 25;
           listView.setMarker({sectionIndex: (i - 1), itemIndex: 0});
       });
       
       
    *Log*
       
       [INFO] :   Application started
       [INFO] :   TestApp/1.0 (4.0.0.9b7d303)
       [INFO] :   marker Fired when the list view displays the reference item or an item beyond the reference item.
       [INFO] :   Row 26
       [INFO] :   Row 27
       [INFO] :   Row 28
       [INFO] :   Row 29
       [INFO] :   Row 30
       [INFO] :   Row 31
       [INFO] :   Row 32
       [INFO] :   Row 33
       [INFO] :   Row 34
       [INFO] :   Row 35
       [INFO] :   Row 36
       [INFO] :   Row 37
       [INFO] :   Row 38
       [INFO] :   Row 39
       [INFO] :   Row 40
       [INFO] :   Row 41
       [INFO] :   Row 42
       [INFO] :   Row 43
       [INFO] :   Row 44
       [INFO] :   Row 45
       [INFO] :   Row 46
       [INFO] :   Row 47
       [INFO] :   Row 48
       [INFO] :   Row 49
       [INFO] :   Row 50
       
       

JSON Source