[AC-3269] Adding Multiple labels into ListView child view

GitHub Issue	n/a
Type	Improvement
Priority	n/a
Status	Resolved
Resolution	Invalid
Resolution Date	2015-09-29T05:31:54.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Documentation
Labels	SupportTeam, android, ios
Reporter	Silambarasan Raman
Assignee	Shak Hossain
Created	2015-03-16T05:31:42.000+0000
Updated	2016-03-08T07:57:41.000+0000

Description

Hi All, Please look at the forum link http://developer.appcelerator.com/question/181384/adding-multiple-labels-into-list-item I want to add children (N number of Labels) into ListView's custom templates children view at the time of Network call success, I will come to know the count of Labels after the web service call response only, So i want to create/add labels on that place, But its seems to we can't do it Since the children views are read only. Please let me know if there is any solution? Reason for the need: Assume the description is posted by user along with image, I am at #Chennai with @Simbu, @Raj Here i need to display the # word with Blue color, @word with Pink color, and clicking on #word will takes to search page, @name will takes to that persons profile page, Like Instagram app.

Comments

Silambarasan Raman 2015-03-18

Hi Team, Can you respond? I am awaiting for your response.
Silambarasan Raman 2015-03-26

Hello Team, Still awaiting for your response

Motiur Rahman 2015-09-07

Hello, We can do it using Listview template. [ListView Guide](http://docs.appcelerator.com/platform/latest/#!/guide/ListViews) *Testing Environment* Command-Line Interface, version 4.1.2, Ti SDK: 4.1.0.GA, Platform: Android, iOS Studio Version: 4.1.1 *Test Code*

   var win = Ti.UI.createWindow({
   	backgroundColor : 'white'
   });
   
   var sections = [];
   
    var template = {
   
    childTemplates: [
    {
   
   		 type: 'Ti.UI.View',
   		 id: 'detailView' ,
   		 properties: {
   		 backgroundColor: "#fff",
   		 left:0,
   		 width: 220
   
    },
   
    childTemplates: [
    {
   						 type: 'Ti.UI.Label',
   						 bindId: 'title',
   						 id: 'title',
   						 properties: {
   						 color: 'black',
   						 font: { fontFamily:'Arial', fontSize: 14, fontWeight:'bold' },
   						 left: 10,
   						 top: 10,
   						 width: 200
   						 },
   						 events: {
   						 click:clickTitle
   						 }
   
    },
    {
   						 type: 'Ti.UI.Label',
   						 bindId: 'subtitle',
   						 id: 'subtitle',
   						 properties: {
   						 color: 'black',
   						 font: { fontFamily:'Arial', fontSize: 10 },
   						 left: 10,
   						 top: 30,
   						 width: 200
   						 },
   						 events: {
   						 click:clickSubTitle
   						 }
    },
    {
   						 type: 'Ti.UI.Label',
   						 bindId: 'meta',
   						 id: 'meta',
   						 properties: {
   						 color: 'gray',
   						 font: { fontFamily:'Arial', fontSize: 10 },
   						 left: 10,
   						 top: 45,
   						 width: 200
   						 },
   						 events: {
   						 click:clickMeta
   						 }
    					},
   
   				 ],
   
   	 		},
   
    		],
   
    	};
   
   
   var listView = Ti.UI.createListView({
   	templates : {
   		'template' : template
   	},
   	defaultItemTemplate : 'template',
   
   });
   
   function clickTitle() {
   	alert('You Click Title');
   }
   
   function clickSubTitle() {
   	alert('You Click SubTitle');
   }
   
   function clickMeta() {
   	alert('You Click Meta');
   }
   
   var listSection = Ti.UI.createListSection();
   
   var ListItem = [];
   
   for (var i = 0; i < 20; i++) {
   	ListItem.push({
   		title : {
   			text : 'Appcelerator'
   		},
   		subtitle : {
   			text : 'Mobile Software'
   		},
   		meta : {
   			text : '25077 followers'
   		},
   		properties : {
   			top : 5,
   			height : 70,
   			backgroundColor : "#EEE"
   		}
   	});
   };
   
   
   listSection.setItems(ListItem);
   sections.push(listSection);
   listView.setSections(sections);
   win.add(listView);
   win.open();

Thanks.

JSON Source