Having issues with a GridViewComboBoxColumn

[Kevin]

Hello All,

    I am having troubles trying to get something displayed...  One would think that the issue I'm having should be pretty straight forward in implementation, but I can't seem to figure it out...  In my ViewModel, I have two observable collections: BadgeHistory collection and a CardStatus collection.  The BadgeHistory collection contains objects of an entity that has a property of a CardStatusID.  The CardStatus collection is a simple entity of an ID and Status string name.

Here is my ViewModel code:

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.CommandWpf;
using MeyerToolDAL;
using System;
using System.Collections.ObjectModel;
using System.Diagnostics.CodeAnalysis;

namespace NewHireApp.ViewModel
{
    /// <summary>
    /// This class contains properties that a View can data bind to.
    /// <para>
    /// See http://www.galasoft.ch/mvvm
    /// </para>
    /// </summary>
    public class EmployeeMaintenanceViewModel : TabViewModelBase
    {
        #region Fields
        private string _empID = string.Empty;

        private ObservableCollection<BadgeId> _badgeHistory;
        #endregion Fields

        #region Constructors
        /// <summary>
        /// Initializes a new instance of the EmployeeMaintenanceViewModel class.
        /// </summary>
        public EmployeeMaintenanceViewModel()
        {
            BadgeHistory = new ObservableCollection<BadgeId>();
            using (var dc = new MeyerToolDAL.MeyerToolDALEntities())
            {
                CardStatuses = new ObservableCollection<BadgeCardStatus>(dc.BadgeCardStatus);
            }
        }

        /// <summary>
        /// Initializes a new instance of the EmployeeMaintenanceViewModel class.
        /// </summary>
        public EmployeeMaintenanceViewModel(string header)
        {
            Header = header;
            BadgeHistory = new ObservableCollection<BadgeId>();
            using (var dc = new MeyerToolDAL.MeyerToolDALEntities())
            {
                CardStatuses = new ObservableCollection<BadgeCardStatus>(dc.BadgeCardStatus);
            }

        }
        #endregion Constructors

        #region Properties

        /// <summary>
        /// Gets or sets the EmpID property.
        /// </summary>
        /// <value>
        /// Changes to that property's value raise the PropertyChanged event.
        /// </value>
        public string EmpID
        {
            get
            {
                return _empID;
            }

            set
            {
                if (_empID == value)
                {
                    return;
                }

                _empID = value;
                RaisePropertyChanged(() => EmpID);
            }
        }

        /// <summary>
        /// Gets or sets the BadgeHistory property.
        /// </summary>
        /// <value>
        /// Changes to that property's value raise the PropertyChanged event.
        /// </value>
        public ObservableCollection<BadgeId> BadgeHistory
        {
            get
            {
                return _badgeHistory;
            }

            set
            {
                if (_badgeHistory == value)
                {
                    return;
                }

                _badgeHistory = value;
                RaisePropertyChanged(() => BadgeHistory);
            }
        }


        private ObservableCollection<BadgeCardStatus> _cardStatuses;

        /// <summary>
        /// Gets or sets the CardStatuses property.
        /// </summary>
        /// <value>
        /// Changes to that property's value raise the PropertyChanged event.
        /// </value>
        public  ObservableCollection<BadgeCardStatus> CardStatuses
        {
            get
            {
                return _cardStatuses;
            }

            set
            {
                if (_cardStatuses == value)
                {
                    return;
                }

                _cardStatuses = value;
                RaisePropertyChanged(() => CardStatuses);
            }
        }
        #endregion Properties

        #region Commands

        #region SearchCommand
        // move this up to the Fields region...
        private RelayCommand _searchCommand;

        /// <summary>
        /// Gets the SearchCommand.
        /// </summary>
        /// <value>
        /// The SearchCommand.
        /// </value>
        public RelayCommand SearchCommand
        {
            get
            {
                return _searchCommand ?? (_searchCommand = new RelayCommand(
                    SearchCommand_Execute,
                    SearchCommand_CanExecute));
            }
        }

        private void SearchCommand_Execute()
        {
            using (var dc = new MeyerToolDAL.MeyerToolDALEntities())
            {
                BadgeHistory = new ObservableCollection<BadgeId>(dc.BadgeIds.FindByEmployeeID(EmpID));
            }
        }

        private bool SearchCommand_CanExecute()
        {
            return true;
        }
        #endregion SearchCommand
        #endregion Commands

        #region Methods
        #endregion Methods

    }
}

 

Here's my View:

<UserControl
    x:Class="NewHireApp.Views.EmployeeMaintenanceView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:ignore="http://www.galasoft.ch/ignore"
    xmlns:local="clr-namespace:NewHireApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:vm="clr-namespace:NewHireApp.ViewModel"
    mc:Ignorable="d ignore">

    <Grid Width="750">

        <Grid.RowDefinitions>
            <RowDefinition Height="35" />
            <RowDefinition Height="35" />
            <RowDefinition Height="110" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel
            Grid.Row="0"
            HorizontalAlignment="Center"
            Orientation="Horizontal">
            <telerik:RadWatermarkTextBox
                x:Name="radWatermarkTextBox"
                Width="74"
                Height="22"
                Margin="5"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Text="{Binding EmpID}"
                TextWrapping="NoWrap"
                WatermarkContent="Emp. ID" />
            <Button
                x:Name="button"
                Width="65"
                Margin="5,6,5,0"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                Command="{Binding SearchCommand}"
                Content="Search" />
        </StackPanel>
        <StackPanel
            Grid.Row="2"
            HorizontalAlignment="Center"
            Orientation="Horizontal">
            <telerik:RadButton
                Margin="5"
                CornerRadius="15"
                ToolTip="Assign New Badge">
                <StackPanel Width="65">
                    <Image Height="95" Source="/Images/NewBadge.png" />
                </StackPanel>
            </telerik:RadButton>
        </StackPanel>
        <StackPanel Grid.Row="3">
            <telerik:RadGridView
                AutoGenerateColumns="False"
                ItemsSource="{Binding BadgeHistory}"
                ScrollViewer.CanContentScroll="True"
                ScrollViewer.VerticalScrollBarVisibility="Auto"
                ShowGroupPanel="False">
                <telerik:RadGridView.Columns>
                    <telerik:GridViewDataColumn
                        DataMemberBinding="{Binding BadgeNum}"
                        Header="Badge ID"
                        IsFilterable="False" />
                    <telerik:GridViewDataColumn
                        DataFormatString="{} {0:dd MMM yyyy}"
                        DataMemberBinding="{Binding DateAdded}"
                        Header="Added On"
                        IsFilterable="False" />
                    <telerik:GridViewComboBoxColumn
                        DataMemberBinding="{Binding CardStatusId}"
                        DisplayMemberPath="CardStatus"
                        Header="Card Status"
                        IsFilterable="False"
                        SelectedValueMemberPath="CardStatusID"
                        ItemsSource="{Binding CardStatuses}" />
                    <telerik:GridViewDataColumn
                        DataMemberBinding="{Binding IssuedBy}"
                        Header="Issued By"
                        IsFilterable="False" />
                    <telerik:GridViewDataColumn
                        Width="*"
                        DataMemberBinding="{Binding Notes}"
                        Header="Notes"
                        IsFilterable="False" />
                </telerik:RadGridView.Columns>
            </telerik:RadGridView>
        </StackPanel>
    </Grid>
</UserControl>

 

In my View I have a RadGridView with the columns specified.  I have set the ItemSource of the grid to the BadgeHistory collection and for one of the columns I specified as a GridViewComboBoxColumn.   For the life of me, I can't seem to get it to display the correct stuff...  Right now as it stands, the column displays empty, but IT is a combobox, so I can select it and see all of the defined cardstatuses.  However, the initial data in the BadgeHistory collection has various values in it's CardStatusID field, and NONE of those are displaying!!!  Also when I do select a value for a particular row, it shows up, but as soon as I try and edit a different row, the previous row's value disappears!!!

Any clue as to how do I get the rows to display the CardStatus string values from the second collection???  What am I doing wrong here???  I'm pretty sure this is something simple that I'm overlooking...

 

Thanks in advance,

 

Kevin Orcutt

 

[Dilyan Traykov]

Hello,

I'm attaching a sample project where I've set up the GridViewComboBox based on your requirements. An important thing to note, as suggested in the ComboBox Column article, is that the type of the properties configured as DataMemberBinding and SelectedValueMemberPath should be the same. 

Thus, the way you've set up the column right now, the CardStatusId property of your BadgeId class should be of the same class as the CardStatusID property of your BadgeCardStatus class. Additionally, you must make sure that you're correctly binding to the BadgeCardStatus' CardStatus string property in order for the items to be displayed.

I hope you find these suggestions helpful. If you're still unable to set up your GridViewComboBox, please share the structure of your BadgeCardStatus and BadgeId classes and I will gladly assist you further.

Regards,
Dilyan Traykov
Telerik by Progress

[Kevin]

Hey Dilyan,

    Thanks for the sample...  With what was in it, I was able to get my gridview columns displaying the correct stuff!  Consider this one answered/closed!

Thanks again!

Kevin Orcutt