wpftriggerswpfdatagridcelltemplatedatagridviewcellstyle

How can we allow user to Add/Edit/Delete records from WPF gridview control in different ways?


In WPF xaml page I want to provide user one combobox in which there will be two options:

(1) Allow user to edit in gridview (2) Allow user to edit in form

If the user selects first option, then I want the user to allow adding/editing records in gridview itself.

If the user selects second option, then on clicking of add/edit button of gridview, one form page will appear with all fields of gridview. In the form user will be able to add/edit the record of gridview.

Can anyone give idea on this?

Here is the main code of DataGrid.

<Controls:DataGrid Grid.Row="0" SelectedItem="{Binding Path=CurrentSelectedItem, Mode=TwoWay}" AutoGenerateColumns="False" SelectionMode="Single">
              <Controls:DataGrid.Columns>
                <Controls:DataGridTemplateColumn>
                  <Controls:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                      <Button Content="Remove" VerticalAlignment="Center" HorizontalAlignment="Center" Command="{Binding Source={StaticResource cmdDeleteRecord}}" CommandParameter="{Binding Path=Attribute[ExtensionDataId].Value}" Margin="8,0,8,0" />
                    </DataTemplate>
                  </Controls:DataGridTemplateColumn.CellTemplate>
                </Controls:DataGridTemplateColumn>
                <Controls:DataGridTemplateColumn HeaderStyle="{StaticResource WrappedColumnHeaderStyle}" Header="Vendor" CanUserSort="True" ToolTipService.ToolTip="Vendor" SortMemberPath="VendorPrincipalId_Name-Reference" MaxWidth="250">
                  <Controls:DataGridTemplateColumn.ClipboardContentBinding>
                    <Binding Path="Attribute[VendorPrincipalId_Name].Value" Mode="TwoWay" />
                  </Controls:DataGridTemplateColumn.ClipboardContentBinding>                  
                  <Controls:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                      <StackPanel>
                        <TextBox Style="{DynamicResource GridCellTemplateTextBox}" TextWrapping="Wrap">
                          <TextBox.Text>
                            <Binding Path="Attribute[VendorPrincipalId_Name].Value" Mode="TwoWay" />
                          </TextBox.Text>
                        </TextBox>
                      </StackPanel>
                    </DataTemplate>
                  </Controls:DataGridTemplateColumn.CellTemplate>
                </Controls:DataGridTemplateColumn>
                <Controls:DataGridTemplateColumn HeaderStyle="{StaticResource WrappedColumnHeaderStyle}" Header="Vendor's Key" CanUserSort="True" ToolTipService.ToolTip="Vendor's Key" SortMemberPath="Attribute[VendorKey].Value" MaxWidth="250">
                  <Controls:DataGridTemplateColumn.ClipboardContentBinding>
                    <Binding Path="Attribute[VendorKey].Value" />
                 </Controls:DataGridTemplateColumn.ClipboardContentBinding>                
                  <Controls:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                      <StackPanel>
                        <TextBox Style="{DynamicResource GridCellTemplateTextBox}" TextWrapping="Wrap">
                          <TextBox.Text>
                            <Binding Path="Attribute[VendorKey].Value" />
                          </TextBox.Text>
                        </TextBox>
                      </StackPanel>
                    </DataTemplate>
                  </Controls:DataGridTemplateColumn.CellTemplate>
                </Controls:DataGridTemplateColumn>
              </Controls:DataGrid.Columns>
            </controls:DataGrid>

Solution

  • I solved the problem using trigger for allowing user to edit rows in grid as follows:

    <Controls:DataGridTemplateColumn Header="Note Title" CanUserSort="True" ToolTipService.ToolTip="Note Title"  MaxWidth="250">                                  <Controls:DataGridTemplateColumn.CellStyle>
                                        <Style TargetType="Controls:DataGridCell">
                                            <Style.Triggers>
                                                <Trigger Property="IsSelected" Value="true">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate>
                                                                <TextBox TextWrapping="Wrap">
                                                                    <TextBox.Text>
                                                                        <Binding Path="ColumnValue" Mode="TwoWay" />
                                                                    </TextBox.Text>
                                                                </TextBox>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Trigger>
                                                <Trigger Property="IsSelected" Value="false">
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate>
                                                                <TextBlock TextWrapping="Wrap">
                                                                    <TextBlock.Text>
                                                                        <Binding Path="ColumnValue" Mode="TwoWay" />
                                                                    </TextBlock.Text>
                                                                </TextBlock>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Trigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Controls:DataGridTemplateColumn.CellStyle>
                                </Controls:DataGridTemplateColumn>
    

    There is also CellEditingTemplate which can be used, but It was not working for me properly. So I used triggers. When user selects row, I set TextBox in the template of column instead if TextBlock.