MapItemsControl does not reflect removing of corresponding ItemsSource - binding

Within a UWP-App (Windows 10) I've got a MapControl and I'm using MapItemsControl to deliver an overlay for that map. The ItemsSource of that MapItemsControl (which is an ObservableCollection) is bound via xaml, but is only working in one direction:
Adding items to that collection is working fine and those items are shown in that MapControl too.
Removing items to that collection is working too, but seemingly only within that collection - the visual representation on my MapControl does not react to removing elements. This can lead to infinite adding of items into that map, while no item gets ever removed.
The ObservableCollection gets updated quiet frequentely (via MapControl.ZoomLevelChanged-Event) and gets cleared & repopulated in that process - might that be a problem?
Binding via xaml looks like this:
<maps:MapControl
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
[...]>
<maps:MapItemsControl ItemsSource="{x:Bind Path=MapDirectionOverlay, Mode=OneWay}"/>
</maps:MapControl>
Any suggestions?

Removing items to that collection is working too, but seemingly only within that collection- the visual representation on my MapControl does not react to removing elements.
ObservableCollection represents a dynamic data collection that provides notifications when items get added, removed, or when the whole list is refreshed. So if you add or remove items, the collection and ItemsSouce of binding should be reflect updated.
Since I don't know how you removing the item, by using remove methods of ObeservableCollection such as Remove,RemoveAt and RemoveItem, they should work well with removing items as well as removing correspondent item in the map.
But if you just set the ObeservableCollection to null will take no effect on the ItemsSouce.In this scenario you need to set the ItemsSouce of MapItemsControl to null manually but which is not recommend.

Since using Clear-Method did not do the trick, I tried using other remove-methods of the ObservableCollection and eventually that worked.
So in the end, this is the workaround I'm using:
private new void Clear()
{
for (int i = this.Count - 1; i >= 0; i--)
{
this.RemoveAt(i);
}
}
After all I still don't get, why a simple Clear would not work, since it still should raise a NotifyCollectionChangedAction. (Correct me if I'm wrong)

Related

rerendering Template Tags in Dart

I have been all over their github, their website, as well as other sites.
The closest answer I can see is related entirely within PolymerJs, which was in another stack overflow thread.
var template = document.querySelector('template'); // Use specific selector here
template.iterator_.updateIteratedValue(); // Force Polymer to refresh template
but when I looked up the TemplateElement class, i did not see any sort of redraw methods, or signuatures which jumped out at me.
Ideally i have something like this:
<template is="dom-repeat" items="{{days}}">
<div>{{item.name}}</div?
</template>
but when I change days, maybe adding another element to it, or deleting from it, it doesnt rerender the template. What i was doing was as simple as:
List newArray = [];
set("days", newArray);
or something like:
set("days", days.map((Map m){ m['times'] = sampleTest.split(''); return m;}).toList());
For adding a new element to the list that will trigger refresh on dom-repeat, use
add("days", day);
where day is the new element to be added onto the list.
For removing an element from the list that will trigger refresh on dom-repeat, use
removeAt("days", i);
where i is the index of the item on the list.
Alternatively, call removeAt() in a loop to remove everything and then call set("days", list), where list MUST be a new instance of List.

paper-menu with multiple selections, howto deselect all

I use paper-menu with multiple selections (multi). Everything works fine so fare, but with a deselect all method things seems more complicated.
With html
<paper-menu multi selected-values="{{selectedValues}}">...
Dart
#property
List<String> selectedValues = [];...
Things got binded, and every iron-select/iron-deselect event results in a correct update of the selectedValues list in dart.
With clear('selectedValues') the list empties and the logic behaves like no selection is done, but in Dartium the items that previous was
selected remains marked as selected.
I have also tried with the selectedItems List or with the foreach deselect with the select method to PaperMenu, but still not successful update
in Dartium.
Anyone with ideas how to implement this?
Found a workaround for the issue with the select method. The menu with selected values can be replaced with a new similar element created with the Dom api. One drawback is the bindings can't be set up, so these needs to be hacked with get and set methods at the element. Otherwise this seems to work ok. The calls to the Dom api are shown below.
ParticipantMenu oldPm = $$('#id_filterselection') as ParticipantMenu;
ParticipantMenu newPm = document.createElement('participant-menu');
Polymer.dom(parentNode).insertBefore(newPm, oldPm);
Polymer.dom(parentNode).removeChild(oldPm);
PolymerDom.flush();

JavaFX Bindings.BindContentbidirectional removes all observableList Contents?

