Features

Batch Editing

Batch Editing

This sample shows the BatchEditing mode for editing the data.

Features

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

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

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.

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('Updating...');
            } else {
                setQueryMessage('No changes.');
            }

        }

        function onQueryComplete(sender, e) {
            if (isUpdating) {
                if (e.result.success) {
                    setQueryMessage('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="Update" 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{
    This sample shows the BatchEditing mode for editing the data.
}

@section Description{
    <p>
        <b>Excel-Style editing:</b>
        The <b>MultiRow</b> 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.
    </p>
    <p>
        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.
    </p>
    <p>There are two modes for editing the data. </p>
    <h4>Normal</h4>
    <p>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.</p>
    <p>
        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.
    </p>
    <h4>Batch</h4>
    <p>
        <b>MultiRow</b> has in-built support for <b>BatchEditing</b>, 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.
    </p>
    <p>The <b>BatchEditing</b> action Url should be provided in this mode.</p>
    <p>
        <b>Note:</b> To disable data update during sort/filter/page operations, set the <b>DisableServerRead</b> property of MultiRow's <b>ItemSource</b> to True.
        This will enable client-side sorting, filtering, paging and data will only be submitted when the collectionView's <b>commi</b>t method is explicitly called from client-side.
    </p>
}