We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trying to Add Multiple SFDataGrids inside of a UIStackView

Thread ID:





125319 Aug 8,2016 04:14 PM UTC Aug 9,2016 02:20 PM UTC Xamarin.iOS 1
Tags: SfDataGrid
Patrick Burrows
Asked On August 8, 2016 04:14 PM UTC

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:


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 [Syncfusion]
Replied On August 9, 2016 02:20 PM UTC

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; 
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.  





This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon