Grid Panels

The FlexGrid control is made up of six GridPanel elements:

topLeftCells: Panel on the left of the column headers, typically containing a single empty cell that can be clicked to select the whole grid content. This panel does not scroll.
columnHeaders: Panel above the data cells, typically containing a single row with cells that can be clicked to sort the grid or dragged to resize or re-arrange the columns. This panel scrolls horizontally.
rowHeaders: Panel on the left of the data cells, typically containing a single column that can be clicked to select rows and that displays icons for rows being edited or added. This panel scrolls vertically.
cells: Panel that contains the data cells. Users can select cells by clicking and dragging on this panel or by using the keyboard. This panel scrolls horizontally and vertically.
bottomLeftCells: Panel to the left of the column footers. By default, this panel contains no rows and therefore is not visible.
columnFooters: Panel below the data cells, typically used to show column summary information. By default, this panel contains no rows and therefore is not visible.

Although these panels are synchronized so that they remain aligned with each other when the grid scrolls, each one has its own set of properties that can be used to customize the specific areas of the grid.

Move the mouse over the grid below to see each panel and hit-test information of the cell being hovered:

Country

Active

Downloads (K)

Sales (K)

Expenses (K)

145,248

81,732.54

38,401.13

Germany

111,632

20,603.32

27,944.24

181,205

44,217.79

48,877.49

Japan

54,740

29,190.63

23,365.74

Italy

126,531

46,951.19

49,107.56

Greece

6,073

86,237.02

49,767.35

Notice the columnFooters panel at the bottom of the grid. This panel is empty by default, but we have added a GroupRow to the same. The GroupRow automatically shows aggregate values for each cell calculated based on the value of the column's aggregate property, which in this example is set to 'Sum'.

You can use the headersVisibility property to select which header panels should be visible:

// This file locates: "Scripts/Lesson/C1FlexGrid/GridPanels.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // add a footer row to show all panels
    theGrid.columnFooters.rows.push(new wijmo.grid.GroupRow());
    theGrid.bottomLeftCells.setCellData(0, 0, 'Σ');
 
    // use tooltip to show hit-test information
    var tt = new wijmo.Tooltip();
    var tip = '';
    theGrid.hostElement.addEventListener('mousemove', function (e) {
        var ht = theGrid.hitTest(e);
        if (ht.panel) {
            var newTip = wijmo.format('cellType: <b>{panel}</b><br/>row: <b>{row}</b><br/>column: <b>{col}</b><br>value: <b>{val}</b>', {
                panel: wijmo.grid.CellType[ht.cellType],
                row: ht.row,
                col: ht.col,
                val: ht.panel.getCellData(ht.row, ht.col, true)
            });
            if (newTip != tip) {
                tip = newTip;
                tt.show(ht.panel.hostElement.parentElement, tip, ht.panel.getCellBoundingRect(ht.row, ht.col));
            }
        } else {
            tt.hide();
            tip = '';
        }
    });
    theGrid.hostElement.addEventListener('mouseleave', function () {
        tt.hide();
        tip = '';
    })
 
    // show the effect of the headersVisibility property
    var headersVisibility = wijmo.Control.getControl('#headersVisibility');
    headersVisibility.selectedIndexChanged.addHandler(function (s, e) {
        theGrid.headersVisibility = s.text;
    });
 
    // add a 'grid-panel' class to all grid panel hosts
    var panels = 'topLeftCells,columnHeaders,rowHeaders,cells,bottomLeftCells,columnFooters'.split(',');
    panels.forEach(function (p) {
        theGrid[p].hostElement.parentElement.classList.add('grid-panel');
    });
});

// This file locates: "Content/css/Lesson/C1FlexGrid/GridPanels.css".
/* highlight GridPanel under the mouse */
.wj-flexgrid .grid-panel:hover .wj-cell:not(.wj-state-selected):not(.wj-state-multi-selected) {
  background: rgba(255, 125, 0, .8) !important;
  transition: all 600ms;
}

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

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.GridPanels_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.GridPanels_Text1)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexGrid.GridPanels_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.GridPanels_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.GridPanels_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.GridPanels_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.GridPanels_Text6)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.GridPanels_Text7)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1FlexGrid.GridPanels_Text8)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.GridPanels_Text9)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .ShowAlternatingRows(false)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID");
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Active").Header("Active").Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum);
        cs.Add().Binding("Downloads").Header("Downloads (K)").Format("n0").Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum);
        cs.Add().Binding("Sales").Header("Sales (K)").Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum);
        cs.Add().Binding("Expenses").Header("Expenses (K)").Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum);
    })
)
 
<p>
    @Html.Raw(Resources.C1FlexGrid.GridPanels_Text10)
</p>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.GridPanels_Text11)
</p>
@(Html.C1().ComboBox().Id("headersVisibility")
    .Bind(new[] { "None", "Row", "Column", "All" })
    .Text("All")
)