Welcome to the Xceed Community | Help
Community Search  

A Master / Detail grid for beginners

Sort Posts: Previous Next
  •  07-08-2008, 4:37 PM Post no. 13465

    A Master / Detail grid for beginners

    After previewing the Master /  Detail example I decided Xceed has done a great job of it's continuing expansion but has failed to provide a good readable example for those trying to get their arms around a functioning grid. I put the example on the chopping block and took out all of the items not absolutely necessary to produce a functioning grid. I am posting as I am sure there are others who will benefit from a basic easy to read example. Don't forget to make a copy of your original so you can return to it again when you are ready to expand. Cool

     I have changed just two files.

    1. MainPage.xaml

    2. MainPage.xaml.cs
     

     Here is the xaml code for MainPage.xaml


    <Page x:Class="Xceed.Wpf.DataGrid.Samples.MasterDetail.MainPage"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
          xmlns:compModel="clr-namespace:System.ComponentModel;assembly=WindowsBase"
          xmlns:local="clr-namespace:Xceed.Wpf.DataGrid.Samples.MasterDetail">
        <Page.Resources>
            <!--Defined a resource for each converter we want to use in the cell content template-->
            <local:CurrencyConverter x:Key="currencyConverter"/>
            <local:IntegralConverter x:Key="integralConverter"/>
            <local:CustomerConverter x:Key="customerConverter"/>
            <xcdg:StatResultConverter x:Key="statResultConverter"/>
            <xcdg:ThicknessConverter x:Key="thicknessConverter"/>

            <!-- This is the Data Source used in the DataGridControl. It's based on the
               Employees table. -->
            <xcdg:DataGridCollectionViewSource x:Key="cvsEmployees"
                                             Source="{Binding Source={x:Static Application.Current},Path=Employees}"
                                             AutoFilterMode="And"
                                             DistinctValuesConstraint="Filtered">
                <xcdg:DataGridCollectionViewSource.ItemProperties>
                    <!--<xcdg:DataGridItemProperty Name="Photo" CalculateDistinctValues="False"/>-->
                    <xcdg:DataGridItemProperty Name="FirstName" Title="First Name"/>
                    <xcdg:DataGridItemProperty Name="LastName" Title="Last Name"/>
                    <xcdg:DataGridItemProperty Name="HireDate" Title="Hire Date"/>
                    <xcdg:DataGridItemProperty Name="BirthDate" Title="Birth Date"/>
                    <xcdg:DataGridItemProperty Name="Address" CalculateDistinctValues="False"/>
                    <xcdg:DataGridItemProperty Name="City"/>
                    <xcdg:DataGridItemProperty Name="Country"/>
                    <xcdg:DataGridItemProperty Name="Region"/>
                    <xcdg:DataGridItemProperty Name="PostalCode" Title="Postal Code"/>
                </xcdg:DataGridCollectionViewSource.ItemProperties>
                <!--DetailDescriptions provide the lookup link between people and orders -->
                <!-- You can comment the below section if desired. Not required for the grid function -->
                <xcdg:DataGridCollectionViewSource.DetailDescriptions>
                    <local:EmployeesDetailDescription AutoFilterMode="And"
                                                  DistinctValuesConstraint="Filtered">
                        <local:EmployeesDetailDescription.ItemProperties>
                            <xcdg:DataGridItemProperty Name="Photo" CalculateDistinctValues="False"/>
                            <xcdg:DataGridItemProperty Name="FirstName" Title="First Name"/>
                            <xcdg:DataGridItemProperty Name="LastName" Title="Last Name"/>
                        </local:EmployeesDetailDescription.ItemProperties>
                    </local:EmployeesDetailDescription>
                 <!--DetailDescriptions definitions of relationship and fields used in detail grid -->  
                    <xcdg:DataRelationDetailDescription RelationName="EmployeesOrders"
                                                    AutoFilterMode="And"
                                                    DistinctValuesConstraint="Filtered">
                        <xcdg:DataRelationDetailDescription.ItemProperties>
                            <xcdg:DataGridItemProperty Name="OrderID" CalculateDistinctValues="False"/>
                            <xcdg:DataGridItemProperty Name="ShipVia" Title="Ship via"/>
                            <xcdg:DataGridItemProperty Name="CustomerID" Title="Company"/>
                            <xcdg:DataGridItemProperty Name="Freight"/>
                            <xcdg:DataGridItemProperty Name="OrderDate" Title="Order Date"/>
                            <xcdg:DataGridItemProperty Name="RequiredDate" Title="Required Date"/>
                            <xcdg:DataGridItemProperty Name="ShipCountry" Title="Ship Country"/>
                        </xcdg:DataRelationDetailDescription.ItemProperties>
                       
                         </xcdg:DataRelationDetailDescription>                  
                        </xcdg:DataGridCollectionViewSource.DetailDescriptions>

                <!--End Detail Description -->
               
            </xcdg:DataGridCollectionViewSource>       
           
            <!--The orders detail configuration-->
            <xcdg:DetailConfiguration x:Key="ordersDetailConfiguration"
                                 RelationName="EmployeesOrders"
                                 Title="Orders"
                                 AllowDetailToggle="{Binding Source={x:Static local:MainPageParams.Singleton},Path=AllowDetailToggle}">
                <xcdg:DetailConfiguration.Columns>
                    <xcdg:Column FieldName="OrderID"
                             VisiblePosition="1"
                             Width="55"/>

                    <xcdg:Column FieldName="ShipVia" VisiblePosition="3"   />

                    <xcdg:Column FieldName="CustomerID"
                             VisiblePosition="2"                        
                            
                              /> 
                    <xcdg:Column FieldName="Freight"/>  

                </xcdg:DetailConfiguration.Columns>

                <xcdg:DetailConfiguration.DetailConfigurations>
                   
                    <!--The products detail configuration-->
                    <xcdg:DetailConfiguration RelationName="OrdersOrderDetails"
                                          Title="Products"
                                          AllowDetailToggle="{Binding Source={x:Static local:MainPageParams.Singleton},Path=AllowDetailToggle}">
                        <xcdg:DetailConfiguration.Columns>
                            <xcdg:Column FieldName="ProductID" VisiblePosition="2"/>
                            <xcdg:Column FieldName="UnitPrice"/>
                            <xcdg:Column FieldName="Quantity"
                                  
                                   />
                        </xcdg:DetailConfiguration.Columns>

                        <xcdg:DetailConfiguration.Headers>
                            <DataTemplate>
                                <xcdg:InsertionRow/>
                            </DataTemplate>
                        </xcdg:DetailConfiguration.Headers>
                    </xcdg:DetailConfiguration>
                </xcdg:DetailConfiguration.DetailConfigurations>
            </xcdg:DetailConfiguration>
        </Page.Resources>

        <DockPanel>
            <!-- This is the configuration Panel at the Top. -->
            <ContentControl x:Name="parametersHost"
                          DockPanel.Dock="Top"
                          Style="{StaticResource parametersHostStyle}">
                <StackPanel Orientation="Horizontal">
                    <GroupBox Header="Master/Detail Actions"
                          Margin="{StaticResource groupBoxMargin}"
                          Padding="{StaticResource groupBoxPadding}">
                        <StackPanel>
                            <CheckBox x:Name="allowDetailToggle"
                                Margin="{StaticResource configItemMargin}"
                                IsChecked="{Binding Source={x:Static local:MainPageParams.Singleton},Path=AllowDetailToggle}"
                                Content="Allow details to be expanded or collapsed"
                                ToolTip="Indicates if details can be expanded or collapsed by the end user."/>

                            <CheckBox x:Name="showOrdersDetail"
                                Margin="{StaticResource configItemMargin}"
                                IsChecked="True"
                                Checked="ShowOrdersDetailChecked"
                                Unchecked="ShowOrdersDetailChecked"
                                Content="Show order/details details"
                                ToolTip="Indicates if the order/details details are visible."/>


                        </StackPanel>
                    </GroupBox>
                </StackPanel>
            </ContentControl>

            <!-- The read-only main DataGridControl. -->
            <xcdg:DataGridControl x:Name="grid"
                                CellEditorDisplayConditions="None"
                                ItemsSource="{Binding Source={StaticResource cvsEmployees}}"
                                EditTriggers="BeginEditCommand,ActivationGesture,ClickOnCurrentCell"
                                ItemScrollingBehavior="Immediate"
                                AutoCreateDetailConfigurations="False"
                                AllowDetailToggle="{Binding Source={x:Static local:MainPageParams.Singleton},Path=AllowDetailToggle}">

                <xcdg:DataGridControl.View>
                    <!-- In this sample, you can define this resource to specify the default
                     theme this DataGridControl will be in. This is not mandatory, so we
                     use a DynamicResource to silently ignore its absence. -->
                    <xcdg:TableView Theme="{DynamicResource defaultTheme}" />
                    <!--UseDefaultHeadersFooters="True"-->
                </xcdg:DataGridControl.View>

                <xcdg:DataGridControl.Columns>
                    <xcdg:Column FieldName="Photo"
                             Width="45"/>
                    <!-- The other columns will be added after these ones and will have default
                     appearance and behavior when they are automatically added upon loading. -->
                </xcdg:DataGridControl.Columns>
            </xcdg:DataGridControl>
        </DockPanel>
    </Page>

     

    And here is the code behind - very easy to modify. Just look for the area where I commented the configuration section.


    using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using System.Windows;
    using System.Windows.Data;
    using System.Collections.Specialized;
    using System.Collections;
    using System.ComponentModel;
    using System.Collections.ObjectModel;
    using System.Windows.Controls;

    namespace Xceed.Wpf.DataGrid.Samples.MasterDetail
    {
      public partial class MainPage : System.Windows.Controls.Page
      {
        public MainPage()
        {
          InitializeComponent();
          this.SetDetailConfigurations();
        }

        private void ShowSubEmployeesDetailChecked( object sender, RoutedEventArgs e )
        {
          this.SetDetailConfigurations();
        }

        private void ShowSubEmployeesEmptyDetailChecked( object sender, RoutedEventArgs e )
        {
          this.SetDetailConfigurations();
        }

        private void ShowOrdersDetailChecked( object sender, RoutedEventArgs e )
        {
          this.SetDetailConfigurations();
        }

        private void SetDetailConfigurations()
        {
          if ( this.grid == null )
            return;

          this.grid.DetailConfigurations.Clear();

          //if ( this.showSubEmployeesDetail.IsChecked.Value )
          //{
          //  if ( this.showSubEmployeesEmptyDetail.IsChecked.Value )
          //  {
          //      // Configuration Removed for simplicity
          //    this.grid.DetailConfigurations.Add( ( DetailConfiguration )this.Resources[ "subEmployeesDetailConfigurationVisibleWhenEmpty" ] );
          //  }
          //  else
          //  {
          //    // Configuration Removed for simplicity
          //    this.grid.DetailConfigurations.Add( ( DetailConfiguration )this.Resources[ "subEmployeesDetailConfigurationNotVisibleWhenEmpty" ] );
          //  }
          //}

          if ( this.showOrdersDetail.IsChecked.Value )
            this.grid.DetailConfigurations.Add( ( DetailConfiguration )this.Resources[ "ordersDetailConfiguration" ] );

          // Collaps all detail and reexpand it.
          List<DataGridContext> dataGridContexts = new List<DataGridContext>( this.grid.GetChildContexts() );

          foreach ( DataGridContext dataGridContext in dataGridContexts )
          {
            dataGridContext.ParentDataGridContext.CollapseDetails( dataGridContext.ParentItem );
            dataGridContext.ParentDataGridContext.ExpandDetails( dataGridContext.ParentItem );
          }
        }
      }
    }
     

View as RSS news feed in XML
Contact | Site Map | Reviews | Legal Terms of Use | Trademarks | Privacy Statement Copyright 2008 Xceed Software Inc.