Using a View as a Data Template

Question

Hi,

I am using the MVVM structure for our application. I have added the view as a data template to a grid (Developer Express DXGrid).

<DataTemplate x:Key="cardTemplate">
     <ui:MediaEnquiryParticipantView x:Name="mediaEnquiryParticipantView"/>
</DataTemplate>

Now, my problem is that i want that View(MediaEnquiryParticipantView) to represent 1 row of a table.

How do i approach my problem?

---

<dxg:GridControl Name="grdParticipants"
                     Grid.Row="0"
                     Height="Auto" Width="Auto"
                     MaxHeight="5000"
                     VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                     AutoPopulateColumns="True"
                     DataSource="{Binding Path=MediaEnquiryParticipantList,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                     MouseDoubleClick="grdParticipants_MouseDoubleClick">
            <dxg:GridControl.Resources>
                <DataTemplate x:Key="headerTemplateFullName">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Path=Data.caUser.UserName}" />
                    </StackPanel>
                </DataTemplate>
                <DataTemplate x:Key="cardTemplate">
                    <ui:MediaEnquiryParticipantView x:Name="mediaEnquiryParticipantView" MediaEnquiryID="{Binding Path=Data.MediaEnquiryID}"/>
                </DataTemplate>
            </dxg:GridControl.Resources>
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="UserName" Width="150" AllowColumnFiltering="False"/>
                <dxg:GridColumn FieldName="CanResolve" Width="150" AllowColumnFiltering="False"/>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:CardView x:Name="cardView"                                  
                              CardHeaderTemplate="{DynamicResource headerTemplateFullName}"
                              CardTemplate="{DynamicResource cardTemplate}">
                    <dxg:CardView.RowCellMenuCustomizations>
                        <dxb:BarButtonItemLink BarItemName="btnDelete" />
                    </dxg:CardView.RowCellMenuCustomizations>
                </dxg:CardView>
            </dxg:GridControl.View>
        </dxg:GridControl>

---

The grid above is displaying "MediaEnquiryParticipantView" in a cardview form. The grid in part of "MediaEnquiryParticipantsView" I have separate view models for each.

My code for MediaEnquiryParticipantViewModel:

public class MediaEnquiryParticipantViewModel : ViewModelBase
{
    #region Fields

    private IQueryable<caUser> userList;

    #endregion Fields

    #region Constructors

    public MediaEnquiryParticipantViewModel(SessionContext sessionContext, NavigationItem navigationItem, MediaEnquiryViewModel mediaEnquiryViewModel, Mediator mediator)
        : base(mediator)
    {
        SessionContext = sessionContext;
        NavigationItem = navigationItem;
    }

    #endregion Constructors

    #region Properties

    public IQueryable<caUser> UserList
    {
        get
        {
            if (userList == null)
            {
                userList = GetUserList();
            }
            return userList;
        }
        set
        {
            userList = value;
            OnPropertyChanged("UserList");
        }
    }

    #endregion Properties

    #region Methods

    private IQueryable<caUser> GetUserList()
    {
        IQueryable<caUser> list = (from u in ((Chase_Media_Pro_Entity_Model)this.NavigationItem.ObjectContext).caUser
                                   select u);

        return list;
    }

    #endregion Methods
}

---

The userList is for the combo box in MediaEnquiryParticipantView.

Answer 1

hi, if you specify the DataType for the row it should work.

<DataTemplate DataType="{x:Type YourRowObjectTypeGoesHere}">
    <ui:MediaEnquiryParticipantView />
</DataTemplate>

with that DataTemplate all row objects will displayed as a MediaEnquiryParticipantView.

edit:

<ListBox ItemSource={Binding YourViewModelListTable}>

</ListBox>

if your YourViewModelListTable just contains your templated rows. they will be shown in the listbox as ui:MediaEnquiryParticipantView for each row.