Features

Batch Editing

Batch Editing

This view shows how Excel-like editing of FlexGrid runs in Razor Pages.

Features

Description

Steps for implementing batch editing in the FlexGrid control in Razor Pages:

  1. Add handler OnPostBatchEditing_Bind to page model for model binding.
  2. Add handler OnPostGridBatchEdit to page model for batch editing.
  3. Add token @Html.AntiForgeryToken() in razor page view.
  4. Initialize the FlexGrid control in razor page view using <c1-flex-grid></c1-flex-grid> tag.
  5. Set value of read-action-url attribute as @Url.Page("BatchEditing", "BatchEditing_Bind") and set value of batch-edit-action-url attribute as @Url.Page("BatchEditing","GridBatchEdit"). Here, "BatchEditing" is the page name, "BatchEditing_Bind" and "GridBatchEdit" are the handler names without prefix.
@page
@model BatchEditingModel
@{
}

@section Scripts{
    <script type="text/javascript">
        var isUpdating = false;

        function batchUpdate() {
            var batchEditGrid = wijmo.Control.getControl('#batchEditGrid'),
                cv = batchEditGrid.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>
}

@Html.AntiForgeryToken()

<input type="button" value="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="*"></c1-flex-grid-column>
    <c1-items-source disable-server-read="true" read-action-url="@Url.Page("BatchEditing","BatchEditing_Bind")"
                     batch-edit-action-url="@Url.Page("BatchEditing","GridBatchEdit")" query-complete="onQueryComplete"></c1-items-source>
</c1-flex-grid>

@section Summary{
    <p>This view shows how Excel-like editing of FlexGrid runs in Razor Pages.</p>
}

@section Description{
    <p>
        Steps for implementing batch editing in the FlexGrid control in Razor Pages:
    </p>
    <ol>
        <li>Add handler <b>OnPostBatchEditing_Bind</b> to page model for model binding.</li>
        <li>Add handler <b>OnPostGridBatchEdit</b> to page model for batch editing.</li>
        <li>Add token <b>@@Html.AntiForgeryToken()</b> in razor page view.</li>
        <li>Initialize the FlexGrid control in razor page view using <b>&lt;c1-flex-grid&gt;&lt;/c1-flex-grid&gt;</b> tag.</li>
        <li>Set value of read-action-url attribute as @@Url.Page("BatchEditing", "BatchEditing_Bind") and set value of batch-edit-action-url attribute as @@Url.Page("BatchEditing","GridBatchEdit").  Here, "BatchEditing" is the page name, "BatchEditing_Bind" and "GridBatchEdit" are the handler names without prefix.</li>
    </ol>
}
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using RazorPagesExplorer.Models;
using Microsoft.EntityFrameworkCore;
using System.Data.SqlClient;

namespace RazorPagesExplorer.Pages
{
    public class BatchEditingModel : PageModel
    {
        private static List<Category> _categories = Category.GetCategories();

        public BatchEditingModel()
        {
        }

        public void OnGet()
        {
        }

        public ActionResult OnPostBatchEditing_Bind([C1JsonRequest] CollectionViewRequest<Category> requestData)
        {
            return JsonConvertHelper.C1Json(CollectionViewHelper.Read(requestData, _categories));
        }

        public ActionResult OnPostGridBatchEdit([C1JsonRequest]CollectionViewBatchEditRequest<Category> requestData)
        {
            return JsonConvertHelper.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 =>
                        {
                            st.CategoryID = _categories.Count == 0 ? 1 : _categories.Max(c => c.CategoryID) + 1;
                            _categories.Add(st);
                            itemresults.Add(new CollectionViewItemResult<Category>
                            {
                                Error = "",
                                Success = success,
                                Data = st
                            });
                        });
                    }
                    if (batchData.ItemsDeleted != null)
                    {
                        batchData.ItemsDeleted.ToList().ForEach(category =>
                        {
                            var removeItemIndex = _categories.FindIndex(c => c.CategoryID == category.CategoryID);
                            _categories.RemoveAt(removeItemIndex);
                            itemresults.Add(new CollectionViewItemResult<Category>
                            {
                                Error = "",
                                Success = success,
                                Data = category
                            });
                        });
                    }
                    if (batchData.ItemsUpdated != null)
                    {
                        batchData.ItemsUpdated.ToList().ForEach(category =>
                        {
                            var updateItem = _categories.Find(c => c.CategoryID == category.CategoryID);
                            updateItem.CategoryName = category.CategoryName;
                            updateItem.Description = category.Description;
                            itemresults.Add(new CollectionViewItemResult<Category>
                            {
                                Error = "",
                                Success = success,
                                Data = category
                            });
                        });
                    }
                }
                catch (Exception e)
                {
                    error = e.Message;
                    success = false;
                }

                return new CollectionViewResponse<Category>
                {
                    Error = error,
                    Success = success,
                    OperatedItemResults = itemresults
                };
            }, () => _categories));
        }
    }
}