Features

Batch Editing

Batch Editing

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

Features

Overview
FlexGrid
Batch Editing
Unobtrusive Validation
FlexChart
Input
CategoryID
CategoryName
Description
loading...

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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
@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>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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));
        }
    }
}