Xamarin Forms SearchBar + ListView slow to update - forms

I would like some help into speeding up the process of filtering a long list of list items and viewing them on a ListView.
My app has a search bar, a ListView and a very long list of strings to choose from.
When the user enter a search term, the ListView is updated with every key stroke and filter out the irrelevant items.
Sorting itself takes a few milliseconds, but updating the ListView afterwards with the new filter-event takes a long time (20 seconds easy, if only a single character has been entered as search criteria)
I believe the time is spent on inflating a large number of ViewCells every time the filtered list updates.
Do any of you know how to speed up the process? I thought the way it could work was to have a very limited number of ViewCells (like 10 or 20) and then have them update and just show a selection of the filtered list. Scrolling would to be reusing the top/bottom one, update the content and put it back on the bottom/top - but I have not been able to wrap my head around how to do this.
Maybe it is the wrong approach and you know a better way?

I just had a similar problem that my list with just 20 elements would search extremely slow. Maybe your problem is similar. Sadly you didn't post any code. I had something like this:
List l = originalItems.Where((i) => i.Name.Contains(filterText));
listView.ItemsSource = l;
And I could not understand why this would be so slow. I found a different approach with more overhead that for some reason is faster and more responsive and overall feels better for the user. My ListView always has an ObservableCollection as ItemsSource. When I filter I calculate the difference to this ObservableCollection (the extra items and the removed items) and then remove or add accordingly. This avoids replacing the ItemsSource property which seems to be too harsh on the ListView.
//property of the class
ObservableCollection<FlightListItem> listViewItems;
// ....
//somewhere at initialization
listView.ItemsSoure = listViewItems;
// ....
//in the filter method:
List l = originalItems.Where((i) => i.Name.Contains(filterText));
IEnumerable itemsToAdd = l.Except(listViewItems).ToList();
IEnumerable itemsToRemove = listViewItems.Except(l).ToList();
listView.BeginRefresh();
foreach (FlightListItem item in removes)
listViewItems.Remove(item);
foreach (FlightListItem item in added)
listViewItems.Add(item);
listView.EndRefresh();
Notes:
removing the listView.BeginRefresh() and EndRefresh() did not seem to impact performance, but it seems the right thing to call them here.
We need to call ToList() on the itemsToAdd and itemsToRemove even though we only need IEnumerables! This is because Except is a lazy operation and will otherwise only be evaluated during the for loop. However during the for loop one of the parameters to Except changes which leads to an IllegalArgumentException due to modifying an IEnumerable while going over it.
If anyone knows a good filterable observable collection that would probably be a nicer solution.

Related

How to configure agGrid grouping so it works like an accordion

is it possible to configure agGrid grouping so that it behaves like an accordion i.e. only one group can be expanded and when opening new group previously opened is closed?
Not sure if this answers your question, but I am sure this might be the only direction you'll have.
There is a method provided on gridApi - onGroupExpandedOrCollapsed
So I think (again, need to check) that this function would be called as its name suggests, and you can collapse the other rows (whichever is opened) and achieve your functionality.
Be cautious while using this as there is comment given by ag-grid
we don't really want the user calling this if one one rowNode was
expanded, instead they should be calling rowNode.setExpanded(boolean)
- this way we do a 'keepRenderedRows=false' so that the whole grid gets refreshed again - otherwise the row with the rowNodes that were
changed won't get updated, and thus the expand icon in the group cell
won't get 'opened' or 'closed'.

Ionic infinite scroll with collection repeat - scrollbar jumping back to middle issue

Having a infinite scroll (with new items loaded by remote calls) together with collection repeat and items of different size, I have an issue that after new batch of item is renedered, the scrollbar "jumps" to the middle, or to explain it other way around, it is not on the bottom where it should be (on the button but moved a bit back to accomodate for the new items).
The most probable issue is that
this.$scope.$broadcast('scroll.infiniteScrollComplete');
is called BEFORE the items are added to the array / rendered.
One easy way to do this is if items are added as a result of a promise, but $broadcast is done before the promise is completed.
solved this by setting item-render-buffer property of collection-repeat
<div collection-repeat="business in businesses" item-height="120px" item-render-buffer="10"></div>

