How to modify the cell borders in SfDataGrid ?

1 min read

SfDataGrid allows you to customize the grid borders to vertical, horizontal, both or none based on requirements.

You need to write a custom SfDataGrid.GridStyle and override the GetGridLinesVisibility method to customize the borders in SfDataGrid.

Refer the below code example in which a CustomGridStyle is written inheriting from DataGridStyle to customize the grid borders.

MainPage

public partial class MainPage : ContentPage
{ 
        private SfDataGrid dataGrid;
        private ViewModel viewModel;
        public MainPage()
        {
            InitializeComponent();
            dataGrid = new SfDataGrid();
            viewModel = new ViewModel();
            dataGrid.ItemsSource = viewModel.OrdersInfo;
            dataGrid.GridStyle = new CustomGridStyle();
            this.Content = dataGrid;
        }
}

There are four options available in GridLinesVisibility to customize the grid borders.

Both

GridLinesVisibility.Both allows you to display the SfDataGrid with both Horizontal and Vertical borders.

public class CustomGridStyle : DataGridStyle
{
        public CustomGridStyle()
        {
        }
        public override GridLinesVisibility GetGridLinesVisibility()
        {
            return GridLinesVisibility.Both;
        }
}

Screenshot

Vertical Grid

Horizontal

GridLinesVisibility.Horizontal allows you to display the SfDataGrid with Horizontal border only.

public class CustomGridStyle : DataGridStyle
{
        public CustomGridStyle()
        {
        }
        public override GridLinesVisibility GetGridLinesVisibility()
        {
            return GridLinesVisibility.Horizontal;
        }
}

Screenshot:

GridLinesVisibility

Vertical

GridLinesVisibility.Vertical allows you to display the SfDataGrid with Vertical border only.

public class CustomGridStyle : DataGridStyle
{
        public CustomGridStyle()
        {
        }
        public override GridLinesVisibility GetGridLinesVisibility()
        {
            return GridLinesVisibility.Vertical;
        }
 }

Screenshot

Horizontal Grid

None

GridLinesVisibility.None allows you to display the SfDataGrid without borders.

public class CustomGridStyle : DataGridStyle
{
        public CustomGridStyle()
        {
        }
        public override GridLinesVisibility GetGridLinesVisibility()
        {
            return GridLinesVisibility.None;
        }
}