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.
Unfortunately, activation email could not send to your email. Please try again.

Trying to Add Multiple SFDataGrids inside of a UIStackView

Thread ID:

Created:

Updated:

Platform:

Replies:

125319 Aug 8,2016 12:14 PM Aug 9,2016 10:20 AM Xamarin.iOS 1
loading
Tags: SfDataGrid
Patrick Burrows
Asked On August 8, 2016 12:14 PM

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 [Syncfusion]
Replied On August 9, 2016 10:20 AM

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.  

 

Regards, 

Divakar
 


CONFIRMATION

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.

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.

;