1. Home
  2. Forum
  3. Xamarin.Forms
  4. GridTableSummaryRow - center text in SummaryColumns

GridTableSummaryRow - center text in SummaryColumns

How can you center text in summary row ? So that "SUM: 2.37" would be aligned to center instead to left, just like all other columns.


7 Replies
SK Shivagurunathan Kamalakannan Syncfusion Team December 20, 2017 01:45 PM UTC

Hi Bostjan Primozic, 
 
Thanks for contacting Syncfusion Support. 
 
We have checked your query. You can achieve your requirement by writing a custom renderer for TableSummary.  
 
Below code illustrates how to register the custom renderer for TableSummary. 
 
public partial class MainPage : ContentPage 
{ 
    public MainPage() 
    { 
        InitializeComponent(); 
        dataGrid.CellRenderers.Remove("TableSummary"); 
        dataGrid.CellRenderers.Add("TableSummary", new GridTableSummaryExt()); 
    } 
} 
 
The below code illustrates the code logics to achieve the requirement using a custom renderer.  
 
public class GridTableSummaryExt:GridTableSummaryCellRenderer 
{ 
    public GridTableSummaryExt() 
    { 
             
    } 
    public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfLabel view) 
    { 
        base.OnInitializeDisplayView(dataColumn, view); 
       //Write your alignment related codes here 
        view.HorizontalTextAlignment = dataColumn.GridColumn.TextAlignment; 
 
        //view.HorizontalTextAlignment = TextAlignment.Center; 
    } 
} 
 
 
We have prepared a sample based on your requirement and you can download the same from the below link. 
 
 
Regards, 
Shivagurunathan. K 
 


BP Bostjan Primozic December 27, 2017 07:24 PM UTC

Thank you, it works perfectly.

SK Shivagurunathan Kamalakannan Syncfusion Team December 31, 2017 05:16 PM UTC

Hi Bostjan Primozic,  
Thanks for the update. Please let us know if you require any further assistance. 
  
Regards, 
Shivagurunathan. K 
 


BP Bostjan Primozic replied to Shivagurunathan Kamalakannan January 1, 2018 11:59 PM UTC

Hi Bostjan Primozic,  
Thanks for the update. Please let us know if you require any further assistance. 
  
Regards, 
Shivagurunathan. K 
 


I was testing on Windows device before and it works there, but now I switched to Android and I noticed that it doesn't work.
Text is not aligned and "OnInitializeDisplayView" function is never executed. I was testing on Samsung Galaxy S6 device with android 6 and also on emulator with android 7.1.1 and 5.0.1.
I'm using VS 2017 15.5.2 with Xamarin forms 2.5.0.121934 and Syncfusion 15.4.0.17



BP Bostjan Primozic January 2, 2018 11:28 PM UTC

Another thing that I noticed is that when you have enabled summary updates
dataGrid.View.LiveDataUpdateMode = LiveDataUpdateMode.AllowSummaryUpdate;

Then "OnInitializeDisplayView" function gets called when you add a row, but it fails with null reference exception. The "view" variable is null.
        public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfLabel view)
        {
            base.OnInitializeDisplayView(dataColumn, view);
            //Write your alignment related codes here
            view.HorizontalTextAlignment = TextAlignment.Center;
        }

SK Shivagurunathan Kamalakannan Syncfusion Team January 3, 2018 07:45 AM UTC

Hi  Bostjan Primozic, 
 
We have checked your query. You can achieve your requirement by setting “LoadUIView” to true to the GidColumn for which you want to customize the table summary cell. 
 
By default the “LoadUIView” for the grid columns are false which will draw the cell contents instead of loading labels for performance improvements. If the “LoadUIView” is set as true, the SfDataGrid will load a label inside the cells instead of drawing the contents in Android. 
 
Refer the below UG link for more details about LoadUIView property. 
 
 
<sfgrid:SfDataGrid.Columns> 
    <sfgrid:GridTextColumn HeaderText="Order ID" MappingName="OrderID"/> 
    <sfgrid:GridTextColumn HeaderText="CustomerID" MappingName="CustomerID"/> 
    <sfgrid:GridTextColumn HeaderText="FirstName" MappingName="FirstName"/> 
    <sfgrid:GridTextColumn HeaderText="CustomerID" MappingName="CustomerID"/> 
    <sfgrid:GridTextColumn HeaderText="ShipCountry" MappingName="ShipCountry" LoadUIView="True"/> 
</sfgrid:SfDataGrid.Columns> 
 
 
We have prepared a sample based on your requirement and you can download the same from the below link. 
 
                                                                              
Regards, 
Shivagurunathan. K 
 


SK Shivagurunathan Kamalakannan Syncfusion Team January 3, 2018 01:04 PM UTC

Hi Bostjan Primozic,  
 
Regarding this query “Another thing that I noticed is that when you have enabled summary updates 
dataGrid.View.LiveDataUpdateMode = LiveDataUpdateMode.AllowSummaryUpdate;
Then "OnInitializeDisplayView" function gets called when you add a row, but it fails with null reference exception. The "view" variable is null.” 
 
Your requirement can be achieved by setting “LoadUIView” as true for the columns that you wish to display the summary information . SfDataGrid will load a label inside the GridCells instead of drawing the contents in Android when the GridColumn.LoadUIView is true.  
 
For example, if you want to display summary information to CustomerID and ShipCity column then set the LoadUIView of those columns to true.  
 
Xaml Code: 
 
 
<sfgrid:SfDataGrid.Columns> 
    <sfgrid:GridTextColumn MappingName="OrderID" HeaderText="Order ID" /> 
    <sfgrid:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID" LoadUIView="True"/> 
    <sfgrid:GridTextColumn MappingName="Customer" HeaderText="Customer" /> 
    <sfgrid:GridTextColumn MappingName="ShipCountry" HeaderText="Ship Country" /> 
    <sfgrid:GridTextColumn MappingName="ShipCity" HeaderText="Ship City" LoadUIView="True"/> 
</sfgrid:SfDataGrid.Columns> 
 
 
Since there will not be any view loaded when the LoadUIView is false, the view is null in the OnInitializeDisplayView. You can simply add a null check for the view to overcome this issue. Refer the below code for more details.  
 
 
public class GridTableSummaryExt : GridTableSummaryCellRenderer 
{ 
    public GridTableSummaryExt() 
    { 
 
    } 
public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfLabel view)  { 
     base.OnInitializeDisplayView(dataColumn, view); 
     if(view!=null) 
     { 
        //Approach 1 
         //view.HorizontalTextAlignment = dataColumn.GridColumn.TextAlignment; 
 
         //Approach 2 
         view.HorizontalTextAlignment = TextAlignment.Center; 
     } 
  } 
} 
 
 
 
We have prepared a sample based on your requirement and you can download the same from the below link. 
 
 
Regards, 
Shivagurunathan. K 
 


Loader.
Up arrow icon