1. Home
  2. Forum
  3. WinForms
  4. Adjust row height to new font size

Adjust row height to new font size

Good day,

I have a grid with which the user can manually set the font type and size.
The purpose of this is that there can be masses of rows and the user would want to see as much as possible in certain scenarios.
I can currently change the Font Size but the row height remains unchanged.

I have come across the following code and implemented it but I have some questions:
(Row Height code is highlighted)

Questions:
1. Is this the correct way? Or is there a better way to change the row Height?
2. What is the difference between ScrollableGridRangeInfo and GridCellsRange? Their descriptions are the same
3. When run on a large grid is takes some time to be applied. Is there any way to improve performance?
4. When I change to a large font the font enlarges until there is no top or bottom margin. But some columns still display the top margin. How can i disable the top and bottom margins for all columns?

5. The same applies for small fonts. The text is smaller but the top and bottom margin negates this as a lot of 'empty' space is displayed and wasted.


Regards,
James


12 Replies
AR Arulpriya Ramalingam Syncfusion Team January 24, 2018 11:45 AM UTC

Hi James,   
   
Thanks for contacting Syncfusion support.   
   
Query   
Response   
1. Is this the correct way? Or is there a better way to change the row Height?   
In the provided code example, you have modified the font size after resizing the rows and columns. So that, the Rows and Columns will be resized based on the previous font size. In order to resize the RowHeightsand ColumnWidths when font size is changed, the ResizeToFit() method can be called after the font size is modified. We have modified the provided code part and created a simple sample as per your scenario. Please make use of below code and sample,   
   
Code example   
   
private static void ChangeControlFont(GridGroupingControl grid, float fontSize, string fontName)   
{   
    grid.Appearance.ColumnHeaderCell.Font.Size = fontSize;   
    grid.Appearance.AlternateRecordFieldCell.Font.Size = fontSize;   
    grid.Appearance.RecordFieldCell.Font.Size = fontSize;   
    grid.Appearance.FilterBarCell.Font.Size = fontSize;   
    grid.GridGroupDropArea.Model.BaseStylesMap.Standard.StyleInfo.Font = new GridFontInfo(newFont(fontName, fontSize));   
   
   //To resize the RowHeights and ColumnWidths   
    grid.TableModel.RowHeights.ResizeToFit(GridRangeInfo.Table(),GridResizeToFitOptions.IncludeHeaders);   
    grid.TableModel.ColWidths.ResizeToFit(GridRangeInfo.Table(),GridResizeToFitOptions.IncludeHeaders);   
}   
   
2. What is the difference between ScrollableGridRangeInfo and GridCellsRange? Their descriptions are the same   
As per the GridGroupingControl current architecture, the ScrollableGridRangeInfo contains the cells which are non-frozen (i.e. the cells excluding Row/Column header, FilterBarCells, IndentColumn, CaptionRow, AddNewRecord row and the frozen row and column.) whereas, the GridCellsRange contains all the cells except Row/Column header cells.    
3. When run on a large grid is takes some time to be applied. Is there any way to improve performance?   
The ScrollableGridRangeInfo calculates the height of rows and width of columns for all the scrollable cells when ResizeToFit() is called. Moreover, while calculating the width/height of cells, the length of the cell values of each cell are computed and the width/height are modified. So, the grid will take some to loop through the records and calculate the height/width when the grid has more records. To improve the performance, we could suggest you to resize the cells/rows/table of GridRangeInfo based on requirement. So that, the calculation of width/height will be computed based on the cells. Please refer to the below code,   
   
Code example   
   
//To resize the RowHeights and ColumnWidths   
grid.TableModel.RowHeights.ResizeToFit(GridRangeInfo.Table(),GridResizeToFitOptions.IncludeHeaders);   
grid.TableModel.ColWidths.ResizeToFit(GridRangeInfo.Table(),GridResizeToFitOptions.IncludeHeaders);   
   
4. When I change to a large font the font enlarges until there is no top or bottom margin. But some columns still display the top margin. How can i disable the top and bottom margins for all columns?   
By default, the font will be updated based on the font size and the cell values will be wrapped if the cell values exceed the cell boundaries. Moreover, the Borders will be drawn for all the cells though the font size is changed. We suspect that you are changing the borders of the cells based on font size of the cells. So that, the reported issue might be occurred. So, we request you to refer the attached sample and let us know that, if we missed anything from your customization which causes the issue. So that, we could analyze further to provide you a better solution at the earliest.   
5. The same applies for small fonts. The text is smaller but the top and bottom margin negates this as a lot of 'empty' space is displayed and wasted.   
   
   
Regards,   
Arulpriya   


JR James Roodt February 5, 2018 06:48 AM UTC

Hi Arulpriya,

Your suggested solution works much better than my solution so thank you very much.

I only have one outstanding issue in that in certain scenarios I need to display as much information as possible at the same time.
Below is the screen as it currently stands while using Font Size 6.
On it we are displaying 21 rows. But if I can reduce/remove the top and bottom margin I can easily double the amount rows being displayed in the same sized window.


I had hoped adjusting the row size based on the Font would help and thus my code for Row Height currently being executed is your suggested code as can be seen below.


So how can I remove/reduce the top and bottom margins?

Regards,
James

AR Arulpriya Ramalingam Syncfusion Team February 6, 2018 07:26 AM UTC

Hi James,   
   
Thanks for your update.   
   
By default, the BorderMargins will be set to zero for the cells. In order to set the border margins manually, the BorderMargins property of GridStyleInfo can be used. Please make use of the below code and sample,   
   
Code example   
   
//To reduce the border margins   
grid.Appearance.AnyCell.BorderMargins.Top = 0;   
grid.Appearance.AnyCell.BorderMargins.Bottom = 0;   
   
   
Note   
We suspect that the BorderMargins are updated properly in your sample. So, to reduce the space between the rows, the TextMargins can be set to zero by using the TextMargins property of GridStyleInfo. Please refer to the below code,   
   
Code example   
   
//To reduce the text margins   
grid.Appearance.AnyCell.TextMargins.Top = 0;   
grid.Appearance.AnyCell.TextMargins.Bottom = 0;   
   
   
Regards,   
Arulpriya   


JR James Roodt February 12, 2018 06:45 AM UTC

Hi Arulpriya,

I am still having the exact same issue and the text & Border margin code is not having any effect at all.
I assume that some of my other settings (like Metro style) is overriding it.
I also still have the issue where text on the same row is on different heights (Look at column 1 vs column 2: InstrumentID vs Market)

Please upgrade this to Direct Track so i can send you my code.
Regards,
James


JR James Roodt February 12, 2018 08:36 AM UTC

Hi Arulpriya,

I needed to upload code anyway to Direct Trac 197347. 
So I included this issue in it's code and video. Please look at it so we can see why I cannot get rid of the top and bottom margins.

Regards,
James

AR Arulpriya Ramalingam Syncfusion Team February 15, 2018 05:16 PM UTC

Hi James, 
 
Thanks for your patience. 
 
We have analyzed the reported scenario at our end. By default, the ResizeToFit() method calculates the height of the strings in each cell and set the maximum height for all the rows and the ColumnHeaderRowHeight is set as more than the record row height to provide the look and feel. So, when the ColumnHeaders are included to resize the cell height, the maximum height will be set as the header row. To overcome this scenario and achieve your use case, we would suggest you, to resize only the cells range by using the below code, 
 
Code example 
 
#region //To reduce the border and text margins   
grid.Appearance.AnyCell.BorderMargins.Top = 0; 
grid.Appearance.AnyCell.BorderMargins.Bottom = 0; 
grid.Appearance.AnyCell.TextMargins.Top = 0; 
grid.Appearance.AnyCell.TextMargins.Bottom = 0; 
#endregion 
 
//To resize the RowHeights and ColumnWidths only based on the cells height 
grid.TableModel.RowHeights.ResizeToFit(grid.TableModel.GridCellsRange); 
grid.TableModel.ColWidths.ResizeToFit(grid.TableModel.GridCellsRange); 
 
Screenshot 
 
 
Note 
 
The InstrumentID column has integer data type values whereas the Market column has values as string. So, the integer values are converted as string and calculated the string height. Based on the calculated height, the XY and position will be calculated to align the content in right. 
 
Regards, 
Arulpriya 


JR James Roodt February 19, 2018 07:24 AM UTC

Good day Arulpriya,

Your suggestion to exclude the Header Rows in the  ResizeToFit has definitely made a big impact as you can see below.
Thank you very much!

Unfortunately I need more.
I assume since the margins are set to zero that the rest of the vertical spacing is part of the font itself?
The last screenshot is what I am aiming for. (maximum data in the minimum of screen real-estate.)
Is there any way we can achieve this? Or at least something close to this?

Regards,
James






AR Arulpriya Ramalingam Syncfusion Team February 20, 2018 06:17 PM UTC

Hi James, 
 
Thanks for your update. 
 
We have analyzed the use case and to update the row heights for column header row also, we would suggest you to, resize the header row and the cells range separately to decrease the cell spacing. Please refer to the below code example, 
 
Code example 
 
//To resize the RowHeights for column header row  
grid.TableModel.RowHeights.ResizeToFit(GridRangeInfo.Cells(grid.TableControl.TopRowIndex - 1, 1, grid.TableControl.TopRowIndex - 1, grid.TableDescriptor.Columns.Count)); 
//To resize the RowHeights for grid table range 
grid.TableModel.RowHeights.ResizeToFit(GridRangeInfo.Cells(grid.TableControl.TopRowIndex,1, grid.Table.Records[1].GetRowIndex(), grid.TableDescriptor.Columns.Count)); 
//To resize the column widths 
grid.TableModel.ColWidths.ResizeToFit(grid.TableModel.ScrollableGridRangeInfo, GridResizeToFitOptions.IncludeHeaders); 
 
Please let us know, if you have concerns on this. 
 
Regards, 
Arulpriya 


JR James Roodt February 21, 2018 09:49 AM UTC

Hi Arulpriya,

Your suggestion made sense and I implemented it as you suggested. (The only change is to check if there is any rows as some grids are defined with no rows in the beginning)

Unfortunately I got exactly the same result as can be seen below under 'New Code result'.
So could these changes are overwritten by something else? (None of my other code stand out though as referring to fontsize or something similar.)
I don't know but is there a way to color the cell background separately from the text background. Maybe we can then see where the 'padding' comes from?

I am more than happy if you want to Skype or do something similar.

Regards,
James


AR Arulpriya Ramalingam Syncfusion Team February 22, 2018 12:42 PM UTC

Hi James, 
 
Thanks for your update. 
 
We checked for the alternative possible cases to achieve your requirement. The idea is to reset the row height of the grid as text rectangle of the cells after resize is done. The TextRectangle can be retrieved from the GridCellLayout by using the GetCellLayout() method. Please refer to the below code, 
 
Code example 
 
private static void ChangeControlFont(GridGroupingControl grid, float fontSize, string fontName) 
{ 
    grid.Appearance.ColumnHeaderCell.Font.Size = fontSize; 
    grid.Appearance.AlternateRecordFieldCell.Font.Size = fontSize; 
    grid.Appearance.RecordFieldCell.Font.Size = fontSize; 
    grid.Appearance.FilterBarCell.Font.Size = fontSize; 
    grid.GridGroupDropArea.Model.BaseStylesMap.Standard.StyleInfo.Font = new GridFontInfo(new Font(fontName, fontSize)); 
    grid.Appearance.AnyCell.TextMargins.Top = 0; 
    grid.Appearance.AnyCell.TextMargins = new GridMarginsInfo(0, 0, 0, 0);  
    //To resize the RowHeights for column header row  
   grid.TableModel.RowHeights.ResizeToFit(GridRangeInfo.Cells(grid.TableControl.TopRowIndex - 1, 1, grid.TableControl.TopRowIndex - 1, grid.TableDescriptor.Columns.Count)); 
    //To resize the RowHeights for grid table range grid.TableModel.RowHeights.ResizeToFit(GridRangeInfo.Cells(grid.TableControl.TopRowIndex,1, grid.Table.Records[1].GetRowIndex(), grid.TableDescriptor.Columns.Count)); 
    //To resize the column widths 
    grid.TableModel.ColWidths.ResizeToFit(grid.TableModel.ScrollableGridRangeInfo, GridResizeToFitOptions.IncludeHeaders); 
 
    //Get the cell renderer of a cell to get the text rectangle of the rows 
    GridTextBoxCellRenderer ren = grid.TableControl.CellRenderers["TextBox"] as GridTextBoxCellRenderer; 
    //To get the cell style 
    GridTableCellStyleInfo style = grid.TableControl.GetTableViewStyleInfo(grid.TableControl.TopRowIndex, 1); 
    //To get the cellLayout 
    GridCellLayout cellLayout = ren.GetCellLayout(grid.TableControl.TopRowIndex, 1, style); 
    //To remove the margins from the text rectangle to reset the row height 
    grid.TableOptions.RecordRowHeight = cellLayout.TextRectangle.Height - 2; 
} 
 
Note 
Please let us know, if still the solution does not meet your requirement. So that, we could create a new support ticket to debug the issue at your end. 
 
Arulpriya 


JR James Roodt February 23, 2018 10:05 AM UTC

Hi Arulpriya,

This is perfect!

As you can see below I have two grids with both using font Size 8. But the bottom one is much more compact.

Thank you very much!
James


SN Sindhu Nagarajan Syncfusion Team February 26, 2018 12:55 PM UTC

Hi James, 
  
Thanks for your update. 
  
We are glad to hear that the provided solution resolved your scenario. Please let us know if you have any other queries. 
  
Regards, 
Sindhu. 


Loader.
Up arrow icon