We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

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

Platform: jQuery |
Control: ejGrid |
Published Date: September 14, 2018 |
Last Revised Date: September 14, 2018

Solution:

We can save the changes of single cell edited value 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

 

MVC

 

C#

 

ASP

 

 

.Net core

 

C#

 

 

Angular

 

 

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

 

Output:

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ADD COMMENT
You must log in to leave a comment
Comments
vusonhpvn
Apr 18, 2020

hello, can you give examples with blazor

Reply
Joe
Apr 24, 2020

Hi,

I got this example working, but I've found that when you call batchSave(), it clear's the current cell selection. Is there a way around this?

For example, typically you press enter after editing a cell and it selects the cell below. However, when running this example, it breaks that and keeps the current selection.

Should I create a new issue?

Reply
Manivannan Padmanaban [Syncfusion]
Apr 27, 2020

Hi Joe,

Greetings from Syncfusion Support.

Using editCell and selectCells method of ejGrid we have achieved your requirement(i.e. make the cell editable while clicking the enter key). Kindly refer to the below code example,

        $(function () {
            $("#Grid").ejGrid({
             ………………
             columns: [
………………………………………
             ],
             cellEdit:"cellEdit"
          });
        });



    var flag = true, enterKey = false;

    $('#Grid').keydown(function(e){ // use your grid ID
         if (e.key == 'Enter') {
              enterKey = 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;
                    var rowIndex = args.row[0].rowIndex,
 columnIndex = this.getColumnIndexByField(args.columnName); //get the row and column index using cellEdit args before batchSave.
                    this.batchSave();
                    if (enterKey) { // continue the cell editing if enter key is pressed.
                        if (rowIndex == this.getRows().length) {
                            this.endEdit();
                            return;
                        }
                        !this._enableCheckSelect && this.selectRows(rowIndex);
                        if (columnIndex != -1) {
                           this.editCell(rowIndex, args.columnName); 
// editCell method, pass rowindex and field name
                           this.selectCells([[rowIndex, columnIndex]]);
 // selectCells method, pass rowindex and column index
                           enterKey = false;
                        }               
                    }                                   
            }
            else
                flag = false;
        }
        else
            flag = true;
    }

sample link

Also, refer the below API links. editCell selectCells

Regards, Manivannan Padmanaban

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile