Features

Batch Editing

Batch Editing

This sample shows the BatchEditing mode for editing the data.

Features

Overview
Collapsible Column Headers
Styling Records, Groups, and Cells
Grouping
Group Headers
Row Header
Filtering
Row and Column Freezing
Paging
Group Panel
Remote Data Binding
Custom Cells
Custom Editors
Custom Column Headers
Editing
Batch Editing
Sorting
Virtual Scrolling
Disable Server Reading
Data Map
Excel Export
PDF Export
Unobtrusive Validation
SupplierID
ContactName
ContactTitle
Address
Region
City
1
Exotic Liquids
UK
Londo
Charlotte Cooper
Purchasing Manager
49 Gilbert St.
2
New Orleans Cajun Delights
USA
LA
New Orleans
Shelley Burke
Order Administrator
P.O. Box 78934
3
Grandma Kelly's Homestead
USA
MI
Ann Arbor
Regina Murphy
Sales Representative
707 Oxford Rd.
4
Tokyo Traders
Japa
Tokyo
Yoshi Nagase
Marketing Manager
9-8 Sekimai Musashino-shi
5
Cooperativa de Quesos 'Las Cabras'
Spai
Asturias
Oviedo
Antonio del Valle Saavedra
Export Administrator
Calle del Rosal 4
6
Mayumi's
Japa
Osaka
Mayumi Ohno
Marketing Representative
92 Setsuko Chuo-ku
7
Pavlova, Ltd.
Australia
Victoria
Melbourne
Ian Devling
Marketing Manager
74 Rose St. Moonie Ponds
8
Specialty Biscuits, Ltd.
UK
Manchester
Peter Wilso
Sales Representative
29 King's Way
9
PB Knäckebröd AB
Sweden
Göteborg
Lars Peterso
Sales Agent
Kaloadagatan 13
10
Refrescos Americanas LTDA
Brazil
São Paulo
Carlos Diaz
Marketing Manager
Av. das Americanas 12.890
11
Heli Süßwaren GmbH & Co. KG
Germany
Berli
Petra Winkler
Sales Manager
Tiergartenstraße 5
12
Plutzer Lebensmittelgroßmärkte AG
Germany
Frankfurt
Martin Bei
International Marketing Mgr.
Bogenallee 51
13
Nord-Ost-Fisch Handelsgesellschaft mbH
Germany
Cuxhave
Sven Peterse
Coordinator Foreign Markets
Frahmredder 112a
14
Formaggi Fortini s.r.l.
Italy
Ravenna
Elio Rossi
Sales Representative
Viale Dante, 75
15
Norske Meierier
Norway
Sandvika
Beate Vileid
Marketing Manager
Hatlevegen 5
16
Bigfoot Breweries
USA
OR
Bend
Cheryl Saylor
Regional Account Rep.
3400 - 8th Avenue Suite 210
17
Svensk Sjöföda AB
Swede
Stockholm
Michael Björ
Sales Representative
Brovallavägen 231
18
Aux joyeux ecclésiastiques
France
Paris
Guylène Nodier
Sales Manager
203, Rue des Francs-Bourgeois
19
New England Seafood Cannery
USA
MA
Bosto
Robb Merchant
Wholesale Account Agent
Order Processing Dept. 2100 Paul Revere Blvd.
20
Leka Trading
Singapore
Singapore
Chandra Leka
Owner
471 Seran on Loop, Suite #402
21
Lyngbysild
Denmark
Lyngby
Niels Peterse
Sales Manager
Lyngbysild Fiskebakken 10
22
Zaanse Snoepfabriek
Netherlands
Zaandam
Dirk Luchte
Accounting Manager
Verkoop Rijnweg 22
23
Karkki Oy
Finland
Lappeenranta
Anne Heikkone
Product Manager
Valtakatu 12
24
G'day, Mate
Australia
NSW
Sydney
Wendy Mackenzie
Sales Representative
170 Prince Edward Parade Hunter's Hill
25
Ma Maiso
Canada
Québec
Montréal
Jean-Guy Lauzo
Marketing Manager
2960 Rue St. Laurent
26
Pasta Buttini s.r.l.
Italy
Salerno
Giovanni Giudici
Order Administrator
Via dei Gelsomini, 153
27
Escar ts Nouveaux
France
Montceau
Marie Delamare
Sales Manager
22, rue H. Voiro
28
Gai pâturage
France
Annecy
Eliane Noz
Sales Representative
Bat. B 3, rue des Alpes
29
Forêts d'érables
Canada
Québec
Ste-Hyacinthe
Chantal ulet
Accounting Manager
148 rue Chasseur

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.

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
100
101
102
103
104
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()));
        }
  
    }
}
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
@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>
  
}