I thought this is easy, but unfortunately, I can not find out any answer.
I installed telerik-ui, and want to use RadListView. From the doc, I can see the demo page with perfect layout, to have mulitple items per row. In my case, I want to have two columns per row and then show the list view. Below is my xml code, but it is totally blank, I do not know why. Can you help?
This is the code in my XML:
<RadListView [items]="flattenDishes">
<ListViewLinearLayout scrollDirection="Vertical" itemHeight="500" spanCount="2"></ListViewLinearLayout>
<ng-template tkListItemTemplate let-flattenDish="item">
<GridLayout rows="auto" columns="auto, *">
<StackLayout orientation="vertical">
<Image [src]="serverUrl +'images/' + flattenDish.get('option_imageUrl') " stretch="aspectFill" width=200 height=200></Image>
<Label [text]="flattenDish.get('option_size')+':'+ flattenDish.getTrans('zh').get('title')"></Label>
<Label [text]="flattenDish.get('option_price')"></Label>
</StackLayout>
</GridLayout>
</ng-template>
</RadListView>
Can anyone help me to have a working template here?
Thanks
Try this, is not with RadListView but the important part is inside the item:
<ListView class="list-group" [items]="workOrders" (itemTap)="onItemTapSecondList($event)" separatorColor="gray">
<ng-template let-workOrder="item">
<StackLayout orientation="horizontal">
<StackLayout>
<Label text="Order ref:" class="order-id-label"></Label>
</StackLayout>
<StackLayout>
<Label text="Order date:" class="order-id-label"></Label>
</StackLayout>
</StackLAyout>
</ng-template>
</ListView>
Related
in my nativescript-angular project I have a component like this:
<StackLayout>
<Label *ngIf="ngContentIsEmpty"> ng-content is empty </Label>
<ng-content></ng-content>
</StackLayout>
Now, I would like to display some content if <ng-content> for this component is empty.Is there an easy way to do this?
I've tried this but not work in nativescript:
<StackLayout #wrapper>
<Label *ngIf="wrapper.childNodes.length == 0"> ng-content is empty </Label>
<ng-content></ng-content>
</StackLayout>
Try to this for check ng-content is empty.
Add In Html File:-
<StackLayout *ngIf="ngContentIsEmpty">Content</StackLayout>
<StackLayout #wrapper>
<ng-content></ng-content>
</StackLayout>
In TypeScript File:-
export class MyComponent implements OnInit, AfterContentInit {
#ContentChild('wrapper') wrapper:ElementRef;
public ngContentIsEmpty = false;
ngAfterContentInit() {
this.ngContentIsEmpty= this.wrapper.childNodes.length > 0;
}
}
I have an application written in NativeScript with Angular 2. In it I have a list view like this:
<ListView row="1" [items]="items" (itemTap)="onNavigationItemTap($event)" class="root-drawer-content">
<ng-template let-item="item">
<StackLayout class="root-item-stack-layout">
<Label [text]="item.title" textWrap="true" class="btn btn-primary" [class.btn-active]="item.enabled"></Label>
<StackLayout height="1" class="root-drawer-content"></StackLayout>
</StackLayout>
</ng-template>
</ListView>
How can I force specific item to be disabled? Both visually and in terms of behavior.
You are almost there. As you are using item.enabled property to choose the btn-active class, you can apply the same logic to for disabled(Your custom one e.g change the background color to gray to look disabled) to StackLayout.
<ng-template let-item="item">
<StackLayout class="root-item-stack-layout" [class.enabled]="item.enabled">
<Label [text]="item.title" textWrap="true" class="btn btn-primary" [class.btn-active]="item.enabled"></Label>
<StackLayout height="1" class="root-drawer-content"></StackLayout>
</StackLayout>
</ng-template>
And for the functionality, you can handle that in your .ts file where your manage the itemTap.
(itemTap)="onNavigationItemTap($event)"
public onNavigationItemTap(args) {
const currentItemView = args.view;
const item = currentItemView.bindingContext;
if(item.enabled){
// do your stuff
}
I want to add two buttons to a FeedListItem similar to the NotificationnListItem.
<List headerText="Feed Entries" items="{ path : '/userFeedBack', mode : 'OneWay' }">
<FeedListItem sender="#{UserScreenname} ({UserName})"
icon="{ProfileImgUrl}" senderPress=".navToUser"
iconPress=".navToUser"
iconDensityAware="false" info="{Type}"
timestamp="{ path : 'Time', formatter : '.notificationListItemFormatted' }"
text="{TweetText} ({Total} times)">
</FeedListItem>
</List>
It should look like this. How can I these buttons or is there any other list control which I can use here?
For buttons, you will have to use different type of List Items. The FeedListItem does not support any aggregation. I would suggest the following options:
sap.m.NotificationListItem
sap.m.CustomListItem: Here, you will need to create a layout, where the image will come, where the text and the buttons will render.
Create a custom control by Extending FeedListItem and add 'buttons' aggregation to it.
Let me know if you need more inputs.
XML Code :
<List id="notificationList" class="sapContrast sapContrastPlus">
<NotificationListItem
description="Information of List Item 1"
showCloseButton="false"
datetime="1 hour"
unread="true"
press="onListItemPress"
authorName="Jean Doe"
authorPicture="sap-icon://globe">
<buttons>
<Button text="Accept" type="Accept" ></Button>
<Button text="Reject" type="Reject" class="sapUiLargeMarginEnd" ></Button>
<Button icon="sap-icon://thumb-up" class="sapUiLargeMarginBegin" ></Button>
</buttons>
</NotificationListItem>
<NotificationListItem
description="Information of List Item 2"
showCloseButton="false"
datetime="1 hour"
unread="true"
priority="None"
authorName="Jean Doe"
authorPicture="sap-icon://world">
<buttons>
<Button text="Accept" type="Accept" ></Button>
<Button text="Reject" type="Reject" class="sapUiLargeMarginEnd" ></Button>
<Button icon="sap-icon://thumb-down" class="sapUiLargeMarginBegin" ></Button>
</buttons>
</NotificationListItem>
</List>
I am trying to get the value of a textbox on a zul page by using some kind of getValue method. I should handle this on the zul page, not on a controller. I need to assign a listbox cell (which is the first cell of the list box below) with a value coming from the textbox.
<listcell>
<label value="" />
</listcell>
<listcell>
<toolbarbutton visible="true"
image="/resources/images/icons/1616/page_text.gif" />
</listcell>
<listcell>
<label value="#{file.name}" />
</listcell>
<listcell>
<toolbarbutton forward="onClick=onRemoveMultipleFiles"
visible="true" id="newFileAndCommentRemove" image="/resources/images/icons/1616/delete.png" />
</listcell>
</listitem>
If what you want is that after the textbox is filled then the first cell will fill with its value you can do it like this:
put an id into the label in the cell
put an onChange operation in the textbox so when the textbox change you can put its value into the cell
like this:
<textbox id="textbox" onChange="label.setValue(self.getValue())"/>
<listbox id="newFileAndComment">
<listhead>
<listheader label="1" width="30px" />
</listhead>
<listitem self="#{each=file}">
<listcell>
<label id="label"/>
</listcell>
</listitem>
I am trying to create two grids which perform exactly the same function without having to duplicate the code of the code for the grid twice. So, I decided to use a macro component. But, I am not sure how to create the ids of the components in the macro component dynamically. The code does the following:
The first grid(west region) has two rows with two textboxes. If I add "hello" to the first textbox in this grid then the value of the second textbox is also set to "hello".
The second grid(center region) has two rows with two textboxes. If I add "world" to the first textbox in this grid then the value of the second textbox is also set to "world"
The values of both textboxes in the first grid are now same i.e. "hello"
The values of both textboxes in the second grid are now same i.e. "world"
I created a zul file in which I use a macro component like so:
<?component name="mygrid1" macro-uri="grid1.zul" inline="true"?>
<zk>
<vbox hflex="1">
<borderlayout height="500px" width="500px">
<west size="50%">
<mygrid1 id="grid1" index="1" />
</west>
<center>
<mygrid1 id="grid2" index="2" />
</center>
</borderlayout>
</vbox>
</zk>
<zscript>
fillInDuplicateBox(String value, Textbox duplicateBox) {
if (!"".contentEquals(duplicateBox.value))
return;
duplicateBox.value = value;
}
</zscript>
</window>
Macro component is shown below:
<zk>
<vbox hflex="1">
<grid width="300px">
<rows>
<row> Box 1: <textbox id="${concat("newBox", arg.index)}" onChange="fillInDuplicateBox(${concat("newBox, arg.index)}.value, ${concat("duplicateBox", arg.index)})" hflex="1" /></row>
<row> Box 2: <textbox id="${concat("duplicateBox", arg.index)}" hflex="1" /></row>
</rows>
</grid>
</vbox>
</zk>
I also tried the following code to create the macro component
<zk>
<vbox hflex="1">
<grid width="300px">
<rows>
<row> Box 1: <textbox id="newBox${arg.index}" onChange="fillInDuplicateBox(newBox${arg.index}.value, duplicateBox${arg.index})" hflex="1" /></row>
<row> Box 2: <textbox id="duplicateBox${arg.index}" hflex="1" /></row>
</rows>
</grid>
</vbox>
</zk>
None of this works. I am not sure how to dynamically create the ids of the components in the macro component. The textbox ids of the first grid must be "newBox1", "duplicateBox1" and the textbox ids of the second grid must be "newBox2", "duplicateBox2"
Please point out if there is a better way of achieving this task.
Thanks,
Sony
I am not sure if it is possible to dynamically create ids like that, but I am pretty certain it would be better to avoid it. There are better ways to do this by avoiding the id problem altogether and to use data binding or event handling instead. Your example indicates the main purpose for each grid is to copy the value of one Textbox to a different Textbox - I imagine there is something bigger you are trying to achieve so let us know if this answer leads you to what you need or not.
I have simplified and expanded your sample to give two examples, the first uses the onChanging to immediately copy as you type. The second pair of boxes uses databinding.
<?component name="mygrid1" macro-uri="/grid1.zul" ?>
<zk>
<window>
<vbox hflex="1">
<mygrid1 id="grid1" myGridTitle="First" />
<mygrid1 id="grid2" myGridTitle="Another" />
</vbox>
</window>
</zk>
Here is the macro component in grid1.zul:
<zk>
<zscript><![CDATA[
String myBoundString = "initial value";
]]></zscript>
<vbox hflex="1">
<grid>
<rows>
<row>
<hbox><label value="${arg.myGridTitle}" /> Source</hbox>
<textbox id="originalText" hflex="1" onChanging="duplicateText.value = event.value" />
</row>
<row>
<hbox><label value="${arg.myGridTitle}" /> Source copies here:</hbox>
<textbox id="duplicateText" hflex="1" />
</row>
<row>
Bound to myBoundString:
<textbox id="boundText1" value="#{myBoundString}" hflex="1" />
</row>
<row>
Bound to boundText1:
<textbox id="boundText2" value="#{boundText1.value, load-when=boundText1.onChange}" hflex="1" />
</row>
</rows>
</grid>
</vbox>
</zk>
In the databinding example, you have to change "intial value" and then tab away before the binder updates boundText2. Also notice that the TextBoxes do have ids (boundText1 and boundText2) but that has no impact on achieving the expected functionality in multiple instances of the macro component.