1. Home
  2. Forum
  3. Xamarin.Forms
  4. Format DataGrid with custom font

Format DataGrid with custom font

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!



9 Replies
SK Shivagurunathan Kamalakannan Syncfusion Team December 1, 2017 05:49 AM UTC

Hi David Perera, 
 
We have checked your query. Kindly follow the steps in the below given link to change the properties in infoplist 
 
 
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. 
 
 
Regards, 
Shivagurunathan. K 


DP David Perera December 1, 2017 09:01 AM UTC

And on Android?

SK Shivagurunathan Kamalakannan Syncfusion Team December 1, 2017 12:23 PM UTC

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); 
 
 
Regards, 
Shivagurunathan. K 


DP David Perera December 1, 2017 01:34 PM UTC

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.

SK Shivagurunathan Kamalakannan Syncfusion Team December 4, 2017 09:18 AM UTC

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. 
 
 
Kindly find the below sample link for more details. 
 
 
Regards, 
Shivagurunathan. K 


DP David Perera December 4, 2017 11:38 AM UTC

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.

SK Shivagurunathan Kamalakannan Syncfusion Team December 6, 2017 06:03 AM UTC

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:    
  
Refer the below sample link for more details.   
  
  
Regards,  
Shivagurunathan. K  


DP David Perera December 12, 2017 11:11 AM UTC

That is perfect, thank you very much.

AN Ashok N Syncfusion Team December 13, 2017 10:27 PM UTC

Hi David, 
 
Thanks for your update. Please let us know if you require further assistance on this. 
 
Regards, 
Ashok 


Loader.
Up arrow icon