Inline Editing
Although FlexGrid provides efficient, Excel-style editing by default, you may want to customize the editing behavior.
If for some reason you don't like the Excel-style editing and prefer to add editing buttons to every row (typical of editable HTML tables), you can accomplish that using the formatItem event and a little code.
The grid below demonstrates this approach:
// This file locates: "Scripts/Lesson/C1FlexGrid/InlineEditing.js". c1.documentReady(function () { var theGrid = wijmo.Control.getControl('#theGrid'); // make rows taller to accommodate edit buttons and input controls theGrid.rows.defaultSize = 40; // custom formatter to paint buttons and editors theGrid.formatItem.addHandler(function(s, e) { if (e.panel == s.cells) { var col = s.columns[e.col], item = s.rows[e.row].dataItem; if (item == currentEditItem) { // create editors and buttons for the item being edited switch (col.binding) { case 'Buttons': e.cell.innerHTML = document.getElementById('tplBtnEditMode').innerHTML; e.cell.dataItem = item; break; case 'Country': case 'Sales': case 'Expenses': e.cell.innerHTML = '<input class="form-control" ' + 'id="' + col.binding + '" ' + 'value="' + s.getCellData(e.row, e.col, true) + '"/>'; break; } } else { // create buttons for items not being edited switch (col.binding) { case 'Buttons': e.cell.innerHTML = document.getElementById('tplBtnViewMode').innerHTML; e.cell.dataItem = item; break; } } } }); // handle button clicks theGrid.addEventListener(theGrid.hostElement, 'click', function (e) { var target = e.target; if (e.target.tagName != 'BUTTON') { target = e.target.parentNode; } if (target != null && target.tagName == 'BUTTON') { // get button's data item var item = wijmo.closest(e.target, '.wj-cell').dataItem; // handle buttons switch (target.id) { // start editing this item case 'btnEdit': editItem(item); break; // remove this item from the collection case 'btnDelete': theGrid.collectionView.remove(item); break; // commit edits case 'btnOK': commitEdit(); break; // cancel edits case 'btnCancel': cancelEdit(); break; } } }); // exit edit mode when scrolling the grid or losing focus theGrid.scrollPositionChanged.addHandler(cancelEdit); theGrid.lostFocus.addHandler(cancelEdit); theGrid.resizingColumn.addHandler(cancelEdit); theGrid.draggingColumn.addHandler(cancelEdit); theGrid.sortingColumn.addHandler(cancelEdit); // editing commands var currentEditItem = null; function editItem(item) { cancelEdit(); currentEditItem = item; theGrid.invalidate(); } function commitEdit() { if (currentEditItem) { theGrid.columns.forEach(function (col) { var input = theGrid.hostElement.querySelector('#' + col.binding); if (input) { var value = wijmo.changeType(input.value, col.dataType, col.format); if (wijmo.getType(value) == col.dataType) { currentEditItem[col.binding] = value; } } }); } currentEditItem = null; theGrid.invalidate(); } function cancelEdit() { if (currentEditItem) { currentEditItem = null; theGrid.invalidate(); } } });
using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexGridController : Controller { // GET: InlineEditing public ActionResult InlineEditing() { return View(Models.FlexGridData.GetSales(Models.FlexGridData.Countries7)); } } }
@model IEnumerable<FlexGridData.Sale> <h1> @Html.Raw(Resources.C1FlexGrid.InlineEditing_Title) </h1> <p> @Html.Raw(Resources.C1FlexGrid.InlineEditing_Text1) </p> <p> @Html.Raw(Resources.C1FlexGrid.InlineEditing_Text2) </p> <p> @Html.Raw(Resources.C1FlexGrid.InlineEditing_Text3) </p> @(Html.C1().FlexGrid().Id("theGrid").Height(200) .IsReadOnly(true) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.None) .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column) .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").Format("n2"); cs.Add().Binding("Expenses").Header("Expenses").Format("n2"); cs.Add().Binding("Buttons").Header("Edit").Width("160"); }) ) <!-- template for buttons on items in view mode --> <div id="tplBtnViewMode" style="display:none"> <button id="btnEdit" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-pencil"></span> @Resources.Resource.Btn_Edit </button> <button id="btnDelete" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-remove"></span> @Resources.Resource.Btn_Delete </button> </div> <!-- template for buttons on items in edit mode --> <div id="tplBtnEditMode" style="display:none"> <button id="btnOK" class="btn btn-primary btn-sm"> <span class="glyphicon glyphicon-ok"></span> @Resources.Resource.Btn_Ok </button> <button id="btnCancel" class="btn btn-warning btn-sm"> <span class="glyphicon glyphicon-ban-circle"></span> @Resources.Resource.Btn_Cancel </button> </div>