1. Home
  2. Forum
  3. UWP
  4. TreeGrid column ratios issue

TreeGrid column ratios issue

Hello,

I am having problems with the columnsizer in the TreeGrid, i saw in this article about how to set ratios for columns in a DataGrid:
https://www.syncfusion.com/kb/3079/how-to-customize-star-columnsizer-to-calculate-width-with-different-ratios-in-sfdatagrid

And im trying to make it work on a TreeGrid, but it's not doing it properly.
As we can see in this image, it is leaving a margin at the end (marked as red).
I'm attaching a sample where i was doing the test. In the test the ratios ar hard coded as ones to make the sample more simple, but the problem is the same.
As we can see in the sample, if we expand the nodes, the right margin gets bigger and bigger every time.

Best regards.

Attachment: TreeGridSample_77ccc43f.rar

3 Replies
MK Muthukumar Kalyanasundaram Syncfusion Team April 4, 2017 01:31 PM UTC

Hi Alexandru, 
 
Thank you for contacting Syncfusion support. 
 
We have analyzed your query.  
 
Query 1: “To customize Star ColumnSizer to calculate width with different ratios in SfTreeGrid”  
 
We have analyzed your provided sample. In that, you didn’t calculate the expander column width for SfTreeGrid. We have modified the sample. Could you please refer the modified sample in the below location. 
 
 
Query 2: “If we expand the nodes, the right margin gets bigger and bigger every time” 
 
You can achieve your requirement by disabling the AllowAutoSizingExpanderColumn property as false.  Please refer the below code snippet, 
 
Code Snippet: 
 
<syncfusionTree:SfTreeGrid x:Name="TreeGrid" 
                            ParentPropertyName="Key" 
                            LiveNodeUpdateMode="AllowDataShaping" 
                            ColumnSizer="Star"  
                            AllowAutoSizingExpanderColumn="False" 
                            AllowSorting="False" 
                            AllowResizingColumns="True" /> 
 
 
 
Please let us know if you have any query. 
 
Regards, 
Muthukumar K 


AP Alexandru Pastor Opris April 5, 2017 08:53 AM UTC

Hello,

Maybe I didn't explain myself right in the firts post, when I said column ratio I meant that if we set the weight of a column to 2 it shoud be twice as wide as a column with a weight of 1. 
The sample you provided didnt have in account the weight/ratio of the columns the way I needed, the new sample I'm attaching has de weight/ratio declared for every column I hope this will help with the resolution of this issue.


As we can see in this image the weight is working right, it just doesn't fill the tree grid until the end, and that is the problem i want to resolve.


In this second image we can observe, if we manually resize any column everything fits right until the end, even if we expand or collapse the rows.

If I add the property:
  • AllowAutoSizingExpanderColumn="False"
The column manual resize becomes unprecise and jumpy.

Also here's a quick video showing the issue:



Regards.

Attachment: TreeGridSample(1)_b0a8f91f.rar

MK Muthukumar Kalyanasundaram Syncfusion Team April 7, 2017 04:12 AM UTC

Hi Alexandru, 
 
Thanks for the update. 
 
Query 1: 
“The weight of a column is working right, it just doesn't fill the tree grid until the end“ 
 
 
We have checked your provided sample. In that, you didn’t calculate the width for ExpanderColumn in SfTreeGrid. If you want to avoid the space in right side of tree grid, you must calculate the width for expander column in tree grid. After adding the expander column width, the remaining column width will be equally divided. In the below attached sample, we have calculated the width based on the ratio of column and expander column. The expander column width are highlighted in the below code, could you please refer to it. 
 
Code Snippet: 
 
protected override void SetStarWidth(double remainingColumnWidth, IEnumerable<TreeGridColumn> remainingColumns) 
{ 
    var removedColumn = new List<TreeGridColumn>(); 
    var columns = remainingColumns.ToList();           
    double expanderColumnWidth = TreeGrid.View != null ? ((TreeGrid.View.Nodes.MaxLevel + 1) * ExpanderWidth + 2) : 0; 
    if (TreeGrid.ShowCheckBox) 
        expanderColumnWidth += CheckBoxWidth + 1; 
    var totalRemainingStarValue = remainingColumnWidth; 
 
    double removedWidth = 0; 
    bool isremoved; 
    while (columns.Count > 0) 
    { 
        isremoved = false; 
        removedWidth = 0; 
        var columnsCount = 0; 
 
        foreach (var data in columns) 
        { 
            columnsCount += ((VTreeGridTemplateColumn)data).Weight; 
        } 
        double starWidth = Math.Floor((totalRemainingStarValue / columnsCount)); 
        var column = columns.First(); 
 
        starWidth *= ((VTreeGridTemplateColumn)column).Weight; 
        double computedWidth = SetColumnWidth(column, starWidth); 
        if (starWidth != computedWidth && starWidth > 0) 
        { 
            isremoved = true; 
            columns.Remove(column); 
            foreach (var remColumn in removedColumn) 
            { 
                if (!columns.Contains(remColumn)) 
                { 
                    removedWidth += remColumn.ActualWidth; 
                    if (remColumn == GetExpanderColumn()) 
                        removedWidth -= expanderColumnWidth; 
                    columns.Add(remColumn); 
                } 
            } 
            removedColumn.Clear(); 
            totalRemainingStarValue += removedWidth; 
        } 
 
        totalRemainingStarValue = totalRemainingStarValue - computedWidth; 
        if (column == GetExpanderColumn()) 
            totalRemainingStarValue = totalRemainingStarValue + expanderColumnWidth; 
        if (!isremoved) 
        { 
            columns.Remove(column); 
            if (!removedColumn.Contains(column)) 
                removedColumn.Add(column); 
        } 
    }            
} 
 
 
 
Query 2:  
“If we manually resize any column everything fits right until the end, even if we expand or collapse the rows” 
 
 
When you load the tree grid with Star ColumnSizer, it will divides the width equally for all the columns. If you manually resize any column, the resize width will be set to that column and then remaining width will be equally divided to remaining column.  
 
 
Query 3: 
The column manual resize becomes unprecise and jumpy. When you set the AllowAutoSizingExpanderColumn as False  
 
 
 
We are unable to reproduce the reported “AllowAutoSizingExpanderColumn as false, the column will unprecise and jumpy” in our end. The AllowAutoSizingExpanderColumn property is used for disabling the width of expander column when you expand and collapse the node. For your reference, we have attached the sample and documentation link in below location.  
 
If you are still facing the issue, could you please revert by modifying the attached sample based on your application along with the replication procedure? This would be helpful for us to provide an appropriate solution.  
 
 
 
Please let us know if you have any query. 
 
Regards, 
Muthukumar K 


Loader.
Up arrow icon