I have a Vanilla Nativescript app that I am testing a RadListView on; populating the items from JS.
As soon as I SET the value of the ObservableArray the app just crashes. I have tried to set the value onload as well as on tap. In this example tab on the BOTTOM LABEL; at the moment a label at the top will display the set value so I know that the object does exist; but when trying to bind the data to the list view things go awry.
Below is the base code to replicate this issue; if you uncomment the line:
pageData.set("items", items);
Any direction would be much appreciated.
HOME-PAGE.XML
<Page class="page"
navigatingTo="onNavigatingTo"
loaded="pageLoaded"
xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:lv="nativescript-ui-listview"
>
<ActionBar class="action-bar">
<Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<StackLayout>
<!-- Add your page content here -->
<Label text="{{ toptext }}" textAlignment="center" color="#88f" fontSize="15" fontWeight="bold"/>
<lv:RadListView height="350" items="{{ items }}" >
<lv:RadListView.itemTemplate>
<StackLayout orientation="vertical">
<Label fontSize="20" text="{{ itemName }}"/>
<Label fontSize="14" text="{{ itemDescription }}"/>
</StackLayout>
</lv:RadListView.itemTemplate>
</lv:RadListView>
<Label text="BOTTOM LABEL" textAlignment="center" color="#f88" fontSize="33" fontWeight="bold" onTap="fillListview"/>
</StackLayout>
</Page>
HOME-PAGE.JS
const HomeViewModel = require("./home-view-model");
var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array").ObservableArray;
var items = new ObservableArray();
var pageData = new Observable();
function onNavigatingTo(args) {
const page = args.object;
page.bindingContext = new HomeViewModel();
}
exports.onNavigatingTo = onNavigatingTo;
exports.pageLoaded = function(args) {
page = args.object;
page.bindingContext = pageData;
items.push(
{
itemName: "$USD / ZAR",
itemDescription: "13.50",
itemDate: "3 Jul 2019",
itemImage: "~/images/arcade-fire.png"
},
{
itemName: "$USD / ZAR",
itemDescription: "18.00",
itemDate: "17 Aug 2019",
itemImage: "~/images/bon-iver.png"
}
)
};
exports.fillListview = function(args) {
pageData.set("toptext", items);
// pageData.set("items", items);
}
i tried to reproduce your problem in a playground project but all works fine, do you recive some error in console about your problem ??
Here is the project where i was trying your code
Related
I have a weird behavior of FormGroup.
What I am doing exactly is that I am generating FormControls into the desired form group, according to number of key properties of an array.
Lets say I have the following array:
arrayData = [
{_id: 123, _name: 'XYZ', gender: 'Male'},
{_id: 124, _name: 'XYW', gender: 'Female'}
];
The extracted arra properties are as the following:
this.odkDataIndexes = ['_id', 'name', 'gender'];
Now, for each index, I need to generate a form control into the indexesForm form group:
async createIndexesForm(extractedIndexesArray) {
const controls = extractedIndexesArray.reduce((g, k) => {
g[k] = '';
return g;
}, {});
this.indexesForm = this.fb.group({controls});
console.log(this.indexesForm);
}
This function will be fired, once the user click on a button having a click event: (click)=generateMappingFields():
async generateMappingFields() {
this.showFields = false;
this.removeUnnecessaryFieldsMsg = '';
if (this.odkDataIndexes.length > 0) {
await this.createIndexesForm(this.odkDataIndexes).then(() => {
this.showFields = true;
this.tabIndex = 1;
});
}
}
For the console.log(this.indexesForm); output, the for appears to be created:
And it contains the following controls:
Which are exactly the same indexes, that I've extracted from my data.
Now I need to display these controls as following:
<div class="flexColEven">
<mat-spinner *ngIf="!indexesForm" value="50" class="setSpinnerOnTop" diameter="75" [color]="medair-color">
</mat-spinner>
<div *ngIf="showFields && indexesForm">
<div [formGroup]="indexesForm" *ngIf="indexesForm" class="flexRow">
<!-- {{indexesForm.valid | json}} -->
<div *ngFor="let controlName of odkDataIndexes">
<span></span>
<div>
<h3>ONA field: {{controlName}}</h3>
</div>
<mat-form-field class="formFieldWidth" color="warn" appearance="fill">
<mat-label>{{controlName}}</mat-label>
<mat-select [formControlName]="controlName">
<mat-option *ngFor="let de of dataElementsDetails; let i = index;"
[value]="de.id">
{{de.displayName}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</div>
When indexesForm is created, I will show the div having a drop down list for each controller, which is showing properly, but showing at the same time an error, for each controller saying:
core.js:6185 ERROR Error: Cannot find control with name: '_id'
core.js:6185 ERROR Error: Cannot find control with name: '_tag'
...
But the fields are shown properly as this stackblitz shows you.
And when I need to get the value of each drop down list:
mapping() {
this.odkDataIndexes.forEach((arrayIndexControl) => {
console.log(arrayIndexControl);
console.log(this.indexesForm.get(arrayIndexControl));
});
}
I can clearly see the arrayIndexControl which is the name of the form control of the indexesForm group, but the second console is displaying the following response:
null
And if I consoled (this.indexesForm.get(arrayIndexControl).value);, it will return an error of undefined.
Here is a stackblitz having an example of data I have.
On this line this.indexesForm = this.fb.group({controls}); you are creating a form group with a single form control in it called controls. Replace with this: this.indexesForm = this.fb.group(controls);
In general, doing const obj = {controls}; is the same as const obj = { controls: controls };
The codes below returns Uncaught TypeError: Cannot set property 'checked' of null.
what is the correct way to programmatic set checkbox as checked?
array.forEach(this._getAllCheckBoxIDs(), function(item){
dom.byId(item).checked = true;
}, this);
The following example shows a programmatic example on how to set property checked for a widget checkbox.
The script gets references of your checkboxes using dijit/registry opposite to querying the DOM.
Instead of setting a property directly for your widget like this:
dom.byId(item).checked = true;
I would suggest using a setter like:
widgetReference.set('checked', true);
This will allow the widget life-cycle to work properly.
Live example here:
https://jsfiddle.net/femtf4uh/
require(["dijit/form/CheckBox", "dijit/registry", "dijit/form/Button", "dojo/domReady!"], function(CheckBox, registry, Button) {
new CheckBox({
id: "checkBox0",
name: "checkBox0",
value: "option0",
checked: false,
onChange: function(event) {
}
}, "checkBox0").startup();
new CheckBox({
id: "checkBox1",
name: "checkBox1",
value: "option1",
checked: false,
onChange: function(event) {
}
}, "checkBox1").startup();
var markCheckAll = function() {
registry.toArray().forEach(function(widget) {
if (widget.type === 'checkbox'){
widget.set('checked', true);
}
});
};
markCheckAll();
});
<input id="checkBox0" />
<label for="checkBox">Option 0</label>
<br>
<input id="checkBox1" />
<label for="checkBox">Option 1</label>
<br>
Well, If you you have the collections of dojo checkboxes then I would suggest you to use registry.byId instead of dojo.byId because you need checkbox dojo widget along with it's domNode to update its attribute.
dojo class name:-
dijit/registry
Ex:-
// require registry class first
array.forEach(this._getAllCheckBoxIDs(), function(item){
registry.byId(item).set("checked", true);
}, this);
for more details please click here...
Hoping this will help you :)
I am developing window phone 7 application in C#. I am new to the window phone 7 application. I am also new to the silverlight. I want to generate the bold text of Texblock dynamically. I want to generate the bold text only for some part of the text. I am using the following code
IncometextBlock.Text = "Income entries on " + selectedDate.ToShortDateString() + " Page - "+SelectedButtonName+"";
I want the output as
"Income entries on 21/01/2011 Page - A"
I want the above output. How to make the bold text for above requirement ? Can you please provide me any code or link through which I can resolve the above issue. If I am doing anything wrong then please guide me.
I'd do it like this.
IncometextBlock.Inlines.Clear();
IncometextBlock.Inlines.Add(new Run() {Text = "Income entries", FontWeight = FontWeights.Bold});
IncometextBlock.Inlines.Add(new Run() {Text = " on " });
IncometextBlock.Inlines.Add(new Run() {Text = selectedDate.ToShortDateString(), FontWeight = FontWeights.Bold});
IncometextBlock.Inlines.Add(new Run() {Text = " Page - "});
IncometextBlock.Inlines.Add(new Run() {Text = SelectedButtonName, FontWeight = FontWeights.Bold});
If you use the WrapPanel (from the Toolkit) you can do this:
<Grid>
<toolkit:WrapPanel>
<TextBlock Text="Income entries" FontWeight="Bold"/>
<TextBlock Text=" on "/>
<TextBlock Text="21/01/2011" FontWeight="Bold"/>
<TextBlock Text=" Page - "/>
<TextBlock Text="A" FontWeight="Bold"/>
</toolkit:WrapPanel>
</Grid>
(The above is only in a grid to enable code highlighting here in SO and does not need to be for the effect to work.)
I'm using the WPF ribbon control with some success; I'm trying now to use the Ribbon Gallery, making use of the Categories in a data-bound scenario. Here's some example data: -
var data = new[]
{
new { Category = "Sport", Hobby = "Football" },
new { Category = "Sport", Hobby = "Table Tennis" },
new { Category = "Music", Hobby = "Guitar" },
new { Category = "Music", Hobby = "Piano" },
new { Category = "PC", Hobby = "StarCraft 2" },
};
I'm grouping up the data and want to display the items in a gallery, grouped by Category: -
IEnumerable CategorisedHobbies;
CategorisedHobbies = data.GroupBy(d => d.Category).ToArray();
All fairly standard. My XAML looks as follows: -
<ribbon:RibbonGallery ItemsSource="{Binding CategorisedHobbies}">
<ribbon:RibbonGallery.ItemTemplate>
<DataTemplate>
<ribbon:RibbonGalleryCategory Header="{Binding Key}" ItemsSource="{Binding}" MaxColumnCount="1">
<ribbon:RibbonGalleryCategory.ItemTemplate>
<DataTemplate>
<ribbon:RibbonGalleryItem Content="{Binding Hobby}"/>
</DataTemplate>
</ribbon:RibbonGalleryCategory.ItemTemplate>
</ribbon:RibbonGalleryCategory>
</DataTemplate>
</ribbon:RibbonGallery.ItemTemplate>
</ribbon:RibbonGallery>
However, when the app runs, whilst I correctly get the categories showing in the ribbon gallery, each item is just a blank square. I know that the collections are getting bound because I can see that the category size is bigger for e.g. Sport than PC.
If I hard-code the XAML as follows it of course all works: -
Any ideas what I'm doing wrong here? Thanks!
OK, I have gotten this working now "properly". What I had to do was rather than set the DataTemplate was to apply a style for the ItemsContainerStyle on the RibbonGallery.
This style simply needs to be of type RibbonGalleryCategory, and to have a property setter for the ItemsSource. In my case, it was simply {Binding}, plus I had to set the DisplayMemberPath.
I still don't have a full understanding of the hierarchy of the RibbonGallery in terms of how it styles things - but at least this approach works.
UPDATE:
Here's the appropriate XAML for the code example I originally supplied:
<r:RibbonWindow.Resources>
<Style TargetType="r:RibbonGalleryCategory" x:Key="HobbyCategoryStyle">
<Setter Property="Header" Value="{Binding Key}"/>
<Setter Property="ItemsSource" Value="{Binding}"/>
<Setter Property="DisplayMemberPath" Value="Hobby"/>
</Style>
</r:RibbonWindow.Resources>
<r:RibbonMenuButton Label="Example menu button">
<r:RibbonGallery ItemsSource="{Binding CategorisedHobbies}" ItemContainerStyle="{StaticResource ResourceKey=HobbyCategoryStyle}"/>
</r:RibbonMenuButton>
Not sure why but if you assign an ItemsPanel to RibbonGalleryCategory, it works:
<ribbon:RibbonGalleryCategory.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ribbon:RibbonGalleryCategory.ItemsPanel>
I'm new to Silverlight and I am trying to display the contents of a Dictionary in a Graph:
In codebehind:
ChartData = new Dictionary<DateTime, double> {{DateTime.Now, 10},
{DateTime.Now, 20}, {DateTime.Now, 15}};
And in the silverlight XAML:
<toolkit:Chart HorizontalAlignment="Left" Margin="113,168,0,0" Name="chart1"
Title="Chart Title" VerticalAlignment="Top">
<toolkit:LineSeries ItemsSource="{Binding Path=ChartData}"
DependentValuePath="Key" IndependentValuePath="Value">
</toolkit:LineSeries>
</toolkit:Chart>
But this gives "No suitable axis is availible for plotting the dependent value". Suggestions?
Try this data set:-
ChartData = new Dictionary<DateTime, double>() {
{ DateTime.Now.AddDays(-1), 10 },
{ DateTime.Now, 20 },
{ DateTime.Now.AddDays(1), 15 }
};
(I'm surprise your line of code even worked, since it would attempt to add multiple keys with the same value into the dictionary).
Then change your Xaml:-
<toolkit:LineSeries ItemsSource="{Binding Path=ChartData}"
DependentValuePath="Value" IndependentValuePath="Key">
Its would be highly unusual to use a date as a DependentValue, in fact I can't think of a scenario where a DependentValue would anything other than numeric.