Rows and Columns

The FlexGrid control is made up of six GridPanel elements.

Each panel has a collection of rows and columns. Rows and columns have properties that define what should be displayed in each cell of each panel.

Specifically, Row objects have a dataItem property that determines the object the row is bound to, and Column objects have a binding property that determines which property of the data item should be displayed in the cell.

In most of the situations, you can simply use rows and columns properties of the grid, which refer to the row and column collections of the cells panel.

But there are situations where you will need the properties of specific panels. For example, to create a multi-row column header, multi-column row header, or to add rows to the group footer panel.

The collections of rows and columns are shared by the panels as follows:

Header Columns: The three panels on the left of the grid share a collection of 'header' columns:

// header columns on the left of the grid
grid.topLeftCells.columns ==
grid.rowHeaders.columns ==
grid.bottomLeftCells.columns;

Scrollable Columns: The three panels on the right of the grid share a collection of 'scrollable' columns:

// scrollable columns on the right of the grid
grid.columnHeaders.columns ==
grid.cells.columns ==
grid.columnFooters.columns ==
grid.columns; // ** default columns collection

Header Rows: The two panels along the top of the grid share a collection of 'header' rows:

// header rows along the top of the grid
grid.topLeftCells.rows ==
grid.columnHeaders.rows;

Scrollable Rows: The two panels along the middle of the grid share a collection of 'scrollable' rows:

// scrollable rows along the middle of the grid
grid.rowHeaders.rows ==
grid.cells.rows ==
grid.rows; // ** default rows collection

Footer Rows: The two panels along the bottom of the grid share a collection of 'footer' rows:

// footer rows along the bottom of the grid
grid.bottomLeftCells.rows ==
grid.columnFooters.rows;

// This file locates: "Scripts/Lesson/C1FlexGrid/RowsColumns.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: RowsColumns
        public ActionResult RowsColumns()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text3)
</p>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text4)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text5)
</p>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text6)
</p>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text7)
</p>
<pre>// header columns on the left of the grid
grid.topLeftCells.columns ==
grid.rowHeaders.columns ==
grid.bottomLeftCells.columns;</pre>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text8)
</p>
<pre>// scrollable columns on the right of the grid
grid.columnHeaders.columns ==
grid.cells.columns ==
grid.columnFooters.columns ==
grid.columns; // ** default columns collection</pre>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text9)
</p>
<pre>// header rows along the top of the grid
grid.topLeftCells.rows ==
grid.columnHeaders.rows;</pre>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text10)
</p>
<pre>// scrollable rows along the middle of the grid
grid.rowHeaders.rows ==
grid.cells.rows ==
grid.rows; // ** default rows collection </pre>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.RowsColumns_Text11)
</p>
<pre>// footer rows along the bottom of the grid
grid.bottomLeftCells.rows ==
grid.columnFooters.rows;</pre>