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

iOS: Listview setHeaderView with search is not working

    Details

    • Type: Bug
    • Status: Closed
    • Priority: None
    • Resolution: Done
    • Affects Version/s: Release 7.1.0
    • Fix Version/s: None
    • Component/s: iOS
    • Labels:
      None
    • Environment:
    • Story Points:
      1
    • Sprint:
      2018 Sprint 08 SDK

      Description

      Hello !
      We have an issue with Listview setHeaderView with search. HeaderView is not displayed on iOS with search bar but its working on android.

      Test code:

      var popularSearchList = [],
          searchList = [],
          popularSearchListData = [],
          searchListData = [];
      for (var i = 0; i < 5; i++) {
      	popularSearchList.push({
      		id : i,
      		name : "Bhuvan " + i
      	});
      }
      searchList.push({
      	id : 0,
      	name : "ListView"
      }, {
      	id : 1,
      	name : "TextField"
      }, {
      	id : 2,
      	name : "EditText"
      }, {
      	id : 3,
      	name : "Spinner"
      }, {
      	id : 4,
      	name : "Button"
      }, {
      	id : 5,
      	name : "ImageView"
      }, {
      	id : 6,
      	name : "ImageButton"
      }, {
      	id : 7,
      	name : "RecyclerView"
      }, {
      	id : 8,
      	name : "CardView"
      });
       
      showRecentSearchList(popularSearchList);
      showSearchList(searchList);
       
      function showRecentSearchList(popularSearchList) {
      	_.each(popularSearchList, function(popularSearchDataObj) {
      		var listRowObj = {
      			lblRecentSearchItem : {
      				text : popularSearchDataObj.name
      			},
      			rowName : popularSearchDataObj.name,
      			template : "recentSearchListTemplate",
      		};
      		popularSearchListData.push(listRowObj);
      	});
      	$.lvSearchList.sections[0].setHeaderView(addRecentSectionHeader());
      	$.lvSearchList.sections[0].setItems(popularSearchListData);
      }
       
      function showSearchList(searchList) {
      	_.each(searchList, function(searchListObj) {
      		var listRowObj = {
      			lblSearchItem : {
      				text : searchListObj.name
      			},
      			rowName : searchListObj.name,
      			properties : {
      				searchableText : searchListObj.name,
      			},
      			template : "searchListTemplate"
      		};
      		searchListData.push(listRowObj);
      	});
      	//$.lvSearchList.sections[0].setHeaderView(addSearchSectionHeader());
      	//$.lvSearchList.sections[0].setItems(searchListData);
      }
       
      function searchAction(e) {
      	$.lvSearchList.searchText = e.value;
      	if (e.value.length > 0) {
      		showListView(true);
      	} else {
      		showListView(false);
      	}
      }
       
      function showListView(isSearchData) {
      	//$.lvSearchList.sections[0].setHeaderView(addSearchSectionHeader());
      	if (isSearchData) {
      		$.lvSearchList.sections[0].setHeaderView(addSearchSectionHeader());
      		$.lvSearchList.sections[0].setItems(searchListData);
      	} else {
      		$.lvSearchList.sections[0].setHeaderView(addRecentSectionHeader());
      		$.lvSearchList.sections[0].setItems(popularSearchListData);
      	}
      }
       
      function addRecentSectionHeader() {
      	var headerView = Ti.UI.createView({
      		width : Titanium.UI.FILL,
      		height : 40,
      		backgroundColor : 'white',
      		layout : 'horizontal'
      	});
      	var leftImage = Ti.UI.createImageView({
      		width : Titanium.UI.SIZE,
      		height : Titanium.UI.SIZE,
      		image : '/images/customer.png',
      		left : 20,
      	});
      	headerView.add(leftImage);
      	var title = "RECENT";
      	var lblTitle = Titanium.UI.createLabel({
      		width : Titanium.UI.FILL,
      		text : title,
      		height : Titanium.UI.FILL,
      		color : 'red',
      		left : 20,
      		font : {
      			fontSize : 16,
      			fontWeight : 'bold'
      		}
      	});
      	headerView.add(lblTitle);
      	return headerView;
      }
       
      function addSearchSectionHeader() {
      	var headerView = Ti.UI.createView({
      		width : Titanium.UI.FILL,
      		height : 40,
      		backgroundColor : 'white',
      		layout : 'horizontal'
      	});
      	var leftImage = Ti.UI.createImageView({
      		width : Titanium.UI.SIZE,
      		height : Titanium.UI.SIZE,
      		image : '/images/chassis.png',
      		left : 20,
      	});
      	headerView.add(leftImage);
      	var title = "RESULTS";
      	var lblTitle = Titanium.UI.createLabel({
      		width : Titanium.UI.FILL,
      		text : title,
      		height : Titanium.UI.FILL,
      		color : 'red',
      		left : 20,
      		font : {
      			fontSize : 16,
      			fontWeight : 'bold'
      		}
      	});
      	headerView.add(lblTitle);
      	return headerView;
      }
       
      function cancelSearchAction(e) {
       
      }
       
      $.index.open();
      
      

      <Alloy>
      	<Window class="container">
      		<View width="Titanium.UI.FILL" height="Titanium.UI.FILL" layout="vertical" top="25">
      			<View width="Titanium.UI.FILL" height="40" borderColor="green" borderWidth="2" left="10" right="10">
      				<SearchBar id="tfSearchField" onChange="searchAction" onCancel="cancelSearchAction" />
      				<!--<TextField id="tfSearchField" platform="ios" onChange="searchAction" onCancel="cancelSearchAction" />-->
      			</View>
      			<ListView id="lvSearchList" defaultItemTemplate="searchListItem">
      				<Templates>
      					<ItemTemplate id="recentSearchListTemplate" name="recentSearchListTemplate">
      						<View id="viewRecentSearchList">
      							<Label id="lblRecentSearchItem" bindId="lblRecentSearchItem"/>
      							<ImageView id="imgRightArrow"/>
      						</View>
      					</ItemTemplate>
      					<ItemTemplate id="searchListTemplate" name="searchListTemplate">
      						<View id="viewSearchList">
      							<Label id="lblSearchItem" bindId="lblSearchItem"/>
      							<ImageView id="imgRightArrow"/>
      						</View>
      					</ItemTemplate>
      				</Templates>
      				<ListSection/>
      			</ListView>
      		</View>
      	</Window>
      </Alloy>
      

      Full project ListviewSearch.zip

      Please take a look on attached screenshot for android and iOS.

      Teste Environment :

      Operating System
        Name                        = Mac OS X
        Version                     = 10.13
        Architecture                = 64bit
        # CPUs                      = 4
        Memory                      = 8589934592
      Node.js
        Node.js Version             = 8.9.1
        npm Version                 = 5.5.1
      Titanium CLI
        CLI Version                 = 5.0.14
      Titanium SDK
        SDK Version                 = 7.1.0.GA
      

      Thanks

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                vijaysingh Vijay Singh
                Reporter:
                aislam Aminul Islam
              • Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

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

                    Git Source Code