Getting Started
Steps for getting started with the FlexGrid control in MVC applications:
- Create a new ASP.NET Core MVC project using the "C1 ASP.NET Core MVC Web Application" template.
- Add controller and corresponding view to the project.
- Initialize the C1 FlexGrid control in view using <c1-flex-grid></c1-flex-grid> tag.
- (Optional) Add some CSS to customize the FlexGrid control's appearance.
This will create a FlexGrid with default behavior, which includes
automatic column generation, column sorting and reordering, editing,
and clipboard support.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- this is the grid -->
<c1-flex-grid id="gsFlexGrid"
is-read-only="true"
auto-generate-columns="true"
allow-sorting="true">
<c1-items-source source-collection="@Model.CountryData"></c1-items-source>
</c1-flex-grid>
</body>
</html>
/* set default grid style */
.wj-flexgrid {
height: 300px;
background-color: white;
box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
margin-bottom: 12px;
}
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
namespace FlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
FlexGridModel model = new FlexGridModel();
model.CountryData = Sale.GetData(500);
return View(model);
}
}
}
Column Definitions
The Getting Started example did not define any columns, so FlexGrid generated them
automatically.
This example shows how you can define the columns using the FlexGrid's <c1-flex-grid-column></c1-flex-grid-column> tag.
Specifying the columns allows you to choose which columns to show, and in what order.
This also gives you control over each column's Width, Heading, Formatting, Alignment,
and other properties.
In this case, we use star sizing to set the width of the "Country" column. This tells the
column to stretch to fill the available width of the grid so there is no empty space. On
the "Amount" column, we set the format property to "n0", which results in numbers with thousand separators and no decimal digits. On
the "Discount" column, we set the format property to "p0", which results in numbers with
percentage and no decimal digits.
<c1-flex-grid id="cdInitMethod"
is-read-only="true"
auto-generate-columns="false"
allow-sorting="true">
<c1-flex-grid-column binding="ID"></c1-flex-grid-column>
<c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
<c1-flex-grid-column binding="End" format="HH:mm"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="n0"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount2"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active"></c1-flex-grid-column>
<c1-items-source source-collection="@Model.CountryData"></c1-items-source>
</c1-flex-grid>
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
namespace FlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
FlexGridModel model = new FlexGridModel();
model.CountryData = Sale.GetData(500);
return View(model);
}
}
}
Selection Modes
By default, FlexGrid allows you to select a range of cells with the mouse or keyboard,
just like Excel. The selection-mode property allows you to change that so that you
can select a Row, a Range of Rows, Non-Contiguous Rows (like in a List-Box), a Single Cell, a Range of Cells
or disable selection altogether.
This example allows you to pick the selection-mode from a Wijmo ComboBox control.
<c1-flex-grid id="smFlexGrid"
is-read-only="true"
auto-generate-columns="false"
allow-sorting="true">
<c1-flex-grid-column binding="ID"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="n0" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" format="p0" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active" width="*"></c1-flex-grid-column>
<c1-items-source source-collection="@Model.CountryData"></c1-items-source>
</c1-flex-grid>
<br />Selection Mode
<c1-combo-box id="smMenu" selected-index="0" selected-index-changed="smMenu_SelectedIndexChanged">
<c1-items-source source-collection="@Model.Settings["SelectionMode"]"></c1-items-source>
</c1-combo-box>
var smFlexGrid = smMenu = null;
$(document).ready(function () {
//Selection Modes Modules
smFlexGrid = wijmo.Control.getControl("#smFlexGrid");
});
//Selection Modes Modules
function smMenu_SelectedIndexChanged(sender){
if(sender.selectedValue!=null && smFlexGrid!=null){
smFlexGrid.selectionMode = sender.selectedValue;
}
}
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
namespace FlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
FlexGridModel model = new FlexGridModel();
model.Settings = CreateSettings();
model.CountryData = Sale.GetData(500);
return View(model);
}
private IDictionary CreateSettings()
{
var settings = new Dictionary
{
{"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Cell.ToString(),SelectionMode.CellRange.ToString(),SelectionMode.Row.ToString(),SelectionMode.RowRange.ToString(),SelectionMode.ListBox.ToString()}}
};
return settings;
}
}
}
Result (live):
Selection Mode
Editing
FlexGrid has built-in support for fast, in-cell editing like you find in Excel. There is no
need to add extra columns with Edit buttons that switch between display and edit modes.
Users can start editing by typing into any cell. This puts the cell in quick-edit mode.
In this mode, pressing a cursor key finishes the editing and moves the selection to a different cell.
Another way to start editing is by pressing F2 or by clicking a cell twice. This puts the cell in
full-edit mode. In this mode, pressing a cursor key moves the caret within the cell text.
To finish editing and move to another cell, the user must press the Enter, Tab, or Escape key.
Data is automatically coerced to the proper type when editing finishes. If the user enters invalid
data, the edit is cancelled and the original data remains in place.
You can disable editing at the Grid, Column, or Row levels using the is-read-only property of the
Grid, Column, or Row objects. In this example, we make the ID and Country columns read-only.
<c1-flex-grid id="eFlexGrid"
auto-generate-columns="false"
allow-sorting="true">
<c1-flex-grid-column binding="ID" is-read-only="true"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="n0" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" format="p0" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active" width="*"></c1-flex-grid-column>
<c1-items-source read-action-url="@Url.Action("GridRead")" update-action-url="@Url.Action("EGridUpdate")"></c1-items-source>
</c1-flex-grid>
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
namespace FlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult GridRead([C1JsonRequest] CollectionViewRequest<Sale> requestData)
{
return this.C1Json(CollectionViewHelper.Read(requestData, FlexGridModel.Source));
}
public ActionResult EGridUpdate([C1JsonRequest]CollectionViewEditRequest<Sale> requestData)
{
return this.C1Json(CollectionViewHelper.Edit(requestData, sale =>
{
string error = string.Empty;
bool success = true;
var fSale = FlexGridModel.Source.Find(item => item.ID == sale.ID);
fSale.Amount = sale.Amount;
fSale.Discount = sale.Discount;
fSale.Active = sale.Active;
return new CollectionViewItemResult<Sale>
{
Error = error,
Success = success,
Data = fSale
};
}, () => FlexGridModel.Source));
}
}
}
Grouping
FlexGrid supports grouping through the ICollectionView interface, which is identical to the
one in .NET. To enable grouping, add one or more GroupDescription objects to the
CollectionView.groupDescriptions property, and ensure that the grid's show-groups property
is set to true (the default value).
GroupDescription objects are flexible, allowing you to group data based on value or on grouping
functions. The example below groups dates by year; amounts by range returning three ranges: over 5,000,
1,000 to 5,000, 500 to 1,000, and under 500; and anything else by value. Use the menu to see the effects of each grouping.
Notice that the "Amount" column displays the totals in the group rows. We do this by
setting the column's aggregate property to "C1.Web.Mvc.Grid.Aggregate.Sum". The aggregate is automatically
updated when you edit the values in the column.
<c1-flex-grid id="gFlexGrid"
auto-generate-columns="false"
allow-sorting="true" group-by="Country">
<c1-flex-grid-column binding="Country" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Color" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Start" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="n0" aggregate="Sum" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Active" width="*"></c1-flex-grid-column>
<c1-items-source source-collection="@Model.CountryData"></c1-items-source>
</c1-flex-grid>
<br />Group By
<c1-combo-box id="gMenu" selected-index="0" selected-index-changed="gMenu_SelectedIndexChanged">
<c1-items-source source-collection="@Model.Settings["GroupBy"]"></c1-items-source>
</c1-combo-box>
//Group By Modules
function gMenu_SelectedIndexChanged(sender) {
var grid = wijmo.Control.getControl("#gFlexGrid");
if (sender.selectedValue && grid) {
var name = sender.selectedValue;
var groupDescriptions = grid.collectionView.groupDescriptions;
grid.beginUpdate();
groupDescriptions.clear();
if (name.indexOf("Country") > -1) {
groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Country"));
}
if (name.indexOf("Product") > -1) {
groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Product"));
}
if (name.indexOf("Color") > -1) {
groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Color"));
}
if (name.indexOf("Start") > -1) {
groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Start", function (item, prop) {
var value = item[prop];
return value.getFullYear() + "/" + value.getMonth();
}));
}
if (name.indexOf("Amount") > -1) {
groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Amount", function (item, prop) {
var value = item[prop];
if (value <= 500) {
return "<500";
}
if (value > 500 && value <= 1000) {
return "500 to 1000";
}
if (value > 1000 && value <= 5000) {
return "1000 to 5000";
}
return "More than 5000";
}));
}
grid.endUpdate();
}
}
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
namespace FlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
FlexGridModel model = new FlexGridModel();
model.Settings = CreateSettings();
model.CountryData = Sale.GetData(500);
return View(model);
}
private IDictionary CreateSettings()
{
var settings = new Dictionary
{
{"GroupBy", new object[]{"Country", "Product", "Color","Start","Amount","Country and Product","Product and Color", "None"}}
};
return settings;
}
}
}
Filtering
The FlexGrid supports filtering through the <c1-flex-grid-filter></c1-flex-grid-filter> tag. To enable filtering, add the <c1-flex-grid-filter default-filter-type="C1.Web.Mvc.FilterType.Both"></c1-flex-grid-filter> tag within <c1-flex-grid></c1-flex-grid> tag.
In this example, we create a filter for the ID, Country, Product, Color, Start and get the filter value from the input control.
<c1-flex-grid id="fFlexGrid"
auto-generate-columns="false"
is-read-only="true"
allow-sorting="true">
<c1-flex-grid-column binding="ID"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Color"></c1-flex-grid-column>
<c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
<c1-items-source source-collection="@Model.CountryData"></c1-items-source>
<c1-flex-grid-filter default-filter-type="Both">
<c1-flex-grid-column-filter column="ID" filter-type="FilterType.Condition"></c1-flex-grid-column-filter>
<c1-flex-grid-column-filter column="Country" filter-type="FilterType.Value"></c1-flex-grid-column-filter>
<c1-flex-grid-column-filter column="Product" filter-type="FilterType.None"></c1-flex-grid-column-filter>
<c1-flex-grid-column-filter column="Color" filter-type="FilterType.Both"></c1-flex-grid-column-filter>
<c1-flex-grid-column-filter column="Start" filter-type="FilterType.Both"></c1-flex-grid-column-filter>
</c1-flex-grid-filter>
</c1-flex-grid>
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
namespace FlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
FlexGridModel model = new FlexGridModel();
model.CountryData = Sale.GetData(500);
return View(model);
}
}
}
Paging
The FlexGrid supports paging through the <c1-pager owner="pFlexGrid"></c1-pager> tag.
To enable paging, set the page-size atrribute of <c1-items-source> to the number
of items you want on each page, and use Pager control to bind this FlexGrid.
In this example, we set PageSize to show 10 items per page. We add Pager control and set owner attribute to the FlexGrid id,
then we can switch pages.
<c1-flex-grid id="pFlexGrid"
auto-generate-columns="false"
is-read-only="true"
allow-sorting="true"
height="100%">
<c1-flex-grid-column binding="ID"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Color"></c1-flex-grid-column>
<c1-flex-grid-column binding="Start" format="MMM d yy"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
<c1-items-source source-collection="@Model.CountryData" page-size="10"></c1-items-source>
</c1-flex-grid>
<c1-pager owner="pFlexGrid"></c1-pager>
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
namespace FlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
FlexGridModel model = new FlexGridModel();
model.CountryData = Sale.GetData(500);
return View(model);
}
}
}
Conditional Styling
FlexGrid has an item-formatter property that gives you complete control over
the contents of the cells.
This example uses a JavaScript function to create value ranges that return named
colors. We then call this function in the FlexGrid's item-formatter and pass the cell's data
in order to conditionally set the cell's foreground color.
<c1-flex-grid id="csFlexGrid"
auto-generate-columns="false"
is-read-only="true"
allow-sorting="true"
item-formatter="csFlexGrid_ItemFormatter">
<c1-flex-grid-column binding="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="n0"></c1-flex-grid-column>
<c1-items-source source-collection="@Model.CountryData"></c1-items-source>
</c1-flex-grid>
//Conditional styling Modules
function csFlexGrid_ItemFormatter(panel, r, c, cell) {
if (wijmo.grid.CellType.Cell == panel.cellType && panel.columns[c].binding == '_Color') {
var cellData = panel.getCellData(r, c);
cell.style.color = cellData < 0 ? 'red' : cellData < 500 ? 'black' : 'green';
}
if (wijmo.grid.CellType.Cell == panel.cellType && panel.columns[c].binding == 'Amount') {
var cellData = panel.getCellData(r, c);
cell.style.color = cellData < 0 ? 'red' : cellData < 500 ? 'black' : 'green';
}
if (wijmo.grid.CellType.Cell == panel.cellType && panel.columns[c].binding == 'Discount') {
var cellData = panel.getCellData(r, c);
cell.style.color = cellData < .1 ? 'red' : cellData < .2 ? 'black' : 'green';
}
}
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
namespace FlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
FlexGridModel model = new FlexGridModel();
model.CountryData = Sale.GetData(500);
return View(model);
}
}
}
Themes
The appearance of the FlexGrid is defined in CSS. In addition to the default theme, we
include about a dozen professionally designed themes that customize the appearance of
all Wijmo controls to achieve a consistent, attractive look.
You can customize the appearance of the grid using CSS. To do this, copy CSS rules
from the default theme to a new CSS file and modify the style attributes you want to change.
In this example, we add a "custom-flex-grid" class to the grid element by using class property and define some
CSS rules to create a simple "black and white, no borders" theme for any grids that
have the "custom-flex-grid" class.
<c1-flex-grid id="tFlexGrid"
auto-generate-columns="false"
is-read-only="true"
allow-sorting="true"
class="custom-flex-grid">
<c1-flex-grid-column binding="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="n0"></c1-flex-grid-column>
<c1-items-source source-collection="@Model.CountryData"></c1-items-source>
</c1-flex-grid>
/* create a 'custom-flex-grid' theme for the FlexGrid */
.custom-flex-grid .wj-header.wj-cell {
color: #fff;
background-color: #000;
border-bottom: solid 1px #404040;
border-right: solid 1px #404040;
font-weight: bold;
}
.custom-flex-grid .wj-cell {
background-color: #fff;
border: none;
}
.custom-flex-grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
background-color: #fff;
}
.custom-flex-grid .wj-state-selected {
background: #000;
color: #fff;
}
.custom-flex-grid .wj-state-multi-selected {
background: #222;
color: #fff;
}
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
namespace ASPNetMVCFlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
FlexGridModel model = new FlexGridModel();
model.CountryData = Sale.GetData(500);
return View(model);
}
}
}
Trees and Hierarchical Data
In addition to grouping, FlexGrid supports hierarchical data, that is, data with items
that have lists of subitems. This type of hierarchical structure is very common, and is
usually displayed in a tree-view control.
To use FlexGrid with hierarchical data sources, set the child-items-path property
to the name of the data element that contains the child elements. The grid automatically
scans the data and builds the tree for you.
@inject IApplicationEnvironment appEnvironment
@{
var list = Folder.Create(appEnvironment.ApplicationBasePath).Children;
}
<c1-flex-grid id="tvFlexGrid"
auto-generate-columns="false"
is-read-only="true"
allow-sorting="true"
class="custom-flex-grid"
child-items-path="Children">
<c1-flex-grid-column binding="Header" header="Folder/File Name" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Size" header="Size" width="80" align="center"></c1-flex-grid-column>
<c1-items-source source-collection="@list"></c1-items-source>
</c1-flex-grid>
/* create a 'custom-flex-grid' theme for the FlexGrid */
.custom-flex-grid .wj-header.wj-cell {
color: #fff;
background-color: #000;
border-bottom: solid 1px #404040;
border-right: solid 1px #404040;
font-weight: bold;
}
.custom-flex-grid .wj-cell {
background-color: #fff;
border: none;
}
.custom-flex-grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
background-color: #fff;
}
.custom-flex-grid .wj-state-selected {
background: #000;
color: #fff;
}
.custom-flex-grid .wj-state-multi-selected {
background: #222;
color: #fff;
}
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
namespace FlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
}
Handling null values
By default, FlexGrid allows you to enter empty values in columns of type string,
and will not allow empty/null values in columns of any other type.
You can change this behavior using the is-required property on grid columns.
If you set the is-required property to false, the grid will allow you to
enter empty values in that column, regardless of type. Conversely, if you set
the is-required property to true, the grid will not allow empty values
even in string columns.
Setting is-required to null reverts to the default behavior (nulls allowed
only in string columns).
The grid below reverts the default behavior. It sets is-required to false
for the first column, and to true for all others. You can delete content that
is not required by entering an empty string or simply by pressing the delete
key.
<c1-flex-grid id="nvGrid"
auto-generate-columns="false"
allow-sorting="true">
<c1-flex-grid-column binding="ID" is-read-only="true" is-required="false"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country" is-required="false"></c1-flex-grid-column>
<c1-flex-grid-column binding="Product" is-required="true"></c1-flex-grid-column>
<c1-flex-grid-column binding="Discount" format="p0" is-required="true"></c1-flex-grid-column>
<c1-flex-grid-column binding="Amount" format="n0" is-required="true"></c1-flex-grid-column>
<c1-items-source read-action-url="@Url.Action("GridRead")" update-action-url="@Url.Action("NVGridUpdate")"></c1-items-source>
</c1-flex-grid>
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
namespace FlexGrid101.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
public ActionResult GridRead([C1JsonRequest] CollectionViewRequest<Sale> requestData)
{
return this.C1Json(CollectionViewHelper.Read(requestData, FlexGridModel.Source));
}
public ActionResult NVGridUpdate([C1JsonRequest]CollectionViewEditRequest<Sale> requestData)
{
return this.C1Json(CollectionViewHelper.Edit(requestData, sale =>
{
string error = string.Empty;
bool success = true;
var fSale = FlexGridModel.Source.Find(item => item.ID == sale.ID);
fSale.Country = sale.Country;
fSale.Product = sale.Product;
fSale.Amount = sale.Amount;
fSale.Discount = sale.Discount;
return new CollectionViewItemResult<Sale>
{
Error = error,
Success = success,
Data = fSale
};
}, () => FlexGridModel.Source));
}
}