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.
Note: To disable data update during sort/filter/page operations, set the DisableServerRead property of FlexGrid's ItemSource to True. This will enable client-side sorting, filtering, paging and data will only be submitted when the collectionView's commit method is explicitly called from client-side.
using System.Data.Entity.Validation; using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; using C1.Web.Mvc.Serialization; using C1.Web.Mvc; using System.Data; using System.Data.Entity; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { // // GET: /BatchEditing/ public ActionResult BatchEditing(CollectionViewRequest<Category> requestData) { return View(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 = ModelState.IsValid, Data = st }); }); } if (batchData.ItemsDeleted != null) { batchData.ItemsDeleted.ToList().ForEach(category => { var fCategory = db.Categories.Find(category.CategoryID); db.Categories.Remove(fCategory); itemresults.Add(new CollectionViewItemResult<Category> { Error = "", Success = ModelState.IsValid, Data = category }); }); } if (batchData.ItemsUpdated != null) { batchData.ItemsUpdated.ToList().ForEach(category => { db.Entry(category).State = EntityState.Modified; itemresults.Add(new CollectionViewItemResult<Category> { Error = "", Success = ModelState.IsValid, Data = category }); }); } db.SaveChanges(); } catch (DbEntityValidationException e) { var errorList = e.EntityValidationErrors.SelectMany(i => i.ValidationErrors).Select(i => i.ErrorMessage).ToList(); try { var refreshableObjects = db.ChangeTracker.Entries().Where(c => c.State == EntityState.Modified).ToList(); refreshableObjects.ForEach(o => o.Reload()); } catch(Exception er) { errorList.Add(er.Message); } error = string.Join(",", errorList); success = false; } catch (Exception e) { error = e.Message; success = false; } return new CollectionViewResponse<Category> { Error = error, Success = success, OperatedItemResults = itemresults }; }, () => db.Categories.ToList())); } } }
@model IEnumerable<Category> @section Styles{ <style> .queryErrorMessage{ color:#f00; } </style> } @section Scripts{ <script type="text/javascript"> var 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) { setQueryMessage('@(Resources.FlexGrid.BatchEditing_Updating)'); } else { setQueryMessage('@(Resources.FlexGrid.BatchEditing_NoChanges)'); } } function onQueryComplete(sender, e) { if (e.result.success) { setQueryMessage('@(Resources.FlexGrid.BatchEditing_Done)'); } else { setQueryMessage(e.result.error, 'queryErrorMessage'); } } function setQueryMessage(message, className) { var element = document.getElementById('queryMessage'); element.innerHTML = message; element.className = className; } </script> } <input type="button" value="@(Resources.FlexGrid.BatchEditing_Update)" class="btn" onclick="batchUpdate()" /> <span id="queryMessage"></span> @( Html.C1().FlexGrid<Category>() .Id("batchEditGrid").AutoGenerateColumns(false) .Columns(columns=>columns.Add(c=>c.Binding("CategoryID").IsReadOnly(true).Format("d")).Add(c=>c.Binding("CategoryName")).Add(c=>c.Binding("Description").Width("*").MultiLine(true))) .Bind(ib => ib.DisableServerRead(true).Bind(Model).BatchEdit(Url.Action("GridBatchEdit")).OnClientQueryComplete("onQueryComplete")) .AllowAddNew(true) .AllowDelete(true) .CssClass("grid") ) @section Description{ <p>@Html.Raw(Resources.FlexGrid.BatchEditing_Text0)</p> <p>@Html.Raw(Resources.FlexGrid.BatchEditing_Text1)</p> <p>@Html.Raw(Resources.FlexGrid.BatchEditing_Text2)</p> <h4>@Html.Raw(Resources.FlexGrid.BatchEditing_Normal)</h4> <p>@Html.Raw(Resources.FlexGrid.BatchEditing_Text3)</p> <p>@Html.Raw(Resources.FlexGrid.BatchEditing_Text4)</p> <h4>@Html.Raw(Resources.FlexGrid.BatchEditing_Batch)</h4> <p>@Html.Raw(Resources.FlexGrid.BatchEditing_Text5)</p> <p>@Html.Raw(Resources.FlexGrid.BatchEditing_Text6)</p> <p>@Html.Raw(Resources.FlexGrid.BatchEditing_Text7)</p> }