MultiRow - Batch Editing - C1 ASP.NET MVC

Batch Editing

This sample shows the BatchEditing mode for editing the data.

Features

Sample
Source
Documentation

Description

Excel-Style editing:
The MultiRow 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 Mode

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 Mode

MultiRow 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 MultiRow'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.

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 MultiRowExplorer.Models;
using Microsoft.EntityFrameworkCore;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        //
        // GET: /BatchEditing/

        public ActionResult BatchEditing()
        {
            return View();
        }

        public ActionResult BatchEditing_Bind([C1JsonRequest] CollectionViewRequest<Supplier> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, _db.Suppliers.ToList()));
        }

        public ActionResult MultiRowBatchEdit([C1JsonRequest]CollectionViewBatchEditRequest<Supplier> requestData)
        {
            return this.C1Json(CollectionViewHelper.BatchEdit(requestData, batchData =>
            {
                var itemresults = new List<CollectionViewItemResult<Supplier>>();
                string error = string.Empty;
                bool success = true;
                try
                {
                    if (batchData.ItemsCreated != null)
                    {
                        batchData.ItemsCreated.ToList().ForEach(st =>
                        {
                            _db.Suppliers.Add(st);
                            itemresults.Add(new CollectionViewItemResult<Supplier>
                            {
                                Error = "",
                                Success = success,
                                Data = st
                            });
                        });
                    }
                    if (batchData.ItemsDeleted != null)
                    {
                        batchData.ItemsDeleted.ToList().ForEach(supplier =>
                        {
                            _db.Suppliers.Remove(supplier);
                            itemresults.Add(new CollectionViewItemResult<Supplier>
                            {
                                Error = "",
                                Success = success,
                                Data = supplier
                            });
                        });
                    }
                    if (batchData.ItemsUpdated != null)
                    {
                        batchData.ItemsUpdated.ToList().ForEach(supplier =>
                        {
                            _db.Entry(supplier).State = EntityState.Modified;
                            itemresults.Add(new CollectionViewItemResult<Supplier>
                            {
                                Error = "",
                                Success = success,
                                Data = supplier
                            });
                        });
                    }
                    _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<Supplier>
                {
                    Error = error,
                    Success = success,
                    OperatedItemResults = itemresults
                };
            }, () => _db.Suppliers.ToList()));
        }

    }
}

@model IEnumerable<Supplier>

@section Styles{
    <style>
        .queryErrorMessage {
            color: #f00;
        }
    </style>
}

@section Scripts{
    <script type="text/javascript">
        var isUpdating = false;

        function batchUpdate() {
            var batchEditMultiRow = wijmo.Control.getControl('#batchEditMultiRow'),
                cv = batchEditMultiRow.collectionView;
            cv.commit();

            var isChanged = (cv.itemsAdded && cv.itemsAdded.length)
                || (cv.itemsRemoved && cv.itemsRemoved.length)
                || (cv.itemsEdited && cv.itemsEdited.length);
            if (isChanged) {
                isUpdating = true;
                setQueryMessage('@Html.Raw(MultiRowRes.BatchEditing_Text12)');
            } else {
                setQueryMessage('@Html.Raw(MultiRowRes.BatchEditing_Text13)');
            }

        }

        function onQueryComplete(sender, e) {
            if (isUpdating) {
                if (e.result.success) {
                    setQueryMessage('@Html.Raw(MultiRowRes.BatchEditing_Text14)');
                } 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="@Html.Raw(MultiRowRes.BatchEditing_Text11 )" class="btn" onclick="batchUpdate()" />
<span id="queryMessage"></span>

<c1-multi-row id="batchEditMultiRow" allow-add-new="true" allow-delete="true" class="multirow">
    <c1-items-source disable-server-read="true" read-action-url="@Url.Action("BatchEditing_Bind")"
                     batch-edit-action-url="@Url.Action("MultiRowBatchEdit")" query-complete="onQueryComplete"></c1-items-source>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="SupplierID" is-read-only="true" format="d" align="center"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="2">
        <c1-multi-row-cell binding="CompanyName" colspan="2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="ContactName" width="150"></c1-multi-row-cell>
        <c1-multi-row-cell binding="ContactTitle" width="200"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="3">
        <c1-multi-row-cell binding="Country"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Region"></c1-multi-row-cell>
        <c1-multi-row-cell binding="City"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Address" colspan="3"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
</c1-multi-row>

@section Summary{
    @Html.Raw(MultiRowRes.BatchEditing_Text10)
}

@section Description{
    <p>@Html.Raw(MultiRowRes.BatchEditing_Text0)</p>

    <p>@Html.Raw(MultiRowRes.BatchEditing_Text1)</p>

    <p>@Html.Raw(MultiRowRes.BatchEditing_Text2)</p>
    <h4>@Html.Raw(MultiRowRes.BatchEditing_Text8)</h4>
    <p>@Html.Raw(MultiRowRes.BatchEditing_Text3)</p>
    <p>@Html.Raw(MultiRowRes.BatchEditing_Text4)</p>

    <h4>@Html.Raw(MultiRowRes.BatchEditing_Text9)</h4>
    <p>@Html.Raw(MultiRowRes.BatchEditing_Text5)</p>

    <p>@Html.Raw(MultiRowRes.BatchEditing_Text6)</p>
    <p>@Html.Raw(MultiRowRes.BatchEditing_Text7)</p>

}