# Integration with MS DataGridView

## Content



This walkthrough explains the steps to show sparklines in the **MS DataGridView** control. The sparkline control cannot be directly added to the DataGridView cells, but alternatively you can render it as a **DataTemplate** item in the DataGridView cells. To achieve the same, you can use **TemplateColumn** as ItemFormatter, as shown in the following example.

![DataGrid integration with Sparkline](https://cdn.mescius.io/document-site-files/images/9decca57-66c3-4dca-a1cc-04fdd3fb16b4/images/datagrid-sparkline.png)

To add the Sparkline control in MS DataGridView, follow the given steps:

### Add an MS DataGridView control

1.  Create a new **Windows Forms App** and set the project framework using **Configure your new project** window.
2.  Drag and drop **DataGridView** control from the Toolbox onto your form, and set its **Dock** property to **Fill** from the **Properties** Window.<br />This adds the MS DataGridView control to your application.

### Step 2: Create a Data Source

1.  Create a class named **RegionSalesData** to be used as a data source for the DataGridView.
    
    ```csharp
    public ObservableCollection<double> Data { get; set; }
    public string State { get; set; }
    public double TotalSales { get; set; }
    public string TotalSalesFormatted
    {
        get
        {
            return String.Format("{0:c2}", this.TotalSales);
        }
    }
    public double NetSales { get; set; }
    }
    ```
    
2.  Add the following code to **MainWindow.xaml.cs** to set the **DataContext** for binding the control using an ObservableCollection of RegionSalesData type.
    
    ```csharp
    public partial class MainWindow : Window
    {
        public ObservableCollection<RegionSalesData> Sales { get; set; }
        public MainWindow()
        {
            InitializeComponent();
            Random rnd = new Random();
            string[] states = new string[] { "Alabama", "Alaska", "Arizona", "Idaho", "Illinois", "Indiana", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Vermont", "Virginia", "Washington" };
            this.Sales = new ObservableCollection<RegionSalesData>();
            for (int i = 0; i < states.Length; i++)
            {
                RegionSalesData rsd = new RegionSalesData();
                rsd.State = states[i];
                rsd.Data = new ObservableCollection<double>();
                for (int j = 0; j < 12; j++)
                {
                    double d = rnd.Next(-50, 50);
                    rsd.Data.Add(d);
                    rsd.NetSales += d;
                    rsd.TotalSales += Math.Abs(d);
                }
                this.Sales.Add(rsd);
            }
            this.DataContext = this;
        }
    }
    ```

### Step 3: Show Sparklines

1.  Add the following code to **MainWindow.xaml** form to bind the data to the MS DataGridView, and to render Sparklines using the TemplateColumn property.
    
    ```xml
    <DataGrid x:Name="grid" AutoGenerateColumns="False" ItemsSource="{Binding Sales}" RowHeight="25" IsReadOnly="True">
        <DataGrid.Columns>
            <DataGridTextColumn Header="Region" Binding="{Binding State}" />
            <DataGridTextColumn Header="Total Sales" Binding="{Binding TotalSalesFormatted}" />
            <DataGridTextColumn Header="Net Sales" Binding="{Binding NetSales}" />
            <DataGridTemplateColumn Header="Sales Trend" Width="150">
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <c1:C1Sparkline Data="{Binding Data}" SparklineType="Line" ShowMarkers="True" MarkersColor="#FF8C8C8C" SeriesColor="#FF88BDE6" NegativeColor="#FFF07E6E" ShowNegative="True" />
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>
    ```