Batch editing in EJ 1 ASP.NET Core Grid

I've been chatting with your support today and searched the forum, but I failed to find a solution.

I'd like to use batch editing for a grid in a view that looks like (some parts omitted for simplicity):

@model IEnumerable<PlanItemDetail>
@{
    Layout = null;
}

<ej-grid id="GridMaster" is-responsive="true" allow-paging="true" allow-scrolling="true" allow-sorting="true" grid-lines="@GridLines.Horizontal" locale="hr-HR" datasource="@Model" allow-text-wrap="true" allow-filtering="true" min-width="1430" enable-touch="false">
    <e-edit-settings allow-editing="true" allow-edit-on-dbl-click="true" edit-mode="Batch" show-confirm-dialog="true"></e-edit-settings>
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"update","cancel"}' />
    <e-page-settings page-size="10"></e-page-settings>
    <e-scroll-settings width=@("fixed") height=@("100%")></e-scroll-settings>
    <e-filter-settings filter-type="@FilterType.Excel"></e-filter-settings>
    <e-columns>
        <e-column is-primary-key="true" field="PlanItemDetailID" visible="false" type="number" width="0"></e-column>
        <e-column field="PlanItemDetailName" type="text" header-text="Detalj" header-text-align="TextAlign.Left" text-align="Left" width="150"></e-column>
        <e-column field="Amount" type="number" header-text="Iznos" header-text-align="TextAlign.Left" text-align="Left" width="100" edit-type="NumericEdit">
            <ej-numeric-text-box decimal-places="2" validate-on-type="true" show-spin-button="false" increment-step="0.01" validation-rules='@(new Dictionary<string,object> { {"required",true}})' min-value="0" />
        </e-column>
    </e-columns>
</ej-grid>

The problem is that I don't know how to link this with the action method that should be called to update changed records in database when "update" on toolbar is clicked. 
I guess I should use RemoteSave Adaptor, i.e. to add something like 
     <e-datamanager json="(IEnumerable<object>)ViewBag.DataSource" adaptor="remoteSaveAdaptor" batch-url="/MyController/BatchUpdate"></e-datamanager>
The problem is that I don't know what to set the json parameter to (because I don't pass data in ViewBag, I don't even set datasource with datamanager), and if I omit it, I get an error.

But, at your suggestion, I've even tried to pass data in ViewBag, so my view looked like:
@{
    Layout = null;
}
<e-datamanager id="myData" json="(IEnumerable<object>)ViewBag.DataSource" adaptor="remoteSaveAdaptor" batch-url="/MyController/BatchUpdate"></e-datamanager>

<ej-grid id="GridMaster" is-responsive="true" allow-paging="true" allow-scrolling="true" allow-sorting="true" grid-lines="@GridLines.Horizontal" locale="hr-HR"
(...)

<script>
    setTimeout(function () {

        var query = ej.Query();
        var promise = window.myData.executeLocal(query);
        var gridObj = $("#GridMaster").ejGrid("instance");
        gridObj.dataSource(promise);


    });

but that doesn't work - action BatchUpdate is never called.

So my question is - how to save changes to database when "update" is clicked?

7 Replies 1 reply marked as answer

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team April 29, 2021 03:36 PM UTC

Hi Petra, 

Thanks for contacting Syncfusion Support. 

Query#:- But, at your suggestion, I've even tried to pass data in ViewBag, so my view looked like: but that doesn't work - action BatchUpdate is never called. 
 
So my question is - how to save changes to database when "update" is clicked? 
 
We have checked your query by preparing sample(using ViewBag dataSource) with batchMode and update the records into the database at server end using batch-url property of e-datamanager

Refer to the code below:- 
GridFeatures.cshtml 
 <ej-grid id="FlatGrid" allow-paging="true"> 
        <e-datamanager json="(IEnumerable<object>)ViewBag.datasource" batch-url="/Grid/BatchUpdate" adaptor="remoteSaveAdaptor" /> 
        <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Batch)"></e-edit-settings> 
        <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel" })"></e-toolbar-settings> 
        <e-columns> 
            <e-column field="OrderID" header-text="Order ID" is-primary-key="true" validation-rules='new Dictionary<string, object>() { {"required",true}, {"number",true} }' text-align="Right" width="75"></e-column> 
              .   .   . 
        </e-columns> 
</ej-grid> 
 
GridController:- 

