FlexGrid

FlexGrid

Batch Editing

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.

Features

Sample SourceDocumentation

CategoryID

CategoryName

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.

BatchEditingController.cs BatchEditing.cshtml

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> 
} 

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input

Tutorials

New Features

Getting Started Guides

Sample Applications

Batch Editing

Features

Description

Normal

Batch