Unity/NGUI Updating List at runtime

I was wondering if someone could explain to me how I update a list at runtime in Unity?
For example I have a spell book, which has 3 spells in it, when I drag them to my action bar they get re-parented to it, what I'm trying to do is get a list of each child under the actionbar transform,
My problem is where to actually do something like this if I try something like below in the update, it adds whatever's there many times, which I can understand since update runs every frame..
list = actionbarui.GetComponent(UIGrid).GetChildList();
for(var i =0;i < list.size; i++)
{
buttonList.Add(list[i].gameObject);
}
If I add a callback to the buttons so that whenever they're drag and dropped it runs the above code and add thing's additively, as in, if you drag just one "spell" on it will loop through once, which is fine, but as soon as you add another it loops through three times, that is, it already has one it then adds the same one again PLUS the new button that's just been dragged on for a total of 3.
I've tried changing the code to
list = actionbarui.GetComponent(UIGrid).GetChildList();
for each(var child : Transform in list.GetEnumerator())
{
buttonList.Add(child.gameObject);
}
But this simple doesn't add anything, I am unsure how to go about keep the lists update as they are dragged off and on, could anyone please explain how this is achieved?
Please ignore the second "list" code, it's implementing "BetterLists" as apart of NGUI, so doesn't follow standard list methods.
Thank you for reading
If I add a callback to the buttons so that whenever they're drag and dropped it runs the above code and add thing's additively, as in, if you drag just one "spell" on it will loop through once, which is fine, but as soon as you add another it loops through three times, that is, it already has one it then adds the same one again PLUS the new button that's just been dragged on for a total of 3.
That is the expected result here. You are running through the list of children and adding them to your buttonlist, so first time there is only one item to add, then when you add another child there are two items to add, thus resulting in three items.
Either don't have a for loop and do:
buttonList.Add(the_GameObject_that_was_just_added_to_the_bar);
Or clear your buttonList before the for loop:
list = actionbarui.GetComponent(UIGrid).GetChildList();
buttonList.Clear();
for(var i =0;i < list.size; i++)
{
buttonList.Add(list[i].gameObject);
}
Alternatively to Dover8's response, you can first check if the buttonList already contains a reference to the child to be added. If it does, continue. Otherwise add the new child.
However, given the expense of doing the checks, and since you are already looping through the list already, I'd recommend that you follow his suggestion to clear the list before running the loop. It will probably give you the best performance out of these examples.
If there's a reason you can't or shouldn't clear the buttonList, and you still need to run through it, I'd recommend my suggestion. It really depends on which implementation works best for what you are trying to do. The point is that there are several ways to do this, and they have different performance profiles you need to consider.

GWT manipulating DOM elements caveats

Following this question I have recently asked : Understanding Document.createElement()
Here is the context :
There is a text-zone in my GWT GUI that holds a text
Users can select a word (or a sequence of words) in this text-zone and transform it / them into a highlighted text
highlighted texts need to be able to listen to users : click, right-click, dragging & dropping operations
A scenario with 1000 highlighted text in the text-zone is not impossible.
I was wondering :
Is it a bad approach to manipulate DOM elements directly in GWT ? (Without using Widgets)
Is it a bad approach to do things like that Add listener to SpanElement ? Can it cause memory leaks ?
What is the best approach to achieve such things ? I've done some tests with a simple custom widget that uses a span element, and adding 1000 widgets to the RootPanel takes approximatively 6 to 10 seconds in DevMode. When I use DOM elements direclty, this operation duration goes under 1 second (even less than 200ms with optimizations).
EDIT
Performance should not be a problem, according to some real tests I did after #Gilberto advices. http://jmichelgarciagwt.appspot.com/DOMTesting.html
Still, I would love to have feedbacks for questions 1) and 2)
Adding listeners/handlers to hundreds of span elements/widgets is definitely a bad approach.
If you stay with GWT, you can attach a single event handler to your "text zone" widget, and then find which element has been the source of the click:
http://comments.gmane.org/gmane.org.google.gwt/61911
If you go with DOM elements, you can attach a single event listener to your "text zone" element and find out the event source when it bubbles to it. For example:
http://icant.co.uk/sandbox/eventdelegation/