public ActionResult BatchUpdate([FromBody] submitvalue myObject) 
        { 
            if (myObject.Changed != null && myObject.Changed.Count > 0) 
            { 
                foreach (var temp in myObject.Changed) 
                { 
                    var ord = temp; 
                    Order val = orddata.Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
                    val.OrderID = ord.OrderID; 
                    val.EmployeeID = ord.EmployeeID; 
                    val.CustomerID = ord.CustomerID; 
                    val.Freight = ord.Freight; 
                    val.OrderDate = ord.OrderDate; 
                    val.ShipCity = ord.ShipCity; 
                } 
            } 
            if (myObject.Added != null && myObject.Added.Count > 0) 
            { 
                foreach (var temp in myObject.Added) 
                { 
                    orddata.Insert(0, temp); 
                } 
            } 
            if (myObject.Deleted != null && myObject.Deleted.Count > 0) 
            { 
                foreach (var temp in myObject.Deleted) 
                { 
                    orddata.Remove(orddata.Where(or => or.OrderID == temp.OrderID).FirstOrDefault()); 
                } 
            } 
 
            var data = orddata; 
            return Json(data); 
        } 
        public class submitvalue 
        { 
            public List<Order> Added { get; set; } 
            public List<Order> Changed { get; set; } 
            public List<Order> Deleted { get; set; } 
            public object Key { get; set; } 
        } 


Screenshot:- 
 

After following the above suggestion still faced issue share us the following details. 

  1. Complete Grid code example(server end).
  2. Screenshot of network Tab details.(as like above)
  3. Check whether batch-url method has been called at server end.(Share video demo).
  4. If possible replicate it in the above sample and revert us back.
  5. Share detailed explanation of your requirement.
  6. Screenshot of the script error (if any)

Regards, 
Farveen sulthana T 


Marked as answer

PV Petra Visic May 2, 2021 05:50 PM UTC

Thank you!
I've already tried something like this, but this time it somehow works.
Now I need to remove some unnecessary stuff and adapt it completely to my needs, I hope that then it will still work.

One more question - what should I return from that BatchUpdate action? Because now (for test) I've put just return Json("[]");, and it seems to work like that.
What is variable "orddata" in your example?


PK Padmavathy Kamalanathan Syncfusion Team May 3, 2021 12:53 PM UTC

Hi Petra, 
 
Thanks for the update. 
 
Query : what should I return from that BatchUpdate action? Because now (for test) I've put just return Json("[]");, and it seems to work like that. What is variable "orddata" in your example? 
 
In our sample, “orddata” is the list of data bound to the Grid. (You can check the same in the sample link provided by us in our previous update) 
 
We suggest you return the object containing the batch changes after updating them at server end. We have already discussed same in our UG documentation. Kindly check the Batch Update code example in the below help documentation, 
 
Screenshot: 
 
 
 
 
Kindly get back to us for further assistance. 
 
Regards, 
Padmavathy Kamalanathan 



PV Petra Visic May 3, 2021 08:00 PM UTC

What does it mean that you suggest me to return the batch changes? Does it mean that if I returned something else, it could still work? According to your answer, it seems that anything colud be returned, that it doesn't even matter...

I have another problem now - on initial grid load (after button click on my main view, grid is returned in partial view and placed on the page), I got some errors in console - first I got:

and then, on second load, I got:


First time when I tried to save batch changes (on  click), changes weren't saved (grid looked just like before I edited some cells). On every other load, changes were saved.
It seems like it happend only when that first error showed up. But now I can't replicate it :( That second error still happens from time to time and I can't figure out the pattern, but obviously there are some problems.

Do you know what causes those errors and what should I do to fix it?



PK Padmavathy Kamalanathan Syncfusion Team May 4, 2021 02:00 PM UTC

Hi Petra, 
 
Thanks for the update. 
 
Query 1: Does it mean that if I returned something else, it could still work? 
 
In Grid if we make any changes in server side other than the changes done in UI after batch update, we need to return those changes made at server just to reflect those changes back to UI. So, returning data is optional if we make changes only at UI end. You can use your own way. 
 
Query 2: on initial grid load (after button click on my main view, grid is returned in partial view and placed on the page), I got some errors in console  
Query 3: console error on second load 
Query 4: changes weren't saved (grid looked just like before I edited some cells). On every other load, changes were saved  
 
We have created sample of Grid in partial view to reproduce the above reported issues. But we couldn’t reproduce it at our end. We have shared the sample here for your reference. You can download the same from the below link, 
 
Kindly check and compare the above sample with yours. If issue persist, kindly share us the below details, 
  1. Complete Grid rendering code(both client and server end with partial page)
  2. Video demo of issue
  3. Share your Essential Studio Version detail
  4. If possible, share us issue reproducible sample with replication procedure or reproduce the issue in the sample shared above
 
Regards, 
Padmavathy Kamalanathan         



PV Petra Visic May 4, 2021 03:09 PM UTC

1.
Thanks for explanation, now I understand.

2.
I can't start your solution (it closes as soon as it opens), maybe because of some packages' warnings I get... But as much as I can compare code, I don't see any significant differences.
I shouldn't publicly share requested stuff. Could you make this an incident or provide some other way to share it just with Syncfusion Support?


FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 5, 2021 12:21 PM UTC

Hi Petra, 

Thanks for your update. 

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.  
  

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon