CODEWITHSUNDEEP
c#wpfxamldatagrid
Mister 832
Mister 832

Reputation: 1221

How to add a button to the last/new row of a datagrid?

I would like to show a popup to help the users to add a new row to a datagrid, by adding a button in the last row of the datagrid. I figured there must be some sort of DataGridTemplateColumnproperty I have to set for the newrow/addrow template?

Upvotes: 0

Views: 1426

Answers (2)

mm8
mm8

Reputation: 169200

You could use a DataGridRow style with a data trigger that changes the template of the last row:

<DataGrid x:Name="dgrid">
    <DataGrid.Resources>
        <Style TargetType="{x:Type DataGridRow}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding}" Value="{x:Static CollectionView.NewItemPlaceholder}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type DataGridRow}">
                                <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}"
                                                BorderThickness="{TemplateBinding BorderThickness}" 
                                                Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                                    <Grid>
                                        <SelectiveScrollingGrid>
                                            <SelectiveScrollingGrid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*"/>
                                            </SelectiveScrollingGrid.ColumnDefinitions>
                                            <SelectiveScrollingGrid.RowDefinitions>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="Auto"/>
                                            </SelectiveScrollingGrid.RowDefinitions>
                                            <DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                            <DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/>
                                            <DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                                        </SelectiveScrollingGrid>
                                        <Button Content="Add New" />
                                    </Grid>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </DataGrid.Resources>
</DataGrid>

Or - if you want to put the Button in a specific column - you could use a DataGridTemplateColumn with a CellTemplate that uses a similar data trigger:

<DataGrid x:Name="dgrid">
    <DataGrid.Columns>
        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid>
                        <TextBlock>...</TextBlock>
                        <Button x:Name="btn" Content="Add" Visibility="Collapsed" />
                    </Grid>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType=DataGridRow}}"
                                             Value="{x:Static CollectionView.NewItemPlaceholder}">
                            <Setter TargetName="btn" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

Upvotes: 0

Sourabh Mishra
Sourabh Mishra

Reputation: 222

What you can do is to write a style for "DataGridRow" as

Thi is the working example

<Style x:Type="DataGridRow">
<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridRow}">
                    <Grid Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Grid.Column="0" />
                        <Button Visibility = "{Binding IsLastRow}"/>!--can set converter to convert boolean to visibilty as well.
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

So the binded property basically check the logic of the last row.(I am not sure wpf datagrid by itself provides some kind of property like "IsLastRow" or not. But if not anytime you can write your own logic).

In ContentTemplate you can define your button handler or command object.

Upvotes: 2

Related Questions