i have a problem in JavaFX Binding, I have two observable Lists one of them is static, so when i bind them using (Bindings.bindcontentbidirectional), the two lists get empty and i checked by printing their size and the console shows before binding "List 1 = 3" "List 2 = 0" and after the Bind command the two lists size is ZERO!,so what is the problem??, another question, does it matter in a bidirectional bind who comes in the first parameter???
Yes, the order of the parameters does matter. When creating the Binding, the first list will be cleared and filled with the content of the second list. After this point, they will be synchronized bidirectionally as long as the Binding exists.
Assuming you did something like Bindings.bindContentBidirectional(list1, list2), your first list has been cleared upon creating the Binding because list2 was empty at that point. So everything went as to be expected.

Sort TListBox Items Alphabetically in Delphi 7

I am attempting to trigger a sort on the items within a TListBox control after adding/editing entries.
I see that there is a Sorted property which I've set to true, however, this doesn't dynamically sort the ListBox every time I make a change to the contents. There doesn't seem to be any Sort procedure or function available and calling Update or Refresh does not have the desired effect.
I've reached the stage where I'm considering pulling the contents of the ListBox into a TStringList object, sorting that and then putting everything back into the ListBox again. This seems a bit insane though, surely I am overlooking some better method.
Here's an example of changing an existing item:
myListBox.Items[myIndex] := newString; // Update Text
myListBox.Items.Objects[myIndex] := TObject(my_object); // Update associated object
I would expect the control to update to keep things sorted alphabetically but it doesn't.
The sorted property of a list box is actually backed by the Win32 list box style LBS_SORT. That will sort the list box when a new item is added. But it will not do so when an existing item is modified.
So the easy way to work around this is to set Sorted to True, then, instead of modifying existing values, remove the old value and add the new one. So your code would become:
myListBox.Items.Delete(myIndex);
myListBox.Items.AddObject(newString, TObject(my_object));
And if you think about it, your code would have been doomed to failure if the list box behaved the way you expected it to. Because after you modified the text of the item, if the list was re-sorted then myIndex would no longer refer to the same item.

Dynamically Loading LI's in JQueryMobile 1.0

I've just updated my project from jquerymobile 1.0a1 to version 1.0.
I've encountered a problem with dynamic content. Based on an ajax search I populate an unordered list with list items. Previous the following code refreshed the list so that all the styling appeared correctly:
$('#myContent').find("ul").listview();
$('#myContent').find("ul").listview('refresh');
However as of 1.0 this no longer seems to work.
The list appears but the styling is all wrong and the data-theme on all the elements gets ignored.
Has anyone come across a similar issue with updating and come across the solution.
Updating lists If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create
any nested lists that are added. For example:
$('#mylist').listview('refresh');
Note that the refresh() method only affects new nodes appended to a
list. This is done for performance reasons. Any list items already
enhanced will be ignored by the refresh process. This means that if
you change the contents or attributes on an already enhanced list
item, these won't be reflected. If you want a list item to be updated,
replace it with fresh markup before calling refresh.
http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html
if #myContent is the listview you can do this:
$('#myContent').listview('refresh');
if #myContent is the page you can do something like this:
$('#myContent').trigger('create');
Create vs. refresh: An important distinction Note that there is an important difference between the create event and refresh method
that some widgets have. The create event is suited for enhancing raw
markup that contains one or more widgets. The refresh method should be
used on existing (already enhanced) widgets that have been manipulated
programmatically and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added, calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
What you want can be achieved by replacing your 2 lines of code with the following:
$('#myContent ul').listview('create');
Hope this helps...
I've had this issue. The reason you are getting things all messed up is you are initalizing and refreshing the element multiple times. I noticed I had 2 different functions running that would call .listview('refresh') on the same element. After I took one out the themes and data went back to looking normal. Also are you getting any JS errors?
EDIT:
To be more specific you are calling .listview() somewhere in your code 2 times which is initializing it twice. I would wait to before you page is loaded to run the refresh so you only call it once.
Another thing you could do is check if the element is initialized already or not so you don't do it twice. Just check the element or in some cases the parent to see if the class ui-listview is present.
var element = $('#myContent').find('ul');
if ($(element).hasClass('ui-listview')) {
//Element is already initialized
$(element).listview('refresh');
} else {
//Element has not been initiliazed
$(element).listview().listview('refresh');
}
Just an FYI you can chain those events to look like $('#myContent').find('ul').listview().listview('refresh');
It cand be achived through.
$('#myContent').listview('refresh');
The below snippet shows you to load data from xml and dynamically create a list view.
function loadData()
{
$.ajax({
url:"BirthdayInvitations.xml",
dataType: "xml",
success: function(xml)
{
$(xml).find("event").each(function()
{
$("#mymenu").append('<li>' + this.textContent + ' </li>');
});
$("#mymenu").listview('refresh');
}
});
}
See if this is related to ur question http://www.amitpatil.me/demos/jquery-mobile-twitter-app/ and this one also http://www.amitpatil.me/demos/ipad-online-dictionary-app/
In first example i am using listview('refresh'); method and in second example i am using
$(document).page("destroy").page();

Resources