Missing grid lines in Data Grid rows/columns when customizing columns
Hello!
I have a simple page with just a data grid. The GridLinesVisibility property for the data grid is set to Both, to display both row and column lines. I also set the grid line color black and give it a thickness of 2, so that it's more visible:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:local="clr-namespace:Playground.Maui._7._0.FixingTableGridLines"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sfgrid="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
x:DataType="local:GridContentPageViewModel"
x:Class="Playground.Maui._7._0.FixingTableGridLines.GridContentPage"
Title="GridContentPage">
<VerticalStackLayout>
<sfgrid:SfDataGrid x:Name="TableDataGrid"
IsVisible="True"
VerticalOptions="FillAndExpand"
ColumnWidthMode="Auto"
AllowEditing="False"
NavigationMode="Cell"
SortingMode="Single"
ItemsSource="{Binding RowsCollection}"
QueryRowHeight="TableDataGridQueryRowHeight"
AutoGenerateColumnsMode="None"
GridLinesVisibility="Both"
HeaderGridLinesVisibility="Both">
<sfgrid:SfDataGrid.DefaultStyle>
<sfgrid:DataGridStyle GridLineStrokeThickness="2"
GridLineColor="Black"/>
</sfgrid:SfDataGrid.DefaultStyle>
</sfgrid:SfDataGrid>
</VerticalStackLayout>
</ContentPage>
In the code-behind for this page, I am creating 3 columns for the data grid in the constructor:
public GridContentPage()
{
InitializeComponent();
// Create the grid columns.
this.TableDataGrid.Columns.Add(new DataGridTemplateColumn()
{
HeaderText = "Column 0",
MaximumWidth = 200,
MappingName = $"GridCellViewModels[0].MappingValue",
CellTemplate = new DataTemplate(() => this.CreateGridCellView(columnIndex: 0))
});
this.TableDataGrid.Columns.Add(new DataGridTemplateColumn()
{
HeaderText = "Column 1",
MaximumWidth = 200,
MappingName = $"GridCellViewModels[1].MappingValue",
CellTemplate = new DataTemplate(() => this.CreateGridCellView(columnIndex: 1))
});
this.TableDataGrid.Columns.Add(new DataGridTemplateColumn()
{
HeaderText = "Column 2",
MaximumWidth = 200,
MappingName = $"GridCellViewModels[2].MappingValue",
CellTemplate = new DataTemplate(() => this.CreateGridCellView(columnIndex: 2))
});
this.BindingContext = new GridContentPageViewModel();
}
The CellTemplate for the columns is created by calling the CreateGridCellValue() method, which sets the binding for the cell value that is displayed:
public GridCellView CreateGridCellView(int columnIndex)
{
GridCellView gridCellView = new GridCellView();
// Set up the bindings.
gridCellView.SetBinding(
GridCellView.CellValueProperty,
$"{nameof(GridRowViewModel.GridCellViewModels)}[{columnIndex}].{nameof(GridCellViewModel.CellValue)}",
BindingMode.OneWay);
return gridCellView;
}
The view model for the Content Page has a RowsCollection property that the grid binds to. This is a collection of GridRowViewModels, and it is filled in the constructor:
public class GridContentPageViewModel
{
public ObservableCollection<GridRowViewModel> RowsCollection { get; } = new ObservableCollection<GridRowViewModel>();
public GridContentPageViewModel()
{
// Add some rows.
RowsCollection.Add(new());
RowsCollection.Add(new());
RowsCollection.Add(new());
}
}
The GridRowViewModel contains a list of cells for each of the three columns:
public class GridRowViewModel
{
// This is the list of the CellViewVMs for each grid cell on this row.
public List<GridCellViewModel> GridCellViewModels { get; } = new List<GridCellViewModel>();
public GridRowViewModel()
{
this.GridCellViewModels.AddRange(new List<GridCellViewModel>()
{
new GridCellViewModel()
{
CellValue = "CellValue 1",
MappingValue = 1
},
new GridCellViewModel()
{
CellValue = "CellValue 2",
MappingValue = 2
},
new GridCellViewModel()
{
CellValue = "CellValue 3",
MappingValue = 3
},
});
}
}
The GridCellViewModel contains the value to be displayed in the cell, and the mapping value for sorting:
public class GridCellViewModel
{
public string CellValue { get; set; }
public int MappingValue { get; set; }
}
However, when I run this, the grid lines are shown for the column headers but are missing from the cells, as shown below. I suspect it has something to do with the fact that I'm displaying a custom ContentView for the grid cell, but I'm not sure.
How do I show grid lines when I create custom columns with a custom ContentView or the grid cells?
