Customize the font of header row (Bold) in sfDataGrid

[John]

I have reviewed the documentation at https://help.syncfusion.com/xamarin/sfdatagrid/styles but can not find a way to customize all the properties of the header row.  Is there a way to have the font "bold" in the header?  I would like to have a simple transparent header row with the font bolded to distinguish it from the data rows.  I have followed the guidance and created a custom DataGridStyle but there doesn't appear to be any way to do this. I know the UWP control supports it, is it not in the Xamarin control?  If not, will it be?  When?

Would also be good to know how (if possible) to make cells align text (left, center, right) when autogeneratecolumns is used.

[Shivagurunathan Kamalakannan]

Hi John, 

 

Thanks for contacting Syncfusion Support, 

 

Regarding your first query: 

Yes you can customize the font attributes and background color for the column header in Xamarin. 

 

Refer the UG link for more details. 

UG Link: https://help.syncfusion.com/xamarin/sfdatagrid/column-types#header-customizations 

 

Refer the below code for more details. 

 

Approach 1: While setting AutoGeneratingColumns as false. 

 

 

<sfgrid:SfDataGrid x:Name="dataGrid"  

               ItemsSource="{Binding OrdersInfo}"  

               AutoGenerateColumns="False" 

               ColumnSizer="Auto"> 

 

    <sfgrid:SfDataGrid.Columns> 

        <sfgrid:GridTextColumn MappingName="OrderID"> 

            <sfgrid:GridTextColumn.HeaderTemplate> 

                <DataTemplate> 

                    <Label Text="Order ID" FontAttributes="Bold" BackgroundColor="Transparent"/> 

                </DataTemplate> 

            </sfgrid:GridTextColumn.HeaderTemplate> 

        </sfgrid:GridTextColumn> 

… 

         

        <sfgrid:GridTextColumn MappingName="ShipCountry"> 

            <sfgrid:GridTextColumn.HeaderTemplate> 

                <DataTemplate> 

                    <Label Text="Country" FontAttributes="Bold" BackgroundColor="Transparent"/> 

                </DataTemplate> 

            </sfgrid:GridTextColumn.HeaderTemplate> 

        </sfgrid:GridTextColumn> 

    </sfgrid:SfDataGrid.Columns> 

 

</sfgrid:SfDataGrid> 

 

 

 

Regarding your second query: 

 

You can customize the TextAlignment of the columns while setting AutoGeneratingColumns as true by using the AutoGeneratingColumn event. 

  

Approach 2: While setting AutoGeneratingColumns as True. 

 

Main.page.cs  

 

 

public partial class MainPage : ContentPage 

{ 

    public MainPage() 

    { 

        InitializeComponent(); 

        dataGrid.AutoGeneratingColumn += DataGrid_AutoGeneratingColumn; 

    } 

 

    private void DataGrid_AutoGeneratingColumn(object sender, AutoGeneratingColumnEventArgs e) 

    { 

        e.Column.HeaderFontAttribute = FontAttributes.Bold; 

        e.Column.TextAlignment = TextAlignment.Center; 

    } 

} 

 

 

 

We have prepared a sample based on your requirement and you can download the same from below link. 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridSample-1171865483 

 

 

Regards, 

Shivagurunathan. K 

[John]

Thanks, this helps.  But I won't be able to do this until you put out the fix in mid Feb for the other issue I raised: https://www.syncfusion.com/forums/135509/index-out-of-range-with-datagrid

[Shivagurunathan Kamalakannan]

Hi John, 

 

Thanks for the update. 

 

The reported issue “Index was out of range. Must be non-negative and less than the size of the collection” raised in the below link. 

Link:  https://www.syncfusion.com/forums/135509/index-out-of-range-with-datagrid 

 

The reported issue will be fixed and will be included in our 2018 Vol 1 main release which is scheduled to be rolled out by the mid of February, 2017.     

 

Please let us know, If you require for further assistance. 

 

Regards, 

Shivagurunathan. K