Jika pencarian temen-temen coder sudah sampai membuat group pada datagrid, berarti Rani bisa anggap kalo temen-temen udah bisa membuat xaml datagrid dan menampilkan data di datagrid tersebut.
Untuk mengelompokan baris DataGrid kita perlu menggunakan menggunakan class ListCollectionView sebagai itemsource, karena class ini memiliki property GroupDescriptions yang dapat digunakan untuk membuat group. Jadi apapun jenis database dan tipe koneksinya perlu diubah ke dalam bentuk ListCollectionView. Nanti kita akan jelaskan di bawah.
Sebagai sample pada tutorial kita kali ini, Rani sudah buat sebuah project WPF dengan bahasa C# seperti di bawah ini:
Pada project tersebut sudah ada MainWindow.xaml yang menjadi form startup dan akan kita gunakan untuk menampilkan datagrid contoh.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="675">
<Grid>
<DataGrid x:Name="myDataGrid" CanUserAddRows="False"
AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn x:Name="ColumnMonth" Header="Month"
Width="100" Binding="{Binding Month}"/>
<DataGridTextColumn x:Name="ColumnCode" Header="Barcode"
Width="100" Binding="{Binding Barcode}"/>
<DataGridTextColumn x:Name="ColumnName" Header="Item Name"
Width="150" Binding="{Binding ItemName}"/>
<DataGridTextColumn x:Name="ColumnPrice" Header="Price"
Width="100" Binding="{Binding Price,StringFormat=N0}" />
<DataGridTextColumn x:Name="ColumnQty" Header="Qty"
Width="100" Binding="{Binding Qty,StringFormat=N0}" />
<DataGridTextColumn x:Name="Columnsubotal" Header="Sub Total"
Width="100" Binding="{Binding SubTotal,StringFormat=N0}" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="675">
<Grid>
<DataGrid x:Name="myDataGrid" CanUserAddRows="False"
AutoGenerateColumns="False">
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding ItemCount,
StringFormat=Count: {0}}"
Margin="30,0,0,0" />
</StackPanel>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
<DataGridTextColumn x:Name="ColumnCode" Header="Barcode"
Width="100" Binding="{Binding Barcode}"/>
<DataGridTextColumn x:Name="ColumnName" Header="Item Name"
Width="150" Binding="{Binding ItemName}"/>
<DataGridTextColumn x:Name="ColumnPrice" Header="Price"
Width="100" Binding="{Binding Price,StringFormat=N0}" />
<DataGridTextColumn x:Name="ColumnQty" Header="Qty"
Width="100" Binding="{Binding Qty,StringFormat=N0}" />
<DataGridTextColumn x:Name="Columnsubotal" Header="Sub Total"
Width="100" Binding="{Binding SubTotal,StringFormat=N0}" />
</DataGrid.Columns>
</DataGrid>
</Grid>
</Window>
Selesai dengan design, kita beralih ke behind code di file MainWindow.xaml.cs.
Sebagaimana yang Rani kemukakan diawal temen-temen bebas menampilkan data di grid dengan cara masing-masing. Cuman disini contoh yang digunakan adalah dengan menggunakan object collection yang diisi manual dengan object.add.
Pada design UI, mungkin temen-temen udah lihat field-field apa aja yang menjadi binding di masing-masing kolom dan itu terlihat seperti data penjualan atau sales. Maka Rani membuat class sales sebagai berikut:
{
public string Month { get; set; }
public string Barcode { get; set; }
public string ItemName { get; set; }
public double Price { get; set; }
public int Qty { get; set; }
public double SubTotal { get; set; }
}
Sebenarnya untuk project yang lebih besar penempatan class object seperti di atas ini sebaiknya dalam 1 file terpisah saja. Cuman untuk kali ini, mari simpan di MainWindow.xaml.cs biar lebih ringkas saja.
Di bagian paling atas code kita perlu menambahkan beberapa kelas yang akan digunakan dengan "using" seperti berikut:
using System.Windows;
using System.Windows.Data;
Kemudian pada class MainWindow kita akan menambahkan data Sales Collection sebagai kumpulan data yang akan ditampilkan. Dan kita akan membuat group berdasarkan nama bulan (field "Month").
Bagian code yang tersorot warna kuning adalah code mengubah object collection menjadi ListCollectionView agar menjadi itemsou untuk menampilkan grouping di datagarid.
public partial class MainWindow : Window
{
ObservableCollection<Sales> sales = new ObservableCollection<Sales>();
public MainWindow()
{
InitializeComponent();
sales.Add(new Sales { Month = "January", Barcode = "A0123001",
ItemName = "Ultra Milk", Price = 3500,
Qty = 2, SubTotal = 7000 });
sales.Add(new Sales { Month = "January", Barcode = "A0123002",
ItemName = "Cimory Yogurt", Price = 9500,
Qty = 5, SubTotal = 47500 });
sales.Add(new Sales { Month = "January", Barcode = "A0123003",
ItemName = "Boba Milkshake", Price = 12000,
Qty = 3, SubTotal = 36000 });
sales.Add(new Sales { Month = "February", Barcode = "A0123001",
ItemName = "Ultra Milk", Price = 3500,
Qty = 5, SubTotal = 17500 });
sales.Add(new Sales { Month = "February", Barcode = "A0123002",
ItemName = "Cimory Yogurt", Price = 9500,
Qty = 10, SubTotal = 95000 });
sales.Add(new Sales { Month = "March", Barcode = "A0123001",
ItemName = "Ultra Milk", Price = 3500,
Qty = 15, SubTotal = 52500 });
sales.Add(new Sales { Month = "March", Barcode = "A0123002",
ItemName = "Cimory Yogurt", Price = 190000,
Qty = 20, SubTotal = 47500 });
sales.Add(new Sales { Month = "March", Barcode = "A0123003",
ItemName = "Boba Milkshake", Price = 12000,
Qty = 2, SubTotal = 24000 });
sales.Add(new Sales { Month = "March", Barcode = "A0123003",
ItemName = "Yakult", Price = 1000,
Qty = 12, SubTotal = 12000 });
ListCollectionView collectionView = new ListCollectionView(sales);
collectionView.GroupDescriptions.Add(new
myDataGrid.ItemsSource = collectionView;
}
}
Mari kita coba run debug. Hasilnya seperti di bawah ini:
Kode lengkap dan source code dapat teman-teman download pada link berikut:
0 Comments