Custom Editing

Although FlexGrid provides efficient, Excel-style editing by default, you may want to customize the editing behavior in some cases.

The simplest customization is to keep the grid always in edit mode. This does not save any effort of the user, because anyways, FlexGrid allows editing cells by typing at any time. But, it does show users that the grid is editable.

The easiest way to keep the grid in edit mode at all times is to call the startEditing method when the grid gets the focus and when the selection changes.

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

    var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(',');
    theGrid.columns[1].dataMap = countries;
    theGrid.gotFocus.addHandler(function(s, e) {
        s.startEditing(false); // quick mode
    });
    theGrid.selectionChanged.addHandler(function (s, e) {
        setTimeout(function () {
            s.startEditing(false); // quick mode
        }, 50); // let the grid update first
    });
});

using System.Web.Mvc;

namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: AlwaysEditing
        public ActionResult AlwaysEditing()
        {
            return View(Models.FlexGridData.GetSales(Models.FlexGridData.Countries7));
        }
    }
}

@model IEnumerable<FlexGridData.Sale>

<h1>
    @Html.Raw(Resources.C1FlexGrid.AlwaysEditing_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.AlwaysEditing_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.AlwaysEditing_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.AlwaysEditing_Text3)
</p>

@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs =>
    {
        cs.Add().Binding("Id").Header("ID").Width("50");
        cs.Add().Binding("Country").Header("Country").IsRequired(true);
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
        cs.Add().Binding("Overdue").Header("Overdue");
    })
)