Format DataGrid with custom font

[David Perera]

Hi,

I am trying to set a custom font in the datagrid.

I am using this font in the rest of my application (both android & iOS).

e.g:

GridTextColumn columnName = new GridTextColumn()

            {

                MappingName = "name",

                HeaderText = AppResources.ColumnName,

                ColumnSizer = ColumnSizer.Auto,

                HeaderFont = "GothamBold.ttf",

                RecordFont = "GothamBook.ttf"

            };

on iOS I have the resources e.g GothamBold.ttf in "Resources\Fonts\GothamBold.ttf" and on Android I have it in "Assets\GothamBold.ttf"

That code is not working. Can you help me?

Thanks!

[Shivagurunathan Kamalakannan]

Hi David Perera, 

 

We have checked your query. Kindly follow the steps in the below given link to change the properties in infoplist 

 

Link: https://blog.xamarin.com/custom-fonts-in-ios/ 

 

The header font and record font can be customized by adding the custom font. Kindly follow the below code snippet to customize the font. 

 

GridTextColumn col1 = new GridTextColumn() { MappingName = "OrderID", RecordFont = UIFont.FromName("Amontillados", 20f),HeaderFont=UIFont.FromName("Amontillados", 20f) }; 

                                    dataGrid.Columns.Add(col1); 

 

            var col2 = new GridTextColumn() { MappingName = "Customer", RecordFont = UIFont.FromName("Amontillados", 20f) }; 

            dataGrid.Columns.Add(col2); 

 

                                    GridTextColumn col3 = new GridTextColumn() { MappingName="ShipCountry", RecordFont = UIFont.FromName("Amontillados", 20f)}; 

                                    dataGrid.Columns.Add(col3); 

 

            GridTextColumn col4 = new GridTextColumn() { MappingName="ShipCity",RecordFont = UIFont.FromName("Amontillados", 20f),HeaderFont=UIFont.FromName("Amontillados", 20f)}; 

                                    dataGrid.Columns.Add(col4); 

 

I have attached the sample. Kindly refer the sample for more details. 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Custom_Font1241503570 

 

Regards, 

Shivagurunathan. K 

[David Perera]

And on Android?

[Shivagurunathan Kamalakannan]

Hi David, 

 

We sorry for the inconvenience caused. 

 

We have missed to provide the solution for Xamarin.Android in our previous update. The header font and record font can be customized by adding the custom font to the Assets folder. Kindly follow the below code snippet to customize the font.  

 

GridTextColumn col1 = new GridTextColumn() { MappingName = "OrderID", HeaderFont  =  Typeface.CreateFromAsset(this.Assets, "Amontillados.ttf") , RecordFont = Typeface.CreateFromAsset(this.Assets, "Amontillados.ttf") }; 

            dataGrid.Columns.Add(col1); 

 

            GridTextColumn col2 = new GridTextColumn() { MappingName= "CustomerID", HeaderFont = Typeface.CreateFromAsset(this.Assets, "Amontillados.ttf"), RecordFont = Typeface.CreateFromAsset(this.Assets, "Amontillados.ttf") }; 

            dataGrid.Columns.Add(col2); 

 

            GridTextColumn col3 = new GridTextColumn() { MappingName = "ShipCountry", HeaderFont = Typeface.CreateFromAsset(this.Assets, "Amontillados.ttf"), RecordFont = Typeface.CreateFromAsset(this.Assets, "Amontillados.ttf") }; 

            dataGrid.Columns.Add(col3); 

 

            GridTextColumn col4 = new GridTextColumn() {MappingName= "Customer", HeaderFont = Typeface.CreateFromAsset(this.Assets, "Amontillados.ttf"), RecordFont = Typeface.CreateFromAsset(this.Assets, "Amontillados.ttf") }; 

            dataGrid.Columns.Add(col4); 

 

            GridTextColumn col5 = new GridTextColumn() { MappingName= "ShipCity", HeaderFont = Typeface.CreateFromAsset(this.Assets, "Amontillados.ttf"), RecordFont = Typeface.CreateFromAsset(this.Assets, "Amontillados.ttf") }; 

            dataGrid.Columns.Add(col5); 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Custom_font-1895904114 

 

Regards, 

Shivagurunathan. K 

[David Perera]

Well, I think I miss something important. I am working on Xamarin.Forms.

On Xamarin.Forms, you accept just a string. I have set this string to my asset (on Xamarin Android I have the ttf in the Assets folder), and it does not work.

Sorry for the misunderstanding.

[Shivagurunathan Kamalakannan]

Hi David,  

 

You have selected platform as Xamarin.iOS , So we have provided the solution in Xamarin.iOS and Xamarin.Android platforms only instead of Xamarin.Forms. In Forms.Android and Forms.UWP the ttf file is kept in Assets folder and for the Forms.iOS ttf file is kept in Resources folder. For Forms.iOS , changes has to be done in info.plist . 

 

Kindly refer the below link for info.plist changes. 

 

Link: https://blog.xamarin.com/custom-fonts-in-ios/ 

 

Kindly find the below sample link for more details. 

 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Custom_Font_Forms274591141 

 

Regards, 

Shivagurunathan. K 

[David Perera]

So it is not possible to use the Syncfusion.SfDataGrid.XForms.RecordFont property to set the font in Xamarin Forms for the Forms.Android app?

If it is possible, please send me an example of this.

Thank you.

[Shivagurunathan Kamalakannan]

Hi David,    

 

It is possible to achieve your requirement by setting the Syncfusion.SfDataGrid.XForms.RecordFont property. Please find the code example for achieving it.  

 

Note: You need to set GridColumn.LoadUIView as True to get the custom fonts working. The default value of this property is false which will not render the text views inside the grid cells and instead will draw the text directly on the canvas of the grid cell in Android for performance improvements.  

  

GridTextColumn orderIDColumn = new GridTextColumn();  

            if (Device.RuntimePlatform == Device.iOS)  

            {  

                col1.MappingName = "OrderID";  

                col1.RecordFont = "Amontillados";  

                col1.HeaderFont = "Amontillados";  

            }  

            else if (Device.RuntimePlatform == Device.Android)  

            {  

                col1.MappingName = "OrderID";  

                col1.RecordFont = "Amontillados.ttf#Amontillados";  

                col1.HeaderFont = "Amontillados.ttf#Amontillados";  

                col1.LoadUIView = true;  

            }  

            else if (Device.RuntimePlatform == Device.UWP)  

            {  

                col1.MappingName = "OrderID";  

                col1.RecordFont = "Assets/Fonts/Amontillados.ttf#Amontillados";  

                col1.HeaderFont = "Assets/Fonts/Amontillados.ttf#Amontillados";  

            }  

  

            dataGrid.Columns.Add(orderIDColumn);  

 

 

The below screenshot portrays the outcome of the grid with custom font.  

     

 

Please refer the below UG link to get more details about LoadUIView:    

https://help.syncfusion.com/xamarin/sfdatagrid/column-types#loaduiview    

  

Refer the below sample link for more details.   

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridSample255408716  

  

  

Regards,  

Shivagurunathan. K  

[David Perera]

That is perfect, thank you very much.

[Ashok N]

Hi David, 

 

Thanks for your update. Please let us know if you require further assistance on this. 

 

Regards, 

Ashok