I am trying to use the MaskedInput widget (https://github.com/bthurlow/nativescript-maskedinput) and I am having trouble getting the databinding to work. Here is my code:
<mi:MaskedInput mask="999 999 9999" placeholder="_" text="{{ customer.homephone }}" color="#a8b4b9" />
The above snippet does not display the phone number initially. I am positive the customer.homephone has value in it because
<TextField text="{{ customer.homephone, customer.homephone | phoneConverter() }}" class="value bold" />
displays it correctly. If I replace the text property of the MaskedInput with a hard-coded value, the value is displayed. It seems to me that there is something going on with the databinding. Am I missing something here?
Any ideas are highly appreciated.
Thank you.
You are doing things correctly, but from what I see from the code of that plugin it does not support data binding.
Related
All of a sudden, ListView.refresh() no longer updates the display of the items in the list. I have verified that it has stopped working on previous projects which have been tested and committed. This occurs on both Android and iOS, and on all devices and emulators.
I've done the usual - done an ns clean, rebooted the machine, stated with fresh emulators, and I cannot get any refresh() to work. I've stepped through the refresh() source code in the debugger, and no errors occur, but then this code hasn't changed either.
This is a NativeScript 8 JavaScript project. This problem appeared when using nativescript-ui-listview 10.0.2. The problem persists with version 10.2.8, which is the latest.
I'm at a loss for where to even start. It would appear to be related to my system since prior working code now fails (no error, the list display just remains unchanged). Since it occurs on Android, I presume it's not an Xcode issue.
I'm looking for a lifeline here. Any ideas on what might be going on?
Edit Sep 12, 2022:
I created a fresh Hello World javascript project and added a simple RadListView:
<lv:RadListView id="testview" items="{{ items }}" >
<lv:RadListView.itemTemplate>
<GridLayout columns="2*,*">
<Label col="0" class="mx-16-8 my-0-0" style="font-size: 16" text="{{ name }}" />
<Label col="1" class="mx-8-16 my-0-0" style="font-size: 16" text="{{ count }}" />
</GridLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
<Button text="Update" tap="onUpdateTap" />
With the associated code:
viewModel.items = [
{name: "David", count: 8},
{name: "Penny", count: 6},
{name: "Kumar", count: 3},
]
export function onUpdateTap(args) {
let button = args.object;
let page = button.page;
let viewModel = page.bindingContext;
let listview = page.getViewById("testview");
viewModel.items[1].count++;
listview.refresh();
}
This works correctly: the Update button increments the second count and the display is refreshed.
I then added this same code to my working project. It works on iOS devices and emulators but fails on Android devices and emulators. Again, no exceptions, errors, or messages, the display just fails to refresh. This is the only problem isolation I've been able to achieve so far.
I've spent about a day stepping through the ListView.refresh() code in a debugger, but that hasn't yet yielded any paths to pursue. I can see there are three events that are triggered:
dataPopulated
itemLoadingInternal
itemLoading
But, I can't see where those events are handled. Where it works (sample code on iOS), I can see that refresh() returns control before the display is updated. Where it doesn't work, control is returned but there's no update. Otherwise, I can't find any differences between the two flows.
I'm still looking for pointers and hope this additional info will help.
Edit Sep 13, 2022:
On the recommendation from the discord community, I'm looking at using an ObservableArray rather than a simple Array, as that seems better suited for RadListView. But, even this simple code fails to refresh on Android (it works on iOS):
<lv:RadListView items="{{ rlvItems }}" >
<lv:RadListView.itemTemplate>
<GridLayout columns="2*,*">
<Label col="0" class="mx-16-8 my-0-0" style="font-size: 16" text="{{ name }}" />
<Label col="1" class="mx-8-16 my-0-0" style="font-size: 16" text="{{ count }}" />
</GridLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
viewModel.rlvItems = new ObservableArray(
{name: "David", count: 8},
{name: "Penny", count: 6},
{name: "Kumar", count: 3}
);
let item = viewModel.rlvItems.getItem(1);
item.count++;
viewModel.rlvItems.setItem(1,item);
I'm concluding that something in my project must be interfering with the value changed notification process; I don't think there's anything wrong with this code or the underlying NativeScript/RadListView code.
I still welcome pointers on what to pursue here.
I was ultimately able to resolve this with an ObservableArray, but not with the code I had listed above. I found no documentation on using a ObservableArray of objects with RadListView and spent 2-3 days trying to get this to work:
let item = viewModel.rlvItems.getItem(1);
item.count++;
viewModel.rlvItems.setItem(1,item);
It turns out that the object is already changed, and thus setItem doesn't detect a change and update the display. I had to use the spread operator to create a new object, and that worked:
let item = viewModel.rlvItems.getItem(1);
item.count++;
viewModel.rlvItems.setItem(1,{...item});
This seems like a hack, and maybe it simply bypasses some other error, but it works for me. I never was able to determine why the original code began to fail.
I cannot make working binding with ListView and template.
<ListView #userListView [items]="usersViewList" (itemTap)="onItemTap($event)">
<template let-user="item" let-i="index">
<GridLayout columns="auto">
<Label [text]="user.name" col="0"></Label>
</GridLayout>
</template>
</ListView>
at cration time user.name is assigned properly, but later if I call.
user.name = "other name";
Nothing happens.
Binding context is set to item in usersViewList correctly. But no changes are propagated to individual list item ever.
Thank for advice!
You can't call user.name "later" (guessing in your code behind component file?).
If you need to access the tapped item you can use the index of the tapped item and then you can grab it from your items array like
usersViewList[index].name
You have also itemTap which provides you with arguments where you8 can directly access the tapped index like show here
The best practice, in this case, is to compare your code with a sample that demonstrates the exact same case. Here you can find one. And many other examples are posted in this section of the same application.
I am trying to create a dynamic query page. I am more than happy to learn ruby on rails which is what I am currently doing. However there is a time constraint for this and I have been searching high and low on how to hide a field on a form if a checkbox is checked. I have next to nothing ruby skills and I cant change to another language. Any assistance would be greatly GREATLY appreciated. Also if you know a good tutorial for doing query pages would help!!!
For a form like:
<form ...>
<input id="hide-box" type="checkbox" />
<input id="field-to-hide" />
</form>
You'll need to use something like JQuery to listen for checking and hide accordingly.
$('#hide-box').on('change', function() {
$('#field-to-hide').toggle($(this).prop('checked'));
});
Good day!
I have datasource, which is 100% pupulated. I'm sure in it because when AutoGenerateFields property is set to True all availble data is received and successfully displayed. But, what i really need to achieve is to display only fixed set of fields. If i set AutoGenerateFields to False i receive all record the same way, but NO columns at all.
Here is my XAML code:
<igDP:XamDataGrid.FieldLayouts>
<igDP:FieldLayout >
<igDP:FieldLayout.Settings>
<igDP:FieldLayoutSettings AutoArrangeCells="Never"/>
</igDP:FieldLayout.Settings>
<igDP:FieldLayout.Fields>
<igDP:Field Name="Article" Label="Article" Row="0" Width="Auto" IsScrollTipField="True" Column="0"/>
<igDP:Field Name="Condition" Label="Condition" Row="0" Width="Auto" Column="1"/>
<igDP:Field Name="Description" Label="Description" Row="0" Width="Auto" Column="2"/>
<igDP:Field Name="Standartprice" Label="St. price" Row="0" Width="Auto" IsScrollTipField="True" Column="3"/>
<igDP:Field Name="Listprice" Label="List price" Width="Auto" Row="0" Column="4" />
<igDP:UnboundField Name="RowDetails" Row="1" Column="0" ColumnSpan="4">
</igDP:FieldLayout.Fields>
</igDP:FieldLayout>
</igDP:XamDataGrid.FieldLayouts>
I can't understand where is the trouble in my XAML markup.
I will be grateful for any help.
You must make sure that the Name you give the field matches exactly to the bound datasource's properties. If one of them is wrong it will not display any, remember that it is also case sensitive.
Should Standartprice be StandardPrice?
DarkIce's comment is probably right. To help with locating the specific Field involved, you can also check the Output tab in Visual Studio, where incorrectly named bindings will be reported.
That said, that hasn't always solved the problem for me when the mysterious "blank grid" appears, but it's the first place I look.
I currently have a listBox in a WP7 application that uses databinding to populate it. The problem I'm having though is with this particular line:
<Hyperlink NavigateUri="{Binding LinkUrl}" TargetName="_blank">{Binding Name}</Hyperlink>
It seems that I can't bind things in this way (outside of an element's attributes). All this does is create a hyperlink with the literal text {Binding Name} linked to the url. Instead what I'm looking for is for it to use the actual Name variable in its place.
I've tried googling for an answer and looked into the Inlines attribute, but I keep coming up empty handed.
Any help would be appreciated
In WPF, the space between the tags is usually the 'content' (but not always) and bindable via the Content property. I'm unfamiliar with <Hyperlink> in Windows Phone, but a <HyperlinkButton> should work just as well.
<HyperlinkButton NavigateUri="{Binding LinkUrl}" TargetName="_blank" Content="{Binding Name}"/>
EDIT: For a <Hyperlink> in a <RichTextBox> try this:
<RichTextBox>
<Paragraph>
<Hyperlink>
<Hyperlink.Inlines>
<Run Text="{Binding Name}"/>
</Hyperlink.Inlines>
</Hyperlink>
</Paragraph>
</RichTextBox>