FlexGrid
Batch Editing
Features
Description
Excel-Style editing: The FlexGrid has built-in support for Excel-like, fast, in-cell editing. There is no need to add extra columns with 'Edit' buttons that switch between display and edit modes.
Users can start editing simply by typing into any cell. This is called 'quick-edit' mode. In this mode, the cursor keys finish the editing and the grid moves the selection. They can also start editing by pressing F2 or by clicking a cell twice. This is called 'full-edit' mode. In this mode, the cursor keys move the caret within the editor and the user must press the Enter, Tab, or Escape keys to finish editing.
There are two modes for editing the data.
Normal
In this mode, the item updated or created will be commit to the server after the corresponding row finishes editing. The removed row will be commit to the server immediately.
If the user wants to update the data, the Update action Url should be provided. If he wants to add or remove the data, the Create or Delete action Url should be provided. And the user should edit the data in the corresponding action. It is default mode.
Batch
FlexGrid has in-built support for BatchEditing, the user can update, create or remove multiple items and commit all changes to the data source once . The user can commit multiple modifications by sorting, paging or filtering the grid or simply on a button click.
The BatchEditing action Url should be provided in this mode.
using System; using System.Collections.Generic; using System.Linq; using C1.Web.Mvc.Serialization; using C1.Web.Mvc; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using Microsoft.EntityFrameworkCore; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { // // GET: /BatchEditing/ public ActionResult BatchEditing() { return View(); } public ActionResult BatchEditing_Bind([C1JsonRequest] CollectionViewRequest<Category> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, _db.Categories.ToList())); } public ActionResult GridBatchEdit([C1JsonRequest]CollectionViewBatchEditRequest<Category> requestData) { return this.C1Json(CollectionViewHelper.BatchEdit(requestData, batchData => { var itemresults = new List<CollectionViewItemResult<Category>>(); string error = string.Empty; bool success = true; try { if (batchData.ItemsCreated != null) { batchData.ItemsCreated.ToList().ForEach(st => { _db.Categories.Add(st); itemresults.Add(new CollectionViewItemResult<Category> { Error = "", Success = success, Data = st }); }); } if (batchData.ItemsDeleted != null) { batchData.ItemsDeleted.ToList().ForEach(category => { _db.Categories.Remove(category); itemresults.Add(new CollectionViewItemResult<Category> { Error = "", Success = success, Data = category }); }); } if (batchData.ItemsUpdated != null) { batchData.ItemsUpdated.ToList().ForEach(category => { _db.Entry(category).State = EntityState.Modified; itemresults.Add(new CollectionViewItemResult<Category> { Error = "", Success = success, Data = category }); }); } _db.SaveChanges(); } catch (Exception e) { error = GetExceptionMessage(e); success = false; #if RELOAD_ON_ERROR try { var refreshableObjects = _db.ChangeTracker.Entries().Where(c => c.State == EntityState.Modified).ToList(); refreshableObjects.ForEach(o => o.Reload()); } catch (Exception er) { error = error + Environment.NewLine + er.Message; } #endif } return new CollectionViewResponse<Category> { Error = error, Success = success, OperatedItemResults = itemresults }; }, () => _db.Categories.ToList())); } } }
@section Styles{ <style> .queryErrorMessage { color: #f00; } </style> } @section Scripts{ <script type="text/javascript"> var isUpdating = false, cv, batchEditGrid, minHeight; c1.documentReady(function () { batchEditGrid = wijmo.Control.getControl('#batchEditGrid'); cv = batchEditGrid.collectionView; minHeight = batchEditGrid.rows.defaultSize; autoSizeBatchEditGridRows(); cv.collectionChanged.addHandler(autoSizeBatchEditGridRows); }); function autoSizeBatchEditGridRows(s, e) { if (e && e.action == 0) return; batchEditGrid.autoSizeRows(); for (var i = 0, len = batchEditGrid.rows.length; i < len; i++) { var row = batchEditGrid.rows[i]; var height = row.height == undefined ? 0 : row.height; row.height = Math.max(28, height); } } function batchUpdate() { cv.commit(); var isChanged = (cv.itemsAdded && cv.itemsAdded.length) || (cv.itemsRemoved && cv.itemsRemoved.length) || (cv.itemsEdited && cv.itemsEdited.length); if (isChanged) { isUpdating = true; setQueryMessage('@FlexGridRes.BatchEditing_Updating'); } else { setQueryMessage('@FlexGridRes.BatchEditing_NoChanges'); } } function onQueryComplete(sender, e) { if (isUpdating) { if (e.result.success) { setQueryMessage('@FlexGridRes.BatchEditing_Done'); } else { setQueryMessage(e.result.error, 'queryErrorMessage'); } } isUpdating = false; } function setQueryMessage(message, className) { var element = document.getElementById('queryMessage'); element.innerHTML = message; element.className = className; } </script> } <input type="button" value="@FlexGridRes.BatchEditing_Update" class="btn" onclick="batchUpdate()" /> <span id="queryMessage"></span> <c1-flex-grid id="batchEditGrid" auto-generate-columns="false" class="grid" allow-add-new="true" allow-delete="true"> <c1-flex-grid-column binding="CategoryID" is-read-only="true" format="d"></c1-flex-grid-column> <c1-flex-grid-column binding="CategoryName"></c1-flex-grid-column> <c1-flex-grid-column binding="Description" width="*" multi-line="true"></c1-flex-grid-column> <c1-items-source disable-server-read="true" read-action-url="@Url.Action("BatchEditing_Bind")" batch-edit-action-url="@Url.Action("GridBatchEdit")" query-complete="onQueryComplete"></c1-items-source> </c1-flex-grid> @section Description{ <p>@Html.Raw(FlexGridRes.BatchEditing_Text0)</p> <p>@Html.Raw(FlexGridRes.BatchEditing_Text1)</p> <p>@Html.Raw(FlexGridRes.BatchEditing_Text2)</p> <h4>@Html.Raw(FlexGridRes.BatchEditing_Normal)</h4> <p>@Html.Raw(FlexGridRes.BatchEditing_Text3)</p> <p>@Html.Raw(FlexGridRes.BatchEditing_Text4)</p> <h4>@Html.Raw(FlexGridRes.BatchEditing_Batch)</h4> <p>@Html.Raw(FlexGridRes.BatchEditing_Text5)</p> <p>@Html.Raw(FlexGridRes.BatchEditing_Text6)</p> }