Xamarin Forms Custom Datagrid - xamarin

Question

I have a model as you can see in the attachment. I can get output in datagrid itemsource as shown (syncfusion sfDataGrid). but I want to get output like below. how can I do it?
img

Answer 1

if you want to achieve this you can :
1- the best way is to replace your sfDataGrid with syncfusion PivodGrid.
2- Or if you want to achieve it with a datagrid, you have to transform your data collection according to, each element in the collection is a row so you have to make group by yourself.

Answer 2

I have prepared a sample to achieve your requirement. Please refer to the following code snippets to achieve the requirement,
XAML: Define Columns and rows using GridUnboundColumn and UnboundRows respectively.
<sfgrid:SfDataGrid x:Name="sfGrid"
ColumnSizer="Star"
AutoGenerateColumns="False"
ItemsSource="{Binding OrdersInfo}">
<sfgrid:SfDataGrid.Behaviors>
<local:DataGridBehavior/>
</sfgrid:SfDataGrid.Behaviors>
<sfgrid:SfDataGrid.Columns>
<sfgrid:GridTextColumn HeaderText="Color" MappingName="Color" />
<sfgrid:GridUnboundColumn MappingName="S" HeaderText="S"/>
<sfgrid:GridUnboundColumn MappingName="M" HeaderText="M"/>
<sfgrid:GridUnboundColumn MappingName="L" HeaderText="L"/>
<sfgrid:GridUnboundColumn MappingName="XL" HeaderText="XL"/>
<sfgrid:GridUnboundColumn MappingName="2XL" HeaderText="2XL"/>
</sfgrid:SfDataGrid.Columns>
<sfgrid:SfDataGrid.UnboundRows>
<sfgrid:GridUnboundRow />
<sfgrid:GridUnboundRow />
</sfgrid:SfDataGrid.UnboundRows>
</sfgrid:SfDataGrid>
Behavior: In the SfDataGrid.QueryUnboundRow event, set the value based on the model object. Also, hide the actual data rows using the QueryRowHeight event.
public class DataGridBehavior : Behavior<SfDataGrid>
{
SfDataGrid DataGrid;
protected override void OnAttachedTo(SfDataGrid bindable)
{
DataGrid = bindable;
DataGrid.QueryUnboundRow += sfGrid_QueryUnboundRow;
DataGrid.QueryRowHeight += sfGrid_QueryRowHeight;
base.OnAttachedTo(bindable);
}
private void sfGrid_QueryUnboundRow(object sender, GridUnboundRowEventArgs e)
{
var viewModel = (sender as SfDataGrid).BindingContext as ViewModel;
if (e.UnboundAction == UnboundActions.QueryData)
{
List<Orders> rowOrders = null;
if (e.RowColumnIndex.RowIndex == 1)
{
rowOrders = viewModel.OrdersInfo.Where(x => x.Color == "WHITE").ToList();
}
else if (e.RowColumnIndex.RowIndex == 2)
{
rowOrders = viewModel.OrdersInfo.Where(x => x.Color == "BLACK").ToList();
}
if (e.RowColumnIndex.ColumnIndex == 0)
{
e.Value = rowOrders[0].Color;
e.Handled = true;
}
else
{
var item = rowOrders.FirstOrDefault(x => x.Size == e.Column.HeaderText.ToString());
e.Value = item != null ? item.Stock.ToString() : "-";
e.Handled = true;
}
}
}
private void sfGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e)
{
if (e.RowIndex == 0)
{
e.Height = 50;
}
//To hide the actual data rows from the view.
else if (!DataGrid.IsUnboundRow(e.RowIndex))
{
e.Height = 0;
e.Handled = true;
}
}
}
Please find the workable sample in the following link.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GettingStarted-549596453
You can refer to our user guidance document regarding UnboundRows and UnboundColumns from the following link,
UG links:
https://help.syncfusion.com/xamarin/datagrid/unbound-column
https://help.syncfusion.com/xamarin/datagrid/unbound-row#populating-data-for-unbound-rows
https://help.syncfusion.com/xamarin/datagrid/row-height-customization#customize-rowheight-for-all-rows