XAML ListView/GridView to select multiple Items based on Search Criteria

This tutorial describes about how to select multiple items in a ListView/GridView with search criteria in Silverlight/WPF using MVVM design pattern.

When your ListView/GridView has large amount of data, it is bit difficult to find out and select the required items. In this case you can select the items by using the filter criteria.
Note: When you select the items in ListView by using filter criteria, selection state of the items has to be retained even when you clear the filter.

1) Create a new WPF/Silverlight Project and add the TextBox and ListView Controls to .XAML file as below.

<TextBox Text="{Binding SearchText,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Width="100" Margin="5"></TextBox>
<ListView SelectionMode="Multiple" ItemsSource="{Binding EmployeeCollection}">
<ListView.View>
<GridView >
<GridViewColumn DisplayMemberBinding="{Binding EmployeeId}" Header="Employee ID"></GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding FirstName}" Header="First Name"></GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding LastName}" Header="Last Name"></GridViewColumn>
</GridView>
</ListView.View>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="IsSelected" Value="{Binding IsSelected}"></Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>

2) In above, added the Binding Properties (Properties from ViewModel class) for TextBox and ListView/GridView controls and specified the SelectionMode =”Multiple” for ListView and added the ItemContainerStyle for ListView which will be used to set/get the select/unselect Items

3) Create a ViewModel class with required properties which will be used as Binding properties in XAML file.

private ObservableCollection<Employee> employeeCollection = new ObservableCollection<Employee>();

private ObservableCollection<Employee> totalEmployeeCollection = new ObservableCollection<Employee>();

private ObservableCollection<Employee> selectedEmployeesCollection = new ObservableCollection<Employee>();

private string searchText;

public EmployeeViewModel()
{
this.LoadData();
}

public ObservableCollection<Employee> EmployeeCollection
{
get
{
return this.employeeCollection;
}
set
{
this.employeeCollection = value;
this.RaisePropertyChanged("EmployeeCollection");
}
}

public string SearchText
{
get { return this.searchText; }
set
{
this.searchText = value;
this.RaisePropertyChanged("SearchText");

this.SearchEmployees(value);
}
}

4) Add the ViewModel class as DataContext for the XAML file.

<Window.DataContext>
<viewModel:EmployeeViewModel></viewModel:EmployeeViewModel>
</Window.DataContext>

5) Now get the data from Model and add to the Collection “EmployeeCollection” which is an ItemsSource for ListView.

private void LoadData()
{
EmployeesModel model=new EmployeesModel();
this.totalEmployeeCollection = model.GetEmployees();

foreach (var item in this.totalEmployeeCollection)
{
this.EmployeeCollection.Add(this.Clone(item));
}
}
6) Enter the key in Search TextBox, then that value will be passed to below method to filter the ListViewItems on KeyPress.

private void SearchEmployees(string value)
{
var selectedItems = this.EmployeeCollection.Where(faq => faq.IsSelected);

var unSelectedItems = this.EmployeeCollection.Where(faq => faq.IsSelected == false);

foreach (var item in selectedItems)
{
if (!this.selectedEmployeesCollection.ToList().Exists(faq => faq.EmployeeId == item.EmployeeId))
{
this.selectedEmployeesCollection.Add(item);
}
}

foreach (var item in unSelectedItems)
{
if (this.selectedEmployeesCollection.ToList().Exists(faq => faq.EmployeeId == item.EmployeeId))
{
this.selectedEmployeesCollection.RemoveAt(this.selectedEmployeesCollection.ToList().FindIndex(faq => faq.EmployeeId == item.EmployeeId));
}
}

var employees = this.totalEmployeeCollection.Where(faq => faq.FirstName.ToLower().Contains(value.ToLower()) || faq.LastName.ToLower().Contains(value.ToLower()));

this.EmployeeCollection.Clear();

foreach (var employee in employees)
{
if (this.selectedEmployeesCollection.ToList().Exists(faq => faq.EmployeeId == employee.EmployeeId))
{
employee.IsSelected = true;
}
else
{
employee.IsSelected = false;
}

this.EmployeeCollection.Add(this.Clone(employee));
}
}

7) From above method,
a) First keeping the SelectedItems, UnSelectedItems from ListViewCollection “EmployeeCollection” before filtering.
b) And filtering the items based on First Name and Last Name
c) And then add the result to the ListViewCollection “EmployeeCollection” and set the IsSelected =true if there is any already selected item in the filtered result.

Download the sample from below location.
Download Source Code

By Siva Jagan Dhulipalla   Popularity  (4878 Views)