Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-16157

ListView Phase 2 - Templates and Search not working together

    Details

      Description

      After waiting for the release of SDK 3.2.0 so I can convert my TableViews to ListViews, I was looking to add a layout (2x labels) to each row along with the ability to search. https://jira.appcelerator.org/browse/TIMOB-666

      There's lack of documentation but the searchBar works fine standalone and a template works fine standalone however combining the code together results in there being no search bar at all when a template is used.

      Am I missing something or is this a bug?

      var self = Ti.UI.createWindow({
          backgroundColor: common.layout.backgroundColor,
          title: "Search",
          navBarHidden: false,
          layout: 'vertical'
      });
       
      //Create search bar
      var listSearch = Titanium.UI.createSearchBar({
          barColor:'#C7C7C7',
          height: 43,
          top: 0
      });
       
      //Function to catch click event from Template
      function clickEvent (e) {
         alert(JSON.stringify(e)); 
      }//
       
      //Template with 2 labels
      var plainTemplate = {
          childTemplates: [
              {                            // Title
                  type: 'Ti.UI.Label',     // Use a label for the title
                  bindId: 'title',         // Maps to a custom title property of the item data
                  properties: {            // Sets the label properties
                      color: '#000',
                      font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                      left: '60dp', top: 0,
                  },
              },
              {                            // Subtitle
                  type: 'Ti.UI.Label',     // Use a label for the subtitle
                  bindId: 'subtitle',      // Maps to a custom subtitle property of the item data
                  properties: {            // Sets the label properties
                      color: '#000',
                      font: { fontFamily:'Arial', fontSize: '14dp' },
                      left: '60dp', top: '25dp',
                  }
              }
          ],
          // Binds a callback to the click event, which catches events bubbled by the view subcomponents.
          events: {click: clickEvent },
          properties :{
              accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE
          }
      };
       
       
      //Create ListView
      var listView = Ti.UI.createListView({
          templates: { 'template': plainTemplate }, //with template theres no search bar
          defaultItemTemplate: 'template',            //comment out template and search bar works 
          searchView: listSearch,
          caseInsensitiveSearch: true,
          searchHidden: false
      });                                           
       
       
      var sections = []; //array
       
      //Fruit section
      var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
      var fruitDataSet = [
          { title: {text: 'Apple' }, subtitle: { text: 'Sub sub label' }, searchableText: 'Apple', properties: {title: 'Apple', subtitle: 'Sub sub label', searchableText: 'Apple', itemId: 1, accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE}},
          { title: {text: 'Banana' }, subtitle: { text: 'Sub sub label' }, searchableText: 'Banana', properties: { itemId: 2, title: 'Banana', subtitle: 'Sub sub label', searchableText: 'Banana', accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_DISCLOSURE }},
          {properties: { title: 'Pear', subtitle: 'Sub sub label', searchableText: 'Pear'}},
          {properties: { title: 'Orange', subtitle: 'Sub sub label', searchableText: 'Orange'}}
      ];
      fruitSection.setItems(fruitDataSet);
      sections.push(fruitSection);
       
      //Veg section
      var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
      var vegDataSet = [
          {properties: { title: 'Carrots', subtitle: 'Sub sub label', searchableText: 'Carrots'}},
          {properties: { title: 'Potatoes', subtitle: 'Sub sub label', searchableText: 'Potatoes'}},
      ];
      vegSection.setItems(vegDataSet);
      sections.push(vegSection);
       
      listView.sections = sections; //assign sections
       
      var indices = [{index:0, title: 'F'},
                     {index:1, title: 'V'},
                     {index:2, title: 'F'}
                    ];
      listView.sectionIndexTitles = indices; //assign indexing
                  
      self.add(listView); //add to self
       
      //Example of appending Fish section
      var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
      var fishDataSet = [
          {properties: { title: 'Cod', subtitle: 'Sub sub label', searchableText: 'Cod'}},
          {properties: { title: 'Haddock', subtitle: 'Sub sub label', searchableText: 'Haddock'}},
      ];
      fishSection.setItems(fishDataSet);
      listView.appendSection(fishSection);
       
      return self;
      

      The above example code shows a template working, comment out the below to see the searchBar work on its own:

      templates: { 'template': plainTemplate }, //with template theres no search bar
          defaultItemTemplate: 'template',            //comment out template and search bar works
      

      Can the both work together or what am I missing?

        Attachments

          Activity

            People

            • Assignee:
              vduggal Vishal Duggal (Inactive)
              Reporter:
              hardbyte Craig Jones
              Reviewer:
              Sabil Rahim
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-18163
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Source Code