Listview of items from a object selected in another listview

Question

Ok the title maybe a little confusing. I have a database with the table Companies wich has one-to-many relotionship with another table Divisions ( so each company can have many divisions ) and division will have many employees.

I have a ListView of the companies. What I wan't is that when I choose a company from the ListView another ListView of divisions within that company appears below it. Then I pick a division and another listview of employees within that division appaers below that. You get the picture.

Is there anyway to do this mostly inside the XAML code declaritively (sp?). I'm using linq so the Company entity objects have a property named Division wich if I understand linq correctly should include Division objects of the divisions connected to the company. So after getting all the companies and putting them as a itemsource to CompanyListView this is where I currently am.

   <ListView x:Name="CompanyListView"
              DisplayMemberPath="CompanyName"
              Grid.Row="0" Grid.Column="0" />

    <ListView DataContext="{Binding ElementName=CompanyListView, Path=SelectedItem}"
              DisplayMemberPath="Division.DivisionName"
              Grid.Row="1" Grid.Column="0" />

I know I'm way off but I was hoping by putting something specific in the DataContext and DisplayMemberPath I could get this to work. If not then I have to capture the Id of the company I guess and capture a select event or something.

Another issue but related is the in the seconde column besides the lisview I wan't to have a details/edit view for the selected item. So when only a company is selected details about that will appear then when a division under the company is picked It will go there instead, any ideas?

Answer 1

You can use the MVVM pattern to bind your XAML to a class that contains information for your ListViews and reset the content for the Division collection based on the selected Comany item.

Here is a basic sample to get you started.

Here are two ListView controls in XAML:

<Window x:Class="MultiListView.Views.MainView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Main Window" Height="400" Width="800">
  <DockPanel>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <ListView Grid.Row="0" 
                  ItemsSource="{Binding Companies}"
                  SelectedItem="{Binding Company, Mode=TwoWay}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name"
                                    DisplayMemberBinding="{Binding CompanyName}" />
                    <GridViewColumn Header="Description"
                                    DisplayMemberBinding="{Binding Description}" />
                </GridView>
            </ListView.View>
        </ListView>
        <ListView Grid.Row="1" 
                  ItemsSource="{Binding Divisions}"
                  SelectedItem="{Binding Division, Mode=TwoWay}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name"
                                    DisplayMemberBinding="{Binding DivisionName}" />
                    <GridViewColumn Header="Description"
                                    DisplayMemberBinding="{Binding Description}" />
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
  </DockPanel>
</Window>

In the code-behind set the DataContext for the Window to a class the contains the binding references used in the XAML.

public partial class MainView : Window
{
   MainViewModel _mvm = new MainViewModel();

   public MainView()
   {
      InitializeComponent();
      DataContext = _mvm;
   }
}

The following class uses the MVVM pattern, which you can find lots of information on in StackOverFlow. This class contains the data that the XAML binds with. Here is where you can use LINQ to load/reload the collections.

using System.Collections.ObjectModel;
using MultiListView.Models;

namespace MultiListView.ViewModels
{
public class MainViewModel : ViewModelBase
{
  public MainViewModel()
  {
     _companies = new ObservableCollection<Company>();
     _companies.Add(new Company("Stackoverflow", "QA web site"));
     _companies.Add(new Company("Fog Creek", "Agile Bug Tracking"));
     _companies.Add(new Company("Second Beach", "Not sure yet"));

     _divisions = new ObservableCollection<Division>();
  }

  private ObservableCollection<Company> _companies;
  public ObservableCollection<Company> Companies
  {
     get { return _companies; }
     set
     {
        _companies = value;
        OnPropertyChanged("Companies");
     }
  }

  private Company _company;
  public Company Company
  {
     get { return _company; }
     set
     {
        _company = value;

        // load/reload divisions for the selected company here
        LoadDivisions();

        OnPropertyChanged("Company");
     }
  }

  // hack to keep the example simpe...
  private void LoadDivisions()
  {
     _divisions.Clear();

     // use db or linq here to filiter property
     if ( _company != null )
     {
        if ( _company.CompanyName.Equals("Stackoverflow") )
        {
           _divisions.Add( new Division("QA", "Test all day"));
           _divisions.Add( new Division("Write", "Doc all day"));
           _divisions.Add( new Division("Code", "Code all day"));
        }
        else if (_company.CompanyName.Equals("Fog Creek"))
        {
           _divisions.Add(new Division("Test", "Test all day"));
           _divisions.Add(new Division("Doc", "Doc all day"));
           _divisions.Add(new Division("Develop", "Code all day"));
        }
        else if (_company.CompanyName.Equals("Second Beach"))
        {
           _divisions.Add(new Division("Engineering", "Code all day"));
        }
     }
  }

  private ObservableCollection<Division> _divisions;
  public ObservableCollection<Division> Divisions
  {
     get { return _divisions; }
     set
     {
        _divisions = value;
        OnPropertyChanged("Divisions");
     }
  }

  private Division _division;
  public Division Division
  {
     get { return _division; }
     set
     {
        _division = value;
        OnPropertyChanged("Division");
     }
  }
}
}

OnPropertyChanged implements INotifyPropertyChanged.
When the properties of a ViewModel change, the Views bound to the ViewModel receive a notification when the ViewModel raises its PropertyChanged event.

You can find examples in most MVVM libraries, or look to MSDN for an example.

Answer 2

If Divisions is a property of Company, you could probably do something like this:

    <Window x:Class="MultiListView.Views.MainView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Main Window" Height="400" Width="800">
  <DockPanel>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <ListView Grid.Row="0" 
                  x:Name="lvCompanies"
                  ItemsSource="{Binding Companies}"
                  SelectedItem="{Binding Company, Mode=TwoWay}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name"
                                    DisplayMemberBinding="{Binding CompanyName}" />
                    <GridViewColumn Header="Description"
                                    DisplayMemberBinding="{Binding Description}" />
                </GridView>
            </ListView.View>
        </ListView>
        <ListView Grid.Row="1" 
                  ItemsSource="{Binding ElementName='lvCompanies', Path=SelectedItem.Divisions}"
                  SelectedItem="{Binding Division, Mode=TwoWay}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name"
                                    DisplayMemberBinding="{Binding DivisionName}" />
                    <GridViewColumn Header="Description"
                                    DisplayMemberBinding="{Binding Description}" />
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
  </DockPanel>
</Window>