How to display textbox data in wpf datagrid using MVVM model?

Question

Hi everyone my question is that i am working on wpf c# application which is based on MVVM pattern.The problem where i stuck is that i want my textboxes data to display in my datagrid by clicking a button but i am unable to did that and finally asking for some good suggestions and solutions.

My code in XAML:

<Grid>

    <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="150"/>
      <ColumnDefinition Width="150"/>
      <ColumnDefinition Width="Auto"/>  
    </Grid.ColumnDefinitions>

    <Label 
        Grid.Row="0" 
        Grid.Column="0"
        VerticalAlignment="Center"
        Content="VLAN NAME"
        Foreground="Black"
        Opacity="0.8"
      />

    <TextBox 
        Grid.Row="0"
        Grid.Column="1"
        Margin="0,5,0,0"
        Height="25"
        Foreground="Black"
        Opacity="0.8"
        Width="Auto"
        Text="{Binding VlanName, UpdateSourceTrigger=PropertyChanged}"  
        />
    <Label 
        Grid.Row="1" 
        Grid.Column="0"
        VerticalAlignment="Center"
        Content="VLAN ID"
        Foreground="Black"
        Opacity="0.8"
        />
    <TextBox 
        Grid.Row="1"
        Grid.Column="1"
        Margin="0,5,0,0"
        Height="25"
        Foreground="Black"
        Opacity="0.8"
        Width="70"
        HorizontalAlignment="Left"
        Text="{Binding VlanID, UpdateSourceTrigger=PropertyChanged}"   
        />

    <Label 
        Grid.Row="2" 
        Grid.Column="0"
        VerticalAlignment="Center"
        Content="IP FOR VLAN"
        Foreground="Black"
        Opacity="0.8"
      />

    <Grid 
      Grid.Column="1"
      Grid.Row="2">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="40"/>
        <ColumnDefinition Width="40"/>
        <ColumnDefinition Width="40"/>
        <ColumnDefinition Width="40"/>

      </Grid.ColumnDefinitions>
    <TextBox  
       Grid.Row="2"
       Grid.Column="0"
        Margin="5"  
        VerticalAlignment="Center"
        MaxLength="3" 
        Width="30" 
        Foreground="Black"
        Opacity="0.8"
        Text="{Binding VlanIP1, UpdateSourceTrigger=PropertyChanged}"       
        />
      <TextBox  
       Grid.Row="2"
       Grid.Column="1"
        Margin="5"  
        VerticalAlignment="Center"
        MaxLength="3" 
        Width="30" 
        Foreground="Black"
        Opacity="0.8"
        Text="{Binding VlanIP2, UpdateSourceTrigger=PropertyChanged}"

        />
      <TextBox  
       Grid.Row="2"
       Grid.Column="2"
        Margin="5"  
        VerticalAlignment="Center"
        MaxLength="3" 
        Width="30" 
        Foreground="Black"
        Opacity="0.8"
        Text="{Binding VlanIP3, UpdateSourceTrigger=PropertyChanged}"

        />
      <TextBox  
       Grid.Row="2"
       Grid.Column="3"
        Margin="5"  
        VerticalAlignment="Center"
        MaxLength="3" 
        Width="30" 
        Foreground="Black"
        Opacity="0.8"
        Text="{Binding VlanIP4, UpdateSourceTrigger=PropertyChanged}"

        />
    </Grid>
    <Label 
        Grid.Row="3" 
        Grid.Column="0"
        VerticalAlignment="Center"
        Content="VLAN PORT"
        Foreground="Black"
        Opacity="0.8"
      />
    <ComboBox
            Grid.Row="3"
            Grid.Column="1"
            ItemsSource="{Binding AvailableVlanPorts}"
            SelectedItem="{Binding SelectedVlanPort}"
            >

    </ComboBox>

    <Button Grid.Column="3"
            Grid.Row="1"
            Content="Add VLAN"
            Margin="10,5,0,0"
            Style="{StaticResource AppButtons}"
            Command="{Binding AddVlan}" 
            Click="Add_Vlan"
            />      

    <Button Grid.Column="3" 
            Grid.Row="2"
            Content="Remove VLAN"
            Margin="10,5,0,0"
            Style="{StaticResource AppButtons}"
            Width="100"
            Command="{Binding RemoveVlan}"
            />

    <DataGrid Grid.Row="4"
              Grid.ColumnSpan="3"
              Height="200"
              Margin="10,10,0,0"
              Name="dg"
              ItemsSource="{Binding vlan}"
              AutoGenerateColumns="False"
              > 

      <DataGrid.Columns>
        <DataGridTextColumn Header="S.No"    Binding="{Binding Path=S_No}"/>
        <DataGridTextColumn Header="VLAN Name" Binding="{Binding Path=vname}"   />
        <DataGridTextColumn Header="VLAN ID"      Binding="{Binding Path=vid}" />
        <DataGridTextColumn Header="           IP" Width="100"/>
        <DataGridTextColumn Header="VLAN Ports" Width="100"/>
      </DataGrid.Columns>
    </DataGrid>
  </Grid>

C# code is:

public string VlanName
    {
      get
      {
        return this.ConfigurationLibrary.ConfigLibraryVlanName;
      }
      set
      {
        if (String.Equals(this.ConfigurationLibrary.ConfigLibraryVlanName, value))
        {
          return;
        }
        this.ConfigurationLibrary.ConfigLibraryVlanName = value;
        this.OnPropertyChanged("VlanName");
      }
    }
  public string VlanID
    {
      get
      {
        return this.ConfigurationLibrary.ConfigLibraryVlanName;
      }
      set
      {
        if (String.Equals(this.ConfigurationLibrary.ConfigLibraryVlanName, value))
        {
          return;
        }
        this.ConfigurationLibrary.ConfigLibraryVlanName = value;
        this.OnPropertyChanged("VlanID");
      }
    }
  public ICommand AddVlan
    {
      get
      {
        if (_addVlan == null)
          _addVlan = new RelayCommand(() => this.AddVlans());

        return _addVlan;
      }

    }
  void AddVlans()
    {
      Console.Write("Add vlan");
      var serial = new VLANSPropertyClass();
      serial.S_No = vlan.Count + 1;
      serial.vname = VlanName;
      serial.vid = VlanID;
      vlan.Add(serial);
    }

Firstly i am displaying only two columns for testing. Any help would be greatly appreciable.

Answer 1

In order to do what you want, the DataGrid should be bound to the collection (e.g. ObservableCollection) where you store all the items, when you click the "Add" button, you call Entities.Add(NewEntity);, where Entities is the collection and NewEntity is a property of the view model. You bind the text boxes to the properties of NewEntity. i've made a small gist here to demonstrate.