Abstract
This article is the part 3 of the data display Performance Optimization series. In the part 1, we have addressed displaying a
large list of data using the combination of Virtual List technique in UI and paging technique in the backend data store access layer. In the part 2, we talks
about how to remove/add items from the virtual list and how to select/deselect all items in the list without performance penalty.
In part 3, we will talk about how to perform multiple search against the virtual list, and move the selected items to to selected list multiple times with fast speed.
The code example are written in WPF and C#, and Model View ViewModel (MVVM) pattern are used.
Keywords
Virtual List, Selectable Virtual List, Search, Available List, Selected List
Content
As mentioned in the previous article, the example application has two lists, one is
available list. another is selected list. User can check the checkbox
beside the employee and then click on the arrow button to move employee from
available list to selected list.
In the article, we refers the Available List to the listview in the left part of window which displays the list of
employees which are still available to be
select/deselect. we refers the Selected List to the listview in the right part of window which display the list of employee which have been selected and removed from Available List.
In article 1, we talk about how to display a large list of items in the
available list by using the combination of Virtual List technique in UI and
paged data technique in the data store. In article 2, we talk about how to make item
selectable, and how to select and remove/add it from available list, and
we also talk about how to select/deselect all item in Virtual List without having performance problem.
In this article, we are going to talk about how to perform multiple searches in the virtual list, and move the selected items to selected list. E.g. we can
search the list with keyword as '10', and then move all the matche items to the Selected List, and then we can perform another search with Keyword as '5', and
then move the matched items to the Selected List, etc.
Picture 1: Search Selectable Virtual List
The challenge is that the number of items get changed after we performance another search with different search criteria. With the different number of
items, we can not determine the selected items's index in the available list and then remove it from
available list.
For example, we have moved item 200 to the Selected List, and we know it is in the 200th position in the available list if no filter is performed. Now we
performance another search by keyword '2', and we expect that the item 200 should be removed from the available list. However, we can not do it since we
can not load the VirtualList to to remove 200 because we don't know in which page item 200 is.
The solution is not to remove the items from the available list, instead we will disable the removed items from the available list, and mark it as Removed so
user can not selected it anymore. Once user performance a different search, the the displayed items in the available virtual list will be checked to see if they
are in the removed list, if so, then it will be disabled. however, the no-displayed items (the items which has not be loaded in the virtual list) will
not be checked. If user scrolled down the list, then the new loaded display items will be checked against the removed list, if they are in the removed list,
then they will be disabled. and so on.
In UI, we binding the HasRemoved to CheckBox in the available list. If item has been marked as Removed, then the checkbox for that item will be disable.
<CheckBox Tag="{Binding}"
IsChecked="{Binding IsSelected}"
IsEnabled="{Binding HasRemoved, Mode=TwoWay, Converter={StaticResource itemRemovedConverter}}"
/>
In the ViewModel, when user click on Arrow button to move the selected items from available list
to selected list, the Add() method will be invoked, and it get the selected items from virtual list and add them to
SelectedEmployeeCollection. Those
selected items then be marked as HasRemoved.
public void Add()
{
IList<Employee> employees = AvailableEmployeeCollection.SelectedList;
foreach (var employee in employees)
{
if (!SelectedEmployeeCollection.Contains(employee)) {
SelectedEmployeeCollection.Add(employee);
employee.IsSelected = false;
employee.HasRemoved = true;
}
}
}
Once user click on 'Go' to performance a search, the Search method in the ViewModel then be invoked. It create a new
available
virtual list with the new search text. Then assign the SelectedList to the available virtual list as
RemovedItemList. In the end, it loop through the
available virtual list, and check if item has been loaded and cached, if it has been loaded and cached and if the item also exists in the
SelectedList, then the
item will be marked as 'Removed' so UI can disable the checkbox for this item. However, if the item has
not been loaded yet, this method will do nothing to it.
so the search speed is pretty fast, and it should be under 1 second.
public void Search()
{
AvailableEmployeeCollection = new SearchableSelectableVirtualList<Employee>(new EmployeeObjectGenerator(_searchText));
AvailableEmployeeCollection.RemovedItemList = new List<employee>(SelectedEmployeeCollection);
for (int index = 0; index < AvailableEmployeeCollection.Count; index++)
if (AvailableEmployeeCollection.IsItemCached(index) && IsRemoved(AvailableEmployeeCollection[index]))
AvailableEmployeeCollection[index].HasRemoved = true;
}
If user scroll down the available virtual list, and the application is going to fetch the items which are going to display. the application will then compare
the items with the RemovedItemList. if they are in the RemovedItemList, then the items will be marked as Removed so UI will disable the checkbox for those items.
protected override T Get(int index)
{
var item = base.Get(index);
if (RemovedItemList.Contains(item))
item.HasRemoved = true;
return item;
}
Conclusion
Voila, that is it. now you can search the available virtual list with large set of data items with pretty fast speed. you can also move the selected items
to the selected list, and those selected Items will be disabled from available list.
You can performance search multiple times and move the items multiple times
to the selected list too. This conclude the last article of the data display performance optimize series. Hope you enjoy it.
Appendix
