Articles in this section
Category / Section

How to save changes immediately after editing a cell in batchediting?

3 mins read

Solution:

We can save the changes of single cell edited value in jQuery Grid instead of saving the entire batch changes, when batch editing is enabled. In cellEdit event, we can get the batch changes and using “batchSave” method the edited single cell value get saved.

The following code example demonstrates how to save the changes in each cell immediately without saving the entire batch change.

1. Render the Grid control with cellEdit event.

JS

<div id="Grid"></div>
<script type="text/javascript">
  $(function () {
   $("#Grid").ejGrid({                
        dataSource: window.gridData,
        allowPaging: true,
        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, editMode:"batch" },
        toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },
        columns: [
                 { field: "OrderID", isPrimaryKey: true, headerText: "Order ID",  width: 90 },
                 { field: "CustomerID", headerText: "Customer ID",  width: 90 },
                 { field: "EmployeeID", headerText: "Employee ID",  editType: ej.Grid.EditingType.Dropdown, width: 80  },
                 { field: "Freight", headerText: "Freight", width: 80, format: "{0:C}" }
        ],
      cellEdit:"cellEdit"
      });
  });
 </script> 

 

MVC

@(Html.EJ().Grid<object>("Grid")
            .Datasource((IEnumerable<object>)ViewBag.datasource)
            .AllowPaging()    /*Paging Enabled*/
            .ClientSideEvents(eve => eve.CellEdit ("cellEdit"))
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch);  })
           .ToolbarSettings(toolbar =>
      {
         toolbar.ShowToolbar().ToolbarItems(items =>
          {
               items.AddTool(ToolBarItems.Add);
               items.AddTool(ToolBarItems.Edit);
               items.AddTool(ToolBarItems.Delete);
               items.AddTool(ToolBarItems.Update);
               items.AddTool(ToolBarItems.Cancel);
          });
        })
        .Columns(col =>
          {
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(90).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
            col.Field("EmployeeID").HeaderText("Employee ID").EditType(EditingType.Dropdown).Width(80).Add();
            col.Field("Freight").HeaderText("Freight").Width(80).Format("{0:C}").Add();
        }))

 

C#

[Controller]
namespace EJGrid.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var DataSource = OrderRepository.GetAllRecords();
            ViewBag.datasource = DataSource;
            return View();
        }        
    }
}

 

ASP

<ej:Grid ID="Grid" runat="server"  AllowPaging="True" >
   <ClientSideEvents CellEdit="cellEdit " />
     <Columns>
      <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True"  Width="90" />
      <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" />
      <ej:Column Field="EmployeeID" HeaderText="Employee ID"  EditType="Dropdown" Width="80" />
       <ej:Column Field="Freight" HeaderText="Freight"  Width="80" Format="{0:C}"  />                
      </Columns>
      <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings>
        <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
</ej:Grid>
        

 

[CS]
public partial class _Default : Page
{    
    protected void Page_Load(object sender, EventArgs e)
    {
            this.Grid.DataSource = new NorthwindDataContext().Orders;
            this.Grid.DataBind();
    }
}

 

.Net core

<ej-grid id="Grid" allow-paging="true" datasource="ViewBag.DataSource" cell-edit="cellEdit ">
    <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","update","cancel"}' />
    <e-columns>
        <e-column field="OrderID" is-primary-key="true" header-text="Order ID" width="90"></e-column>
        <e-column field="CustomerID" header-text="Customer ID" width="90"></e-column>
        <e-column field="EmployeeID" header-text="Employee ID" width="80" edit-type="DropdownEdit"></e-column>
        <e-column field="Freight" header-text="Freight" width="80" format="{0:C}"></e-column>        
    </e-columns>
</ej-grid>
 

 

C#

 public class GridController : Controller
     {
        public ActionResult GridFeatures()
           {
              var DataSource = new NorthwindDataContext().OrdersViews.ToList();
              ViewBag.DataSource = DataSource;
              return View();
            }
     }

 

 

Angular

[html]
<ej-grid #grid [dataSource]="gridData" allowPaging="true" (cellEdit)="oncelledit($event)" [toolbarSettings]="toolbarItems" [editSettings]="editSettings">
    <e-columns>
        <e-column field="OrderID" [isPrimaryKey]="true" headerText="Order ID" width="90"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="90"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" editType="dropdownedit" width="80"></e-column>
        <e-column field="Freight" headerText="Freight " format="{0:C}" width="90"></e-column> 
</e-columns>
</ej-grid>
 

 

 [ts file]
 let flag = true; 
  export class GridComponent {
    @ViewChild('grid') GridModel: EJComponents<any, any>;
         public gridData: any;
         oncelledit(e: any){ 
 var obj = $(".e-grid").ejGrid("instance") 
  if (flag) {
                e.cancel = true;
             if ($.inArray(e.rowData, obj.batchChanges.changed) == -1 && $.inArray(e.rowData, obj.batchChanges.added) == -1)
                 obj.batchChanges.changed.push(e.rowData);
                 var batchData = obj.getBatchChanges();
            if (batchData.changed.length > 0 && !$(e.cell).closest("tr").hasClass("e-insertedrow")) {
                         flag = false;
                         obj.batchSave();
             }
             else
                    flag = false;
            }
           else
                 flag = true;
      }
      
 constructor() {
                     // the datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'   
        this.gridData = (window as any). gridData;
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true,editMode : "batch" };
        this.toolbarItems = { showToolbar: true, toolbarItems: ["add", "edit", "delete", "update", "cancel"] };
  }           
       }

 

In the cellEdit event, we can get the batch changes(i.e. changes made on the each cell) by using “getBatchChanges” method and finally save the each cell records in the “batchSave” method.

JS

<script type="text/javascript">
    var flag = true;
    function cellEdit(args) {
        if (flag) {
            args.cancel = true;
            if ($.inArray(args.rowData, this.batchChanges.changed) == -1)
                this.batchChanges.changed.push(args.rowData);
            var batchData = this.getBatchChanges();
            if (batchData.changed.length > 0 && !$(args.cell).closest("tr").hasClass("e-insertedrow")) {
                flag = false;
                this.batchSave();
            }
            else
                flag = false;
        }
        else
            flag = true;
    }

 

Output:

Grid Control Output in jQuery

 

Sample Link:- https://jsplayground.syncfusion.com/rd3mol4s

Conclusion

I hope you enjoyed learning about how to save changes immediately after editing a cell in batch editing.

You can refer to our jQuery Grid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our jQuery Grid Control documentation to understand how to present and manipulate data.

For current customers, you can check out our jQuery components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our jQuery Grid and other jQuery Grid components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment