DxTemplateColumn

Creating a custom column in a DxDataGrid using the DxTemplateColumn

To create a column containing custom controls (like buttons, images, grids etc.) a DxTemplateColumn is required. Nested inside the DxTemplateColumn a DxCellTemplate and a DxTemplate is required.

The basic structure looks like this:

<tl:DxTemplateColumn Header="Custom column">
    <tl:DxCellTemplate>
        <tl:DxTemplate>
            <!-- template content goes here -->
        </tl:DxTemplate>
    </tl:DxCellTemplate>
</tl:DxTemplateColumn>

Controls can be placed inside the DxTemplate. These controls will keep the same DataContext as the DxTemplateColumn meaning DataRow information can be directly accessed and use in data bindings. Note that DxTemplate only supports a single child control, so if multiple elements are required they have to be wrapped in a grid. To enable column sorting and filtering a BindingPath is required in the DxTemplateColumn.

A column containing a button next to a textbox could look something like this:

<tl:DxTemplateColumn Header="Custom column"
                     BindingPath="data_column_1">
    <tl:DxCellTemplate>
        <tl:DxTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBox Grid.Column="0"
                         Text="{Binding data_column_1}"
                         IsReadOnly="True"
                         BorderThickness="0"
                         Background="Transparent"
                         Width="Auto"></TextBox>
                <Button Grid.Column="1" ClickMode="Press" Content="Click me" />
            </Grid>
        </tl:DxTemplate>
    </tl:DxCellTemplate>
</tl:DxTemplateColumn>