GWT 2.4 DataGrid automatic scrolling when selecting an item

I am using GWT 2.4's new DataGrid in a project. I configured the DataGrid with a pagesize of 50.
The available screen is not big enough to display all items and thus a vertical scrollbar is shown (this is actually the main purpose for using a DataGrid in the first place).
I attached a SingleSelectionModel to the DataGrid in order to be able to select items.
This works fine so far.
However I also have another widget with which the user can interact. Based on that user action a item from the DataGrid should be selected.
Sometimes the selected item is not in the visible screen region and the user has to scroll down in the DataGrid to see it.
Is there any way to automatically or manually scroll down, so that the selected item is visible?
I checked the JavaDocs of the DataGrid and found no appropriate method or function for doing that.
Don't know if this works, but you could try to get the row element for the selection and use the scrollIntoView Method.
Example Code:
dataGrid.getRowElement(INDEX_OF_SELECTED_ITEM).scrollIntoView();
The answer above works pretty well, though if the grid is wider than your window and has a horizontal scroll bar, it also scrolls all the way to the right which is pretty annoying. I was able to get it to scroll down and stay scrolled left by getting the first cell in the selected row and then having it scroll that into view.
dataGrid.getRowElement(dataGrid.getVisibleItems().indexOf(object)).getCells().getItem(0).scrollIntoView();
Don't have time to try it out, but DataGrid implements the interface HasRows, and HasRows has, among other things, a method called setVisibleRange. You just need to figure out the row number of the item that you want to focus on, and then set the visible range from that number n to n+50. That way the DataGrid will reset to put that item at the top (or near the top if it is in the last 50 elements of the list backing the DataGrid). Don't forget to redraw your DataGrid.
Have you already looked at this? If so, I'd be surprised that it didn't work.
Oh, and since this is one widget talking to another, you probably have some messaging set up and some message handlers so that when the user interacts with that second widget and "selects" the item, the message fires on the EventBus and a handler for that message fixes up the DataGrid along the lines I've described. I think you'll have to do this wiring yourself.
My solution, a little better:
dataGrid.getRow(model).scrollIntoView();
I got a Out of bounds exception doing the above.
I solved it getting the ScrollPanel in the DataGrid and used .scrollToTop() and so on on the ScrollPanel. However, to access the ScrollPanel in the DataGrid I had to use this comment:
http://code.google.com/p/google-web-toolkit/issues/detail?id=6865
As Kem pointed out, it's annoying the "scrollToRight" effect after the scrollIntoView. After me, Kem's solution gives a better behaviour than the base one as usually the first columns in a table are the more meaningful.
I improved a bit his approach, which scrolls horizontally to the first column of the row we want to be visible, by calculating the first visible column on the left before applying the scroll and then scrolling to it.
A final note: Columns absolute left is tested against "51". This is a value I found "experimentally" by looking the JS values in the browser's developer tool, I think it depends on the table's style, you may need to change/calculate it.
Below the code:
public void scrollIntoView(T next) {
int index = datagrid.getVisibleItems().indexOf(next);
NodeList<TableCellElement> cells = datagrid.getRowElement(index).getCells();
int firstVisibleIndex = -1;
for(int i=0; i<cells.getLength() && firstVisibleIndex<0;i++)
if(UIObject.isVisible(cells.getItem(i)) && (cells.getItem(i).getAbsoluteLeft() > 51) && (cells.getItem(i).getAbsoluteTop() > 0))
firstVisibleIndex = i;
cells.getItem(firstVisibleIndex>=0? firstVisibleIndex : 0).scrollIntoView();
}