DashboardLayout allows you to set the layout type to grid layout using its LayoutType property of C1DashboardLayout class. When you set the layout type to Grid, the grid layout gets attached to the DashboardLayout control. The grid layout divides the C1DashboardLayout container into rows and columns. By default, there are three columns and two rows in the grid layout. However, you can increase the column and row count using the ColumnCount and RowCount properties of the TableLayoutPanel class.

In grid layout, any control you drag on the DashboardLayout control is placed in one of the cells. As soon as you drag a control, a child container of type Panel gets created to hold the control. By default, this child container is not docked in the cell, but you can dock the child container to occupy the complete space of the cell. When all the cells in the grid are occupied and a new control is dragged then the layout expands. It either adds a new row/column depending on the GrowStyle property to accommodate the control. The GrowStyle property accepts one of the following values from the TableLayoutPanelGrowStyle enumeration:

• AddRows : Adds new row to accommodate the control
• AddColumns: Adds new column to accommodate the control
• FixedSize: Does not allow adding a new row or column. Therefore, the row count and column count is not altered and the new control does not get added.  An attempt to add another control throws an exception.

By default, grid layout expands to add new rows. Moreover, this layout also supports cell merging, wherein a child container can span multiple rows and columns. The cell merging is enabled by setting the RowSpan and ColumnSpan properties of the child container available in the designer.

The grid layout can be accessed by using the GridLayoutControl property of the C1DashboradLayout class. This property returns an instance of the TableLayoutPanel class. This instance is further used to set the properties of grid layout as illustrated in the following code:

_gridLayout.LayoutType = LayoutType.Grid;
_gridLayout.Items.Add("Child Container1", new List<Control>() 
        { new Label() { Size=new System.Drawing.Size(300,200),Text = "Global Logistics",
        Font = new System.Drawing.Font("Arial",18,System.Drawing.FontStyle.Bold) } } );
_gridLayout.Items.Add("Child Container2", new List<Control>()
        { new FlexPie() { DataSource = _dataSet, DataMember="Table2", 
        Binding = "CategorySales", BindingName = "CategoryName", Dock = DockStyle.Fill } });
_gridLayout.SetCaption(_gridLayout.Items[1].ItemContainer, "Category Sales");
_gridLayout.Items.Add("Child Container3", new List<Control>() 
        { new C1FlexGrid() { DataSource = _dataSet,DataMember="Table1", Dock = DockStyle.Fill } });
_gridLayout.SetCaption(_gridLayout.Items[2].ItemContainer, "Sales by category");
        
//setting the properties of grid layout
_gridLayout.GridLayoutControl.GrowStyle = TableLayoutPanelGrowStyle.AddRows;

//accessing the child containers with the help of Items property of C1DashboardLayout
((Panel)(_gridLayout.Items["Child Container1"].ItemContainer)).Size = new System.Drawing.Size(500, 400);
((Panel)(_gridLayout.Items["Child Container2"].ItemContainer)).Size = new System.Drawing.Size(500, 400);
((Panel)(_gridLayout.Items["Child Container3"].ItemContainer)).Size = new System.Drawing.Size(500, 400);

Grid Layout Smart Tag

In grid layout, the control provides you with a smart tag using which you can easily perform the following actions:

• Add Column: Allows you to add column in the grid layout
• Add Row: Allows you to add rows in the grid layout
• Remove Last Column: Removes the last column
• Remove Last Row: Removes the last row
• Edit Rows and Columns: Opens "Column and Row Styles" window that lets you set the size of individual rows and columns. It allows you to set the size of a row or column in one of the following ways:
  • Absolute: In an absolute number of pixels
  • Percentage: As a percentage of the parent container
  • AutoSize: Sizes the row or column to fit its contents (rows or columns)

Row and Column Sizing

Dashboard also allows you to set the row and column sizes in code using RowStyles and ColumnStyles properties of the TableLayoutPanel class. When the grid layout arranges its rows/columns, it assigns priorities to RowStyles or ColumnStyles for each row or column in the following order:

• First priority is given to the rows or columns with RowStyles or ColumnStyles set to Absolute, and their fixed heights or widths are allocated.
• Then, rows or columns with RowStyles or ColumnStyles set to AutoSize are sized to their contents.
• Remaining space is divided among rows or columns with RowStyles or ColumnStyles set to Percent.

The rows and columns can be resized using the resize handle in the form designer.

Kindly refer to the TableLayoutPanel class for exploring other properties of grid layout.