# grid-data-template-cell

> GridControl with per-cell DataTemplates rendering TextBox, Slider, TextBlock, Image, and ProgressBar editors bound to CellBoundValue.

**Framework:** wpf  **Component:** Grid  **Variant:** data-template-cell

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/wpf/grid-data-template-cell.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.SfGrid.WPF
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/grid-data-template-cell/Grid.xaml

```xaml
﻿<democommon:DemoControl
    xmlns:democommon="clr-namespace:syncfusion.demoscommon.wpf;assembly=syncfusion.demoscommon.wpf" x:Class="syncfusion.gridcontroldemos.wpf.DataTemplateCell"
                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                             xmlns:syncfusion="http://schemas.syncfusion.com/wpf" VerticalAlignment="Top" HorizontalAlignment="Left"
                             Background="White">
    <democommon:DemoControl.Resources>

        <DataTemplate x:Key="Headertemplate">
            <TextBlock HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="14"
                       Text="{Binding CellBoundValue}" />
        </DataTemplate>

        <DataTemplate x:Key="Textboxtemplate">
            <Border HorizontalAlignment="Center"
                    BorderBrush="LightGray"
                    BorderThickness="1.5"
                    CornerRadius="5">
                <TextBox Width="130"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Center"
                         Background="LightYellow"
                         Foreground="LightSlateGray"
                         Text="{Binding CellBoundValue}"
                         ToolTip="{Binding CellBoundValue}" />
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="SliderTemplate">
            <Border HorizontalAlignment="Center"
                    BorderBrush="LightGray"
                    BorderThickness="1.5">
                <Slider Name="mcSlider"
                        Width="300"
                        Height="25"
                        Background="Transparent"
                        Maximum="100"
                        Minimum="0"
                        ToolTip="{Binding CellBoundValue}"
                        Value="{Binding CellBoundValue}" />
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="TextTemplate">
            <Border BorderBrush="LightSlateGray"
                    BorderThickness="2"
                    CornerRadius="2">
                <TextBlock Text="{Binding CellBoundValue}" ToolTip="{Binding CellBoundValue}" />
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="ImageTemplate">
            <Image Height="22" Source="{Binding CellBoundValue}" />
        </DataTemplate>

        <DataTemplate x:Key="ProgressbarTemplate">
            <ProgressBar Foreground="Orange"
                         Maximum="20"
                         Minimum="0"
                         ToolTip="{Binding CellBoundValue}"
                         Value="{Binding CellBoundValue}" />
        </DataTemplate>
    </democommon:DemoControl.Resources>

    <ScrollViewer CanContentScroll="True"
                          HorizontalScrollBarVisibility="Auto"
                          VerticalScrollBarVisibility="Auto">
        <syncfusion:GridControl Name="gridControl1"
                                        syncfusion:GridTooltipService.ShowTooltips="True"/>
    </ScrollViewer>
</democommon:DemoControl>

```
