Component One ASP.Net MVC

ASP.Net MVC FlexGrid 101

This page shows how to get started with ASP.Net MVC's FlexGrid controls.

Getting Started

Steps for getting started with the FlexGrid control in MVC applications:

  1. Create a new MVC project using the C1 ASP.NET MVC application template.
  2. Add controller and corresponding view to the project.
  3. Initialize the FlexGrid control in view using razor syntax.
  4. (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 --> @(Html.C1().FlexGrid().Id("gsFlexGrid") .IsReadOnly(true) .AllowSorting(true) .Bind(Model.CountryData) .AutoGenerateColumns(true) ) </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; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCFlexGrid101.Models; using C1.Web.Mvc.Grid; namespace ASPNetMVCFlexGrid101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexGridModel model = new FlexGridModel(); model.CountryData = Sale.GetData(500); return View(model); } } }

Result (live):

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 Columns property.

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.

@(Html.C1().FlexGrid().Id("cdInitMethod").IsReadOnly(true).AutoGenerateColumns(false).AllowSorting(true) .Bind(Model.CountryData).CssClass("grid") .Columns(bl => { bl.Add(cb => cb.Binding("ID").Header("ID")); bl.Add(cb => cb.Binding("Start").Header("Start").Format("MMM d yy")); bl.Add(cb => cb.Binding("End").Header("End").Format("HH:mm")); bl.Add(cb => cb.Binding("Country").Header("Country").Width("*")); bl.Add(cb => cb.Binding("Amount").Format("n0")); bl.Add(cb => cb.Binding("Amount2")); bl.Add(cb => cb.Binding("Discount").Format("p0")); bl.Add(cb => cb.Binding("Active")); }) )
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCFlexGrid101.Models; using C1.Web.Mvc.Grid; namespace ASPNetMVCFlexGrid101.Controllers { public class HomeController : Controller { public ActionResult Index() { FlexGridModel model = new FlexGridModel(); model.CountryData = Sale.GetData(500); return View(model); } } }

Result (live):

Selection Modes

By default, FlexGrid allows you to select a range of cells with the mouse or keyboard, just like Excel. The SelectionMode 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 SelectionMode from a C1 ASP.Net MVC's ComboBox control.

@(Html.C1().FlexGrid().Id("smFlexGrid").IsReadOnly(true).AutoGenerateColumns(false).AllowSorting(true) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.None) .Bind(Model.CountryData).CssClass("grid") .Columns(bl => { bl.Add(cb => cb.Binding("ID").Header("ID").Width("*")); bl.Add(cb => cb.Binding("Country").Header("Country").Width("*")); bl.Add(cb => cb.Binding("Amount").Format("c").Width("*")); bl.Add(cb => cb.Binding("Discount").Format("p0").Width("*")); bl.Add(cb => cb.Binding("Active").Width("*")); }) ) <br />Selection Mode @(Html.C1().ComboBox().Id("smMenu").Bind(Model.Settings["SelectionMode"]) .SelectedIndex(0).OnClientSelectedIndexChanged("smMenu_SelectedIndexChanged") )
var smFlexGrid = smMenu = gFlexGrid = 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; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCFlexGrid101.Models; using C1.Web.Mvc.Grid; namespace ASPNetMVCFlexGrid101.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<string, object[]> CreateSettings() { var settings = new Dictionary<string, object[]> { {"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.

There are two modes for updating the data to the server.

  1. By default, the update operation will be commit to the server once finishing editing.

    Notices: If the user wants to commit the update operation to the datasource server, the Update, Delete or Create action url should be provided. And the corresponding codes used to update the datasource should be written in the corresponding action.

  2. The other mode is called BatchEdit. The user can update, create or remove multiple items. Once these modifications are confirmed, They could be commit to the data source only once. Now these modifications can be commit by the commit method of CollectionView in client side. The user can also commit them by sorting, paging or filtering behavior.

    Notices: In this mode, the BatchEdit action url should be provided and the corresponding codes used to update the datasource should be written.

You can disable editing at the Grid, Column, or Row levels using the IsReadOnly property of the Grid, Column, or Row objects. In this example, we make the ID column read-only.

@(Html.C1().FlexGrid() .Id("eFlexGrid").AutoGenerateColumns(false).AllowSorting(true) .Bind(bl => bl.Bind(Url.Action("GridRead")) .Update(Url.Action("EGridUpdate")) ) .CssClass("grid") .Columns(bl => { bl.Add(cb => cb.Binding("ID").Header("ID").Width("*").IsReadOnly(true)); bl.Add(cb => cb.Binding("Country").Header("Country").Width("*").IsReadOnly(true)); bl.Add(cb => cb.Binding("Amount").Format("c").Width("*")); bl.Add(cb => cb.Binding("Discount").Format("p0").Width("*")); bl.Add(cb => cb.Binding("Active").Width("*")); }) )
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCFlexGrid101.Models; using C1.Web.Mvc.Grid; using C1.Web.Mvc; using C1.Web.Mvc.Serializition; namespace ASPNetMVCFlexGrid101.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<Sale>(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 && ModelState.IsValid, Data = fSale }; }, () => FlexGridModel.Source)); } } }

Result (live):

Grouping

FlexGrid supports grouping of client side data, set the GroupBy property to a column name for grouping the data according to a column.

Internally, FlexGrid supports grouping through the client side IItemsSource interface. To enable grouping at client side, add one or more GroupDescription objects to the itemsSource.groupDescriptions property. It is easy to let the grid grouped by some field by calling the method GroupBy of FlexGridBuilder with the corresponding field name. And ensure that the grid's ShowGroups 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 "Sum." The aggregate is automatically updated when you edit the values in the column.

@(Html.C1().FlexGrid() .Id("gFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true) .GroupBy("Country") .Bind(Model.CountryData) .CssClass("grid") .Columns(bl => { bl.Add(cb => cb.Binding("Country").Header("Country").Width("*")); bl.Add(cb => cb.Binding("Product").Header("Product").Width("*")); bl.Add(cb => cb.Binding("Color").Header("Color").Width("*")); bl.Add(cb => cb.Binding("Start").Header("Start").Width("*")); bl.Add(cb => cb.Binding("Amount").Header("Amount").Format("n0").Width("*") .Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum)); }) ) <br />Group By @(Html.C1().ComboBox().Id("gMenu").Bind(Model.Settings["GroupBy"]) .SelectedIndex(0).OnClientSelectedIndexChanged("gMenu_SelectedIndexChanged") )
//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; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ASPNetMVCFlexGrid101.Models; using C1.Web.Mvc.Grid; namespace ASPNetMVCFlexGrid101.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<string, object[]> CreateSettings() { var settings = new Dictionary<string, object[]> { {"GroupBy", new object[]{"Country", "Product", "Color","Start","Amount","Country and Product","Product and Color", "None"}} }; return settings; } } }

Result (live):