Appcelerator Alloy TableView click event is not firing up on parent tableview - titanium

Im building a app that i have a tableview inside a tableview row.
i have a click event in the main tableview, that i wish to keep.
<Alloy>
<Collection src="orders" />
<Window onAndroidback="closeWindow" id="activeorderswindow" class="maincontainer_noactionbar">
<View class="topcontainer">
<ImageView class="topbackbutton" onClick="closeWindow"></ImageView>
<Label class="topheadinglabel">Aktive ordre</Label>
<ImageView class="topmenubutton" onClick="closeWindow"></ImageView>
</View>
<View class="maindatacontainer">
<TableView class="orderstable" id="activeorderstable" dataTransform="transformFunction" dataCollection="orders" dataFunction="updateUI" onDragEnd="refreshTable" >
<!-- Also can use Require -->
<TableViewRow class="activeordersrow" oid="{oid}" touchEnabled="true" >
<Label class="rowOid" text="{oid}"/>
<Label class="rowCust" text="{cust}"/>
<Label class="rowScode" text="{scode}"/>
<Label class="rowVehicle" text="{vehicle}"/>
<Label class="rowOrdertime" text="{ordertime}"/>
<ImageView class="imgOrdertime" image='/images/clock_green.png'/>
<ImageView class="imgDeadline" image='/images/clock_red.png'/>
<Label class="rowDeadline" text="{deadline}"/>
<View class="addresstablewrapper" backgroundColor="#000"/>
<TableView touchEnabled="false" scrollType="vertical" class="activeorders_addresses" data="{orders_addresses}" backgroundColor="yellow" />
</TableViewRow>
</TableView>
</View>
</Window>
The problem is that because i have another within the table with its own rows (without a click event) it seems like the click on the main does not fire.
Help appreciated :)
Thanks
Tom

Maybe the nested TableView should have touchEnabled="true" so the click bubbles up to the parent (tableviewrow).

Related

Nativescript Vue: List data getting jumbled on top of each other

I have a list of data and when it renders, it's rendering on top of each other. The data is a fairly long list of objects and I am using multiple fields. I made a playground example by reducing the data list size and only using field (display_name) and it's still happening.
It seems to happen in random spots of the list but I am unsure as to how to resolve or more importantly, why it's happening. I thought it may have had to do with my key not being unique but I made sure it was and it's still happening. I included a playground and added screenshots. Any ideas?
Playground
Screenshots
EDIT: (Adding Template)
<RadListView
for="(movie,index) in this.movies"
ref="listView"
#loaded="onListLoaded($event)"
#itemTap="onItemTap($event)"
itemHeight="50"
:key="index"
gridSpanCount=1
>
<v-template>
<FlexboxLayout class="item-row" :key='`flex` + index' flexDirection="row" width="100%" height="100%" justifyContent="space-between">
<Stacklayout orientation="horizontal">
<Image :key='`img-flag` + index' marginTop="-22" class="flag-image" marginBottom="-22" :src="movie.image" height="100%" />
<Label :key='`display-name` + index' :text="movie.display_name" />
</Stacklayout>
<Image :key='`heart-1` + index' #tap="handleToggleFavorite(movie)" width="20" :src="movie.favorite ? heartFilled : heartUnfilled" />
</FlexboxLayout>
</v-template>
</RadListView>
Looking at your mockup, I think you can achieve it with a simple GridLayout.
<v-template>
<GridLayout columns="auto,*,auto" class="list-group-item">
<Image col="0" :src="movie.image"
class="m-5 thumb img-circle">
</Image>
<Label col="1" :text="movie.display_name"></Label>
<Image col="2" src="path_to_icon" class="thumb">
</Image>
</GridLayout>
</v-template>

Titanium Layout not working while set touchEnabled=false inside Listview

When I set touchEnabled="false" for a view which was inside my List view template all my list view layout was broken. when i remove the touch enabled property it working fine. Anyone please help me to solve this issue.
Titanium SDK : 3.4.0 ,
OS : IOS and android,
Here is my sample code.
<Alloy>
<Window backgroundColor="#fff">
<ListView id="LstView" top="50" defaultItemTemplate="template1">
<Templates >
<ItemTemplate id="mytemplate" name="template1">
<View layout="horizontal" width="Ti.UI.FILL" touchEnabled="false">
<View width="Ti.UI.SIZE" height="Ti.UI.SIZE" left="5">
<Label bindId="Lbl1" Id="Lbl1" color="black"></Label>
</View>
<View width="Ti.UI.SIZE" height="Ti.UI.SIZE" left="10" >
<Label bindId="Lbl2" Id="Lbl2" color="black"></Label>
</View>
<View width="Ti.UI.SIZE" height="Ti.UI.SIZE" left="10">
<Label bindId="Lbl3" Id="Lbl3" color="black" ></Label>
</View>
</View>
</ItemTemplate>
</Templates>
<ListSection>
<ListItem Lbl1:text="hello" Lbl2:text="how are you?" Lbl3:text="I am fine" height='70'/>
</ListSection>
</ListView>
</Window>
</Alloy>
According to this article touchEnabled = false will forward the touch event to it's peers. Can you show your whole xml file? I can't clarify anything yet..
it seems a titanium bug.. open a ticket in JIRA.. Jira Bug Report

Add view under the tabgroup

<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
<Tab id="byFav" title="fav" icon="KS_nav_views.png">
<Window title='fav'>
<TableView id="tableByFav" />
</Window>
</Tab>
<Tab id="byLatest" title="latest" icon="KS_nav_views.png">
<Window title='latest'>
<TableView id="tableByLatest" />
</Window>
</Tab>
</TabGroup>
</Alloy>
Currently I have tabgroup which has two tab.
I am planning to add view at the bottom of the screen height=50 width=100%.
This view must be still however tab changes.
I have tried this
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
.
.
.
</TabGroup>
<view>
</view>
</Alloy>
or this.
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
.
.
.
</TabGroup>
<window>
</window>
</Alloy>
But it shows the message like this
invalid method (createwindow) passed to UIModule
I might not understand the basic thought of alloy.
Is it possible to add the view under the tablegroup?
If not, I would like to add the fixed view in each tab.
Does anyone give me the first hint?
I am suffering from the shortage of alloy documents.
you can't do such thing, because TabGroup uses windows and a "Window" in Alloy means the entire screen. I suggest making another view/controller (yourView) for your bottom view and then require it in all your tabs.
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
<Tab id="byFav" title="fav" icon="KS_nav_views.png">
<Window title='fav'>
<TableView id="tableByFav" />
<Require type="view" src="yourView"/>
</Window>
</Tab>
<Tab id="byLatest" title="latest" icon="KS_nav_views.png">
<Window title='latest'>
<TableView id="tableByLatest" />
<Require type="view" src="yourView"/>
</Window>
</Tab>
</TabGroup>

Titanium display image on xml from local

I was storing the full path of an image & retrieved it below, I want to know why does this image file path,doesn't display in imageview on xml?
file://localhost/Users/rhez/Library/Application%20Support/iPhone%20Simulator/6.1/Applications/76BDE731-037A-43F8-997B-DAFCA6E0D509/Documents/1372402304473-ea.jpg
<TableView dataCollection="photos">
<TableViewRow id="row" dataId="" model="{id}">
<View id="holderview">
<ImageView id="imageview" url="{path}"></ImageView>
</View>
</TableViewRow>
</TableView>
However as I view in the finder where the application project documents is located the image is stored in there.Is there something wrong on displaying/retrieving on my xml? Thanks for all your courage in helping.
Try setting the image property, not url, url is deprecated.
<TableView dataCollection="photos">
<TableViewRow id="row" dataId="" model="{id}">
<View id="holderview">
<ImageView id="imageview" image="{path}"></ImageView>
</View>
</TableViewRow>
</TableView>

dynamic data for each TableViewRow

I'm using alloy (markup and models) to construct a tableview, Everything works perfect
<Collection src="spot" />
<Window>
<TableView id="spotTableView" dataCollection="spot">
<TableViewRow title="{name}">
<View class="header-view">
<Label class="title-header" text="{name}"/>
<Label class="desc-header" text="{desc}"/>
</View>
<View class="fixed-view">
<ImageView class="image" image="{logo}"/>
<View class="info-view">
<Label class="green-label" text="{cost}"/>
<Label text="{minimum}"/>
</View>
</View>
</TableViewRow>
</TableView>
</Window>
But I have a question: How I can modify dynamic data form for each tableviewrow? I need to change the colors of the labels depending on the data that brings each model in the collection. For example, if the cost is 0 that the label "cost" is green, but if the cost is 100 then the color of the label is red.
I guess this must realizarce on the controller, but I would not like create the tableviewrow out of view, because they do not want to miss the advantages of data bindings
Add a field containing the color to the model, and bind the label's color to it.