Trying to Add Multiple SFDataGrids inside of a UIStackView

[Patrick Burrows]

I am trying to use multiple SFDataGrids within a UIStackView. Each grid should be separated by a UILabel. Essentially, I am implementing a 3rd level of specially formatted grouping.

Here is how I define the UIStackView:

var width = (View.Bounds.Width / 12) * 9;
var left = ((View.Bounds.Width/12)*3) + 20;
_bodyStackView = new UIStackView(new CGRect(left, 110, width, View.Bounds.Height - 110));
_bodyStackView.Axis = UILayoutConstraintAxis.Vertical;

Here is how I define the SFDataGrid:

private SfDataGrid GetGrid()
    {
        SfDataGrid grid = new SfDataGrid();
        grid.SelectionMode = SelectionMode.None;
        grid.AutoGeneratingColumn += GridAutoGenerateColumns;
        grid.GridStyle.AlternatingRowColor = UIColor.FromRGB(245, 245, 245);
        grid.GroupCaptionTextFormat = "{Key} ({ItemsCount})";
        grid.GroupColumnDescriptions.Add(new GroupColumnDescription() { ColumnName = "Category" });
        grid.ShowRowHeader = false;
        grid.HeaderRowHeight = 45;
        grid.RowHeight = 45;
        return grid;
    }

Here is how I define the label:

private UILabel GetHeaderLabel(string text)
    {
        var label = new UILabel();
        label.Text = text;
        label.TextColor = TextColor;
        label.Font = UIFont.FromName("Helvetica", 18);
        label.HeightAnchor.ConstraintEqualTo(30).Active = true;
        return label;
    }

Each item is added to the uiStackView by calling AddArrangedSubview. The items are called in this order:

AddArrangedSubview(label1)
AddArrangedSubview(grid1)
AddArrangedSubview(label2)
AddArrangedSubview(grid2)
AddArrangedSubview(label3)
AddArrangedSubview(grid4)
etc...

Here is what the results look like: The labels are spaced correctly, but the grids all run one right on top of the other without leaving space for the labels, or even the rows in the grid! (only the bottom grid's rows are showing in the screenshot, yet all grids have rows).

[Divakar Subramaniam]

Hi Patrick,

Thank you for using Syncfusion Products.

We have checked your query. The default distribution for a UIStackView is fill. Thus when you load a custom component inside the stack the custom component will try and occupy the entire available space based on given Frame. This is why the third grid got rendered fully inside the UIStackView.  

  

Thus in order to load SfDataGrid inside the UIStackView, you need to give the “Distribution” as “EqualSpacing” or “FillEqually” and you have to explicitly set an height constraint for the grid using the HeightAnchor property.  

Please refer the below code example which is modified based on the above points. 

 

stackView.Axis = UILayoutConstraintAxis.Vertical; 

stackView.Distribution = UIStackViewDistribution.EqualSpacing; 

 

UILabel label1 = new UILabel(); 

label1 = GetHeaderLabel("Label1"); 

                                                                                           

SfDataGrid grid1 = new SfDataGrid(); 

grid1 = GetGrid(); 

grid1.HeightAnchor.ConstraintEqualTo(300).Active = true; 

 

UILabel label2 = new UILabel(); 

label2 = GetHeaderLabel("Label2"); 

 

SfDataGrid grid2 = new SfDataGrid(); 

grid2 = GetGrid(); 

grid2.HeightAnchor.ConstraintEqualTo(300).Active = true; 

 

stackView.AddArrangedSubview(label1); 

stackView.AddArrangedSubview(grid1); 

stackView.AddArrangedSubview(label2); 

stackView.AddArrangedSubview(grid2); 

 

                         

 

We have also prepared a sample based on your code and have modified to get it working. You can download the sample from the below link for your reference.  

Sample link: http://www.syncfusion.com/downloads/support/forum/125319/ze/GridsInStackView-1864594181  

 

Regards, 

Divakar