|
1 | | -# How to bind the data table to WPF DataGrid (SfDataGrid)? |
| 1 | +# How to bind the data table to WPF DataGrid |
2 | 2 |
|
3 | 3 | This sample show cases how to bind the data table to [WPF DataGrid](https://www.syncfusion.com/wpf-ui-controls/datagrid) (SfDataGrid). |
4 | 4 |
|
5 | | -[WPF DataGrid](https://www.syncfusion.com/wpf-ui-controls/datagrid) (SfDataGrid) supports to bind the DataTable as ItemsSource. You can also bind the datatable from the dataset. |
| 5 | +`DataGrid` supports to bind the [DataTable](https://learn.microsoft.com/en-us/dotnet/api/system.data.datatable?view=net-5.0) as `ItemsSource`. You can also bind the datatable from the [DataSet](https://learn.microsoft.com/en-us/dotnet/api/system.data.dataset?view=netframework-4.8). |
6 | 6 |
|
7 | | -KB article - [How to bind the data table to WPF DataGrid (SfDataGrid)?](https://www.syncfusion.com/kb/10870/how-to-bind-data-table-to-wpf-datagrid-sfdatagrid) |
| 7 | +### ViewModel creation |
| 8 | + |
| 9 | +Create a view model class in the WPF project similar to the one in the following code example. |
| 10 | + |
| 11 | +``` csharp |
| 12 | +public class ViewModel |
| 13 | +{ |
| 14 | + public ViewModel() |
| 15 | + { |
| 16 | + DataTableCollection = GetDataTable(); |
| 17 | + } |
| 18 | + public DataTable DataTableCollection { get; set; } |
| 19 | + |
| 20 | + private DataTable GetDataTable() |
| 21 | + { |
| 22 | + DataTable dataTable = new DataTable(); |
| 23 | + dataTable.Columns.Add("Order ID", typeof(int)); |
| 24 | + dataTable.Columns.Add("Customer Name", typeof(string)); |
| 25 | + dataTable.Columns.Add("Customer ID", typeof(string)); |
| 26 | + dataTable.Columns.Add("Country", typeof(string)); |
| 27 | + dataTable.Rows.Add(1001, "Maria Anders", "ALFKI", "Germany"); |
| 28 | + dataTable.Rows.Add(1002, "Ana Trujilo", "ANATR", "Mexico"); |
| 29 | + dataTable.Rows.Add(1003, "Antonio Moreno", "ENDGY", "Mexico"); |
| 30 | + dataTable.Rows.Add(1004, "Thomas Hardy", "ANTON", "UK"); |
| 31 | + dataTable.Rows.Add(1005, "Christina Berglund", "BERGS", "Sweden"); |
| 32 | + dataTable.Rows.Add(1006, "Hanna Moos", "BLAUS", "Germany"); |
| 33 | + dataTable.Rows.Add(1007, "Frederique Citeaux", "BLONP", "France"); |
| 34 | + dataTable.Rows.Add(1008, "Martin Sommer", "BOLID", "Spain"); |
| 35 | + dataTable.Rows.Add(1009, "Laurence Lebihan", "BONAP", "France"); |
| 36 | + dataTable.Rows.Add(1010, "Kathryn", "BOTTM", "Canada"); |
| 37 | + dataTable.Rows.Add(1011, "Tamer", "XDKLF", "UK"); |
| 38 | + dataTable.Rows.Add(1012, "Martin", "QEUDJ", "US"); |
| 39 | + dataTable.Rows.Add(1013, "Nancy", "ALOPS", "France"); |
| 40 | + dataTable.Rows.Add(1014, "Janet", "KSDIO", "Canada"); |
| 41 | + dataTable.Rows.Add(1015, "Dodsworth", "AWSDE", "Canada"); |
| 42 | + dataTable.Rows.Add(1016, "Buchanan", "CDFKL", "Germany"); |
| 43 | + dataTable.Rows.Add(1017, "Therasa", "WSCJD", "Canada"); |
| 44 | + dataTable.Rows.Add(1018, "Margaret", "PLSKD", "UK"); |
| 45 | + dataTable.Rows.Add(1019, "Anto", "CCDSE", "Sweden"); |
| 46 | + dataTable.Rows.Add(1020, "Edward", "EWUJG", "Germany"); |
| 47 | + return dataTable; |
| 48 | + } |
| 49 | +} |
| 50 | +``` |
| 51 | + |
| 52 | +### Binding ItemsSource in XAML |
| 53 | + |
| 54 | +In the main page, add the necessary XML namespace to use `SfDataGrid` control, set the DataContext of the window to the `ViewModel` class, and bind the `ItemsSource` of `SfDataGrid` with the `DataTableCollection`. |
| 55 | + |
| 56 | +``` xml |
| 57 | +<Window x:Class="SfDataGridDemo.MainWindow" |
| 58 | + xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| 59 | + xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| 60 | + xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
| 61 | + xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
| 62 | + xmlns:local="clr-namespace:SfDataGridDemo" |
| 63 | + xmlns:syncfusion="http://schemas.syncfusion.com/wpf" |
| 64 | + mc:Ignorable="d" |
| 65 | + Title="MainWindow" Height="450" Width="800"> |
| 66 | + <Window.DataContext> |
| 67 | + <local:ViewModel/> |
| 68 | + </Window.DataContext> |
| 69 | + <Grid> |
| 70 | + <syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding DataTableCollection}" /> |
| 71 | + </Grid> |
| 72 | +</Window> |
| 73 | +``` |
| 74 | + |
| 75 | + |
0 commit comments