Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-5441] iOS: Adding TableViewRow doesn't update index for SearchBar

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2011-11-11T09:51:08.000+0000
Affected Version/sRelease 1.8.0
Fix Version/sSprint 2011-45, Release 1.8.0.1
ComponentsiOS
Labelsmodule_tableviewrow, qe-testadded
ReporterMatthew Congrove
AssigneeStephen Tramer
Created2011-10-05T11:00:46.000+0000
Updated2012-01-30T16:40:09.000+0000

Description

The customer is trying to have a TableView-attached SearchBar perform remote (API) searches. This mostly works... you can retrieve the data, and append the new rows to the table, but "No Results" still shows up. Closing the search via "Cancel" will slide the "No Results" down, revealing the remote data that was added to the TableView. It seems like, perhaps, the filter attribute index on the search is not being updated. Example code:
var win = Ti.UI.createWindow();

var search = Ti.UI.createSearchBar({
	showCancel: true,
	autocorrect: false,
	hintText: "Type in \"Remote\"",
	autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
	keyboardType: Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION
});

var table = Ti.UI.createTableView({
	search: search,
	filterAttribute: "title",
	data: [
		Ti.UI.createTableViewRow({ title: "Local Data" }),
		Ti.UI.createTableViewRow({ title: "Local Data" }),
		Ti.UI.createTableViewRow({ title: "Local Data" })
	]
});

search.addEventListener("return", getRemoteData);

win.add(table);
win.open();

function getRemoteData() {
	table.setData([
		Ti.UI.createTableViewRow({ title: "Remote Data" }),
		Ti.UI.createTableViewRow({ title: "Remote Data" }),
		Ti.UI.createTableViewRow({ title: "Remote Data" })
	]);
}
REPRO STEPS: - Open the app - Notice "Local Data" - Search for "Remote" - Notice "No Results", should say "Remote Data" - Cancel search - Notice "Remote Data"

Comments

  1. Blain Hamon 2011-10-05

    Pull request pending: https://github.com/appcelerator/titanium_mobile/pull/531
  2. Matthew Congrove 2011-10-12

    Hey Blain, That fix is working, but has cropped up another issue related to rendering. If the row has labels, views, etc contained within it, those are not properly rendered. Here's a video of the issue: http://screencast.com/t/av1HBrUeK Here's the code to repro:
       var win = Ti.UI.createWindow();
       
       var search = Ti.UI.createSearchBar({
       	showCancel: true,
       	autocorrect: false,
       	hintText: "Type in \"Remote\"",
       	autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
       	keyboardType: Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION
       });
       
       var table = Ti.UI.createTableView({
       	search: search,
       	filterAttribute: "i",
       	data: [
       		Ti.UI.createTableViewRow({ title: "Local Data", i: "Local Data" }),
       		Ti.UI.createTableViewRow({ title: "Local Data", i: "Local Data" }),
       		Ti.UI.createTableViewRow({ title: "Local Data", i: "Local Data" })
       	]
       });
       
       search.addEventListener("return", getRemoteData);
       
       win.add(table);
       win.open();
       
       function getRemoteData() {
       	var rows = [];
       	
       	for(var i = 0; i < 3; i++) {
       		var row = Ti.UI.createTableViewRow({
       			i: "Remote"
       		});
       		
       		var label = Ti.UI.createLabel({
       			text: "Remote Data",
       			width: "auto",
       			height: "auto"
       		});
       		
       		row.add(label);
       		rows.push(row);
       	}
       	
       	table.setData(rows);
       }
       
    Should this be another bug, or was it related to any changes you made to resolve this one?
  3. Mark Allen 2011-10-19

    Has the second issue in this thread ("That fix is working, but has cropped up another issue related to rendering. If the row has labels, views, etc contained within it, those are not properly rendered.") identified by Matt Congrove been reviewed/fixed?
  4. Stephen Tramer 2011-11-10

    The fix for TIMOB-6134 is the same as the fix for some visual issues caused by searching a table with complex rows.
  5. Mark Allen 2011-11-16

    Hello, I downloaded the latest build (listed below) and ran our application. Good news, bad news. Good news is that the first line of the row displays without issue. Bad news is that the data on lines 2 and 3 of the row do not display - they disappear. The function that creates the row(s) is listed below: function createRows(data) { App.UI.ServiceRequestList.readImage = []; var rows = []; // Loop through each SR, create a row for(var i = 0; i < data.length; i++) { var row = Ti.UI.createTableViewRow(App.UI.ServiceRequestList.style.tableRow); var imgViewSeverity = Ti.UI.createImageView(App.UI.ServiceRequestList.style.imgViewSeverity); var severityLabel = Ti.UI.createLabel(App.UI.ServiceRequestList.style.severityLabel); var srIdLabel = Ti.UI.createLabel(App.UI.ServiceRequestList.style.srIdLabel); var lastUpdateLabel = Ti.UI.createLabel(App.UI.ServiceRequestList.style.lastUpdateLabel); var partyNameLabel = Ti.UI.createLabel(App.UI.ServiceRequestList.style.partyNameLabel); var problemSummaryLabel = Ti.UI.createLabel(App.UI.ServiceRequestList.style.problemSummaryLabel); var readImage = Ti.UI.createView(App.UI.ServiceRequestList.style.readImage); App.UI.ServiceRequestList.readImage.push(readImage); switch(data[i].severity) { case "S1": severityImage = "S1"; severityFontColor = "#FFFFFF"; break; case "S2": severityImage = "S2"; severityFontColor = "#FFFFFF"; break; case "S3": severityImage = "S3"; severityFontColor = "#FFFFFF"; break; default: severityImage = "S4"; severityFontColor = "#666666"; break; } App.UI.merge(row, { id: data[i].srNumber }); App.UI.merge(imgViewSeverity, { image: DIR_IMAGE + severityImage + ".png" }); //severity label will sit 'on top of' the imageView App.UI.merge(severityLabel, { text: data[i].severity, //backgroundImage: DIR_IMAGE + severityImage + ".png", color: "#" + severityFontColor }); App.UI.merge(srIdLabel, { text: data[i].srNumber }); //display next action date if listed sorted by next action date or severity. display last updated date if list sorted by last updated date or SR Number if(App.read("srlist_sortby") && (App.read("srlist_sortby") == SORT_NEXT_ACTION_DATE || App.read("srlist_sortby") == SORT_SEVERITY)) { App.UI.merge(lastUpdateLabel, { text: data[i].nextActionDate, color: "red" }); } else if (App.read("srlist_sortby") && (App.read("srlist_sortby") == SORT_SR_NUMBER || App.read("srlist_sortby") == SORT_MOST_RECENT)) { App.UI.merge(lastUpdateLabel, { text: data[i].lastUpdatedDate, color: "blue" }); } else { App.UI.merge(lastUpdateLabel, { text: data[i].nextActionDate, color: "red" }); } App.UI.merge(partyNameLabel, { text: data[i].partyName }); App.UI.merge(problemSummaryLabel, { text: data[i].problemSummary, }); App.UI.merge(readImage, { visible: (data[i].srRead == 0) ? true : false }); row.add(imgViewSeverity); row.add(severityLabel); row.add(srIdLabel); row.add(lastUpdateLabel); row.add(partyNameLabel); row.add(problemSummaryLabel); row.add(readImage); rows.push(row); } return rows; }; -------------------------------------------------------------------- App.UI.ServiceRequestList.style = { win: { title: Ti.Locale.getString("My_SRs"), tabBarHidden: true, barColor: "#000", barImage: DIR_IMAGE + "emc_topBar.png" }, buttonSettings: { titleid: "Settings" }, buttonActions: { systemButton:Titanium.UI.iPhone.SystemButton.ACTION }, view: { width: "100%", height: "100%", top: 0, left: 0, backgroundColor: "#C5CCD4" }, table: { width: Ti.Platform.displayCaps.platformWidth, height: "100%", searchHidden: true }, tableRow: { height: 78, hasChild: true, selectedBackgroundImage: "none", selectionStyle: Ti.UI.iPhone.TableViewCellSelectionStyle.none }, searchBar: { barColor: "#ABABAB", showCancel: true, autocorrect: false, autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE, hinttextid: "SR_Number", keyboardType: Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION }, severityLabel: { top: 5, left: 30, width: 30, height: 20, font: { fontSize: 12, fontWeight: "bold" }, color: "#FFF", textAlign: "center" }, imgViewSeverity: { top: 5, left: 30, width: 30, height: 20 }, srIdLabel: { top: 5, left: 65, right: 50, height: "auto", font: { fontSize: 16, fontWeight: "bold" } }, lastUpdateLabel: { top: 5, right: 5, width: "auto", textAlign: "right", height: "auto", font: { fontSize: 12 }, color: "#385487" }, partyNameLabel: { top: 25, left: 30, right: 5, height: 16, font: { fontSize: 12, fontWeight: "bold" }, color: "#666" }, problemSummaryLabel: { top: 41, left: 30, right: 5, height: 32, font: { fontSize: 12 }, color: "#999" }, readImage: { borderColor: "#3780EC", borderWidth: 1, borderRadius: 5, top: 34, left: 10, height: 10, width: 10, backgroundGradient: { type: "linear", colors: [ "#4F98F6", "#226BE4" ], startPoint: { x: 0, y: 0 }, endPoint: { x: 0, y: 10 }, backFillStart: false } } };
  6. Stephen Tramer 2011-11-16

    Mark - That is an issue for a separate ticket. Please file one with community, or if you are working with CS, please inform them of the need and your sample code.
  7. Michael Pettiford 2011-11-21

    Tested with Ti Studio 1.0.7.201111182325 on OSX Lion Ti Mob SDK 1.8.0.1.v20111121090256 iPhone 4S OS 5.0, iPad 2 OS 4.3.5 Search bar and table view rows functioning properly

JSON Source