1. Home
  2. Forum
  3. Xamarin.Forms
  4. Resize grid after changing CellTextSize

Resize grid after changing CellTextSize

I want to give the end user the ability to change the font size after initial load. What is the best way to get the row heights and column widths to resize when the CellTextSize is changed?

7 Replies
SK Shivagurunathan Kamalakannan Syncfusion Team February 15, 2018 02:58 PM UTC

Hi Sean Bryant, 
 
Thanks for contacting Syncfusion Support, 
 
We  have checked your query. The row height can be resized based on the cell text size. It can be achieved  by using QueryRowHeight event. 
 
Refer the below KB for more details. 
 
 
Note: Set ColumnSizer to Auto to get the width of the column to be sized based on the cell text size. 
 
 
 
 
public partial class MainPage : ContentPage 
{ 
    public MainPage() 
    { 
        InitializeComponent(); 
        Button button = new Button(); 
        button.Text = "Change font size"; 
        button.Clicked += Button_Clicked; 
        layout.Children.Add(button); 
    } 
 
    private void Button_Clicked(object sender, EventArgs e) 
    { 
         dataGrid.Columns.ForEach(x => x.CellTextSize = 20);            
         dataGrid.QueryRowHeight += DataGrid_QueryRowHeight; 
    } 
 
    private void DataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) 
    { 
        if (e.RowIndex > 0) 
        { 
            e.Height = SfDataGridHelpers.GetRowHeight(dataGrid, e.RowIndex); 
            e.Handled = true; 
        } 
    } 
} 
 
 
We have prepared a sample based on your requirement and you can download the same from the below link. 
 
Regards, 
Shivagurunathan. K 


SB Sean Bryant February 15, 2018 09:09 PM UTC

G'Day Shivagurunathan,

Your sample for Android does not work on the 5" KitKat (4.4) XXHDPI Phone (Android 4.4 - API 19) emulator, or on a Samsung SM-G900I (Android 6.0 - API 23) physical device. The font size increases but the cell dimensions do not change, as the QueryRowHeight event does not fire when the CellTextSize is set.

My band-aid solution that I have already, is to empty the data source and re-populate it, forcing the QueryRowHeight event to fire.

What I have not been able to resolve, and what has not been addressed below, is how to trigger a Auto GridColumn width resize after initial load (either due to font size change or by adding new data that is longer than the existing text in the column).

Thanks,
Sean

SK Shivagurunathan Kamalakannan Syncfusion Team February 16, 2018 06:55 PM UTC

Hi Sean, 
 
We have checked your query. Your requirement to change the Column width based on the text size can be achieved at runtime. 
By refreshing the grid column sizer the column will be resized(set column sizer as Auto) based on the cell text. 
 
Set LoadUIView to true for the columns. 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. 
 
Refer the below code for more details. 
 
 
public partial class MainPage : ContentPage 
{ 
        int a = 0; 
       
    public MainPage() 
    { 
        InitializeComponent(); 
 
        dataGrid.QueryRowHeight += DataGrid_QueryRowHeight; 
        Button button = new Button(); 
        button.Text = "Change font size"; 
        button.Clicked += Button_Clicked; 
        layout.Children.Add(button); 
    } 
        private void Button_Clicked(object sender, EventArgs e) 
        { 
            if(a%2==0) 
            { 
                dataGrid.Columns.ForEach(x => x.CellTextSize = 50); 
                a++; 
            } 
            else 
            { 
                dataGrid.Columns.ForEach(x => x.CellTextSize = 100); 
                a++; 
            } 
            dataGrid.GridColumnSizer.Refresh(); 
            dataGrid.View.Refresh(); 
        } 
        private void DataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) 
    { 
        if (e.RowIndex > 0) 
        { 
            e.Height = SfDataGridHelpers.GetRowHeight(dataGrid, e.RowIndex); 
             
            e.Handled = true; 
        } 
    } 
    } 
 
 
We have prepared a sample based on your requirement and you can download the same from below link. 
 
Regards, 
Shivagurunathan. K 


SB Sean Bryant February 19, 2018 12:01 AM UTC

G'Day Shivagurunathan,

Is there a way to refresh individual columns?  Your solution only works if the entire grid is set to Auto. I have situations where I use LastColumnFill & Star on a column (setting the rest of the columns to Auto) to prevent the grid from being wider than the display area, however setting the whole grid to Auto ignores these settings, and stretches the grid off the side of the page.

Sean


SK Shivagurunathan Kamalakannan Syncfusion Team February 19, 2018 03:33 PM UTC

Hi Sean, 
 
We have checked your query. Your requirement to change the column width based on the cell text size can be achieved in SfDataGrid. It can be achieved by the use of ResetAutoWidth method. 
 
Refer the below code for more details: 
 
 
public partial class MainPage : ContentPage 
{ 
        int a = 0; 
       
    public MainPage() 
    { 
        InitializeComponent(); 
 
        dataGrid.QueryRowHeight += DataGrid_QueryRowHeight; 
        Button button = new Button(); 
        button.Text = "Change font size"; 
        button.Clicked += Button_Clicked; 
        layout.Children.Add(button); 
        } 
        private void Button_Clicked(object sender, EventArgs e) 
        { 
            if(a%2==0) 
            {   
                dataGrid.Columns.FirstOrDefault(x => x.MappingName == "ShipCity").CellTextSize = 50; 
                a++;  
            } 
            else 
            { 
                dataGrid.Columns.FirstOrDefault(x => x.MappingName == "ShipCity").CellTextSize = 100; 
                a++; 
            } 
            dataGrid.GridColumnSizer.ResetAutoWidth(this.dataGrid.Columns["ShipCity"]); 
            dataGrid.GridColumnSizer.Refresh(true); 
            dataGrid.View.Refresh(); 
        } 
 
        private void DataGrid_QueryRowHeight(object sender, QueryRowHeightEventArgs e) 
    { 
        if (e.RowIndex > 0) 
        { 
            e.Height = SfDataGridHelpers.GetRowHeight(dataGrid, e.RowIndex); 
            e.Handled = true; 
        } 
    } 
    } 
} 
 

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


SB Sean Bryant February 19, 2018 08:57 PM UTC

Thanks Shivagurunathan,

That has resolved the issue.

Sean

SK Shivagurunathan Kamalakannan Syncfusion Team February 20, 2018 04:27 AM UTC

Hi Sean, 
 
Thanks for the update. Please let us know for further assistance. 
 
Regards, 
Shivagurunathan. K 


Loader.
Up arrow icon