Column Collections

The FlexGrid control has two sets of columns:

  • Fixed Columns This collection contains the columns on the left of the grid. It is used by the topLeftCells and rowHeaders panels. By default, this collection contains only one column.
  • Scrollable Columns This collection contains the main set of columns. It is used by the cells, columnHeaders, and columnFooters panels.

Both of these collections are objects of ColumnCollection class, which extend regular arrays. You may add or remove columns by adding or removing Column objects from these arrays.

For example, the grid below has an extra fixed column and automatically-generated scrollable columns:

Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35

And this grid has no fixed columns and a custom set of scrollable columns:

Country
Sales
Expenses
US
81,732.54
38,401.13
Germany
20,603.32
27,944.24
UK
44,217.79
48,877.49
Japan
29,190.63
23,365.74
Italy
46,951.19
49,107.56
Greece
86,237.02
49,767.35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// This file locates: "Scripts/Lesson/C1FlexGrid/Columns.js".
c1.documentReady(function () {
    var cv = c1.getService("collectionView");
 
    // grid with extra fixed column and auto-generated scrollable columns
    var theFirstGrid = wijmo.Control.getControl('#theFirstGrid');
    theFirstGrid.rowHeaders.columns.push(new wijmo.grid.Column); // extra fixed column
    theFirstGrid.itemsSource = cv.items; // auto-generate scrollable columns
 
    // grid with no fixed columns and custom scrollable columns
    var theSecondGrid = wijmo.Control.getControl('#theSecondGrid');
    theSecondGrid.rowHeaders.columns.splice(0, 1); // no extra columns
    theSecondGrid.autoGenerateColumns = false; // custom scrollable columns
    theSecondGrid.itemsSource = cv.items;
    var cols = theSecondGrid.columns;
    cols.push(new wijmo.grid.Column({ binding: 'Country', header: 'Country' }));
    cols.push(new wijmo.grid.Column({ binding: 'Sales', header: 'Sales' }));
    cols.push(new wijmo.grid.Column({ binding: 'Expenses', header: 'Expenses' }));
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: Columns
        public ActionResult Columns()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Columns_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Columns_Text1)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexGrid.Columns_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.Columns_Text3)
    </li>
</ul>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.Columns_Text4)
</p>
 
@Html.C1().CollectionViewService().Id("collectionView").Bind(Model)
 
<p>
    @Html.Raw(Resources.C1FlexGrid.Columns_Text5)
</p>
@Html.C1().FlexGrid().Id("theFirstGrid").Height(150)
 
<p>
    @Html.Raw(Resources.C1FlexGrid.Columns_Text6)
</p>
@Html.C1().FlexGrid().Id("theSecondGrid").Height(150)