CODEWITHSUNDEEP
wpfxamlmvvmdatagrid
Alan
Alan

Reputation: 1637

Property names are not available for my datagrid column bindings

Just beginning to learn DataGrid in WPF XAML. This is the code:

Model

Public Class Idea
  Public Property IdeaID() As Integer
  Public Property Name() As String
End Class

ViewModel

Public Class IdeaViewModel
  Implements INotifyPropertyChanged

  Public Shared Property allIdeas() As New ObservableCollection(Of Idea)

  Public Sub New()
    For index = 1 To 10
      Dim anitem As New Idea
      anitem.Name = "Value " & index
      allIdeas.Add(anitem)
    Next
  End Sub

  Public ReadOnly Property AddAnItemToList() As ICommand
    Get
      Return New RelayCommand(AddressOf InsertAnItem)
    End Get
  End Property

  Public Sub InsertAnItem()
    Dim anItem As New Idea
    anItem.Name = "Item " & allIdeas.Count()
    allIdeas.Add(anItem)
  End Sub

  Public ReadOnly Property ClearTheList() As ICommand
    Get
      Return New RelayCommand(AddressOf ClearStoredList)
    End Get
  End Property

  Public Sub ClearStoredList()
    allIdeas.Clear()
  End Sub


  Public Event PropertyChanged As PropertyChangedEventHandler _
        Implements INotifyPropertyChanged.PropertyChanged
End Class

View (XAML only, no code behind)

<Window x:Class="IdeaView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"        
        xmlns:local="clr-namespace:MVVM7"
        Title="IdeaView" Height="500" Width="200" WindowStartupLocation="CenterScreen">
  <Window.DataContext>
    <local:IdeaViewModel/>
  </Window.DataContext>

    <StackPanel>
      <Button Margin="25" Height="50" Content="Insert an item"    Command="{Binding AddAnItemToList}"/>
      <Button Margin="25" Height="50" Content="Clear stored list" Command="{Binding ClearTheList}"/>

    <DataGrid Height="100"
              ItemsSource="{Binding allIdeas}"
              AutoGenerateColumns="True"
              >
    </DataGrid>

    <DataGrid Height="100"
              AutoGenerateColumns="False"
              >
      <DataGridTextColumn Binding="{Binding allIdeas}"/>
      <DataGridTextColumn Binding="{Binding allIdeas}"/>
    </DataGrid>

  </StackPanel>
</Window>

The first DataGrid comes up fine. The second DataGrid of course does not because you can't bind a column to the entire allIdeas object. I just left that code in to point out where I know I want something like "{Binding Name}", but the way I'm binding the DataGrid isn't correct & I haven't been able to locate a post that addresses this topic at such a basic level.

I'm trying to work my way up to 2-way binding in a DataGrid but I wanted to be sure I understand how the data is connecting first. That's why I'm trying to manually bind the properties of the ViewModel's ObservableCollection to the columns in a DataGrid.

Upvotes: 0

Views: 639

Answers (2)

15ee8f99-57ff-4f92-890c-b56153
15ee8f99-57ff-4f92-890c-b56153

Reputation: 37059

I'm modifying AQuirky's answer, but he seems to have wandered off at the moment. And his answer's got an error in it. 

<DataGrid Height="100"
          ItemsSource="{Binding allIdeas}"
          AutoGenerateColumns="False"
          >
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding IdeaID}"/>
        <DataGridTextColumn Binding="{Binding Name}"/>
    </DataGrid.Columns>
</DataGrid>

Upvotes: 1

AQuirky
AQuirky

Reputation: 5236

Try this...

<DataGrid Height="100"
          ItemsSource="{Binding allIdeas}"
          AutoGenerateColumns="False"
          >
  <DataGridTextColumn Binding="{Binding IdeaID}"/>
  <DataGridTextColumn Binding="{Binding Name}"/>
</DataGrid>

Upvotes: 1

Related Questions