is there a specific cell event ( CellEditEnd Event(?) ) in Grid control?

[Dongil Shin]

Hi I'm testing on Syncfusion mvc editable grid.

Each row has birthdate and age cells.

Once I enter the birth date value, I then tab across to the Age cell.

I want the Age cell value to be calculated automatically.

Is there an event I can use that allows me to fire it so that when I move the cursor to the Age field, the age value is calculated based on the birth date?

Please give me some idea.

Thank you in advance!

Kind Regards

[Seeni Sakthi Kumar Seeni Raj]

Hi Dongil, 

 

Thanks for contacting Syncfusion Support.  

 

We can update the other cell values while updating the current cell value in the batch editing mode using the CellSave event and setCellValue method. Refer to the following code example and API References.  

 

@(Html.EJ().Grid<object>("Grid") 

           .EditSettings(edit => 

            { 

                     . .  

                     . . . 

                edit.EditMode(EditMode.Batch); 

            }) 

                 . .  

        .ClientSideEvents(events => events.CellSave("onCellSave")) 

        .Columns(col => 

            { 

                col.Field("EmployeeID").IsPrimaryKey(true).HeaderText("Employee ID").Add(); 

                . . .  

                      . ..  

                col.Field("BirthDate").HeaderText("Birth Date").Format("{0:MM/dd/yyyy}").Add(); 

                col.Field("Age").HeaderText("Age").Add(); 

            }) 

) 

 

<script type="text/javascript"> 

 

    function onCellSave(args) { 

        if (args.columnName == "BirthDate") { 

            var age = calculateAge(args.value); 

            var inx = this.getIndexByRow($(args.cell).closest("tr")); 

            this.setCellValue(inx, "Age", age); 

        } 

    } 

    function calculateAge(birthDate) { 

        birthDate = new Date(birthDate); 

        otherDate = new Date(); 

 

        var years = (otherDate.getFullYear() - birthDate.getFullYear()); 

 

        if (otherDate.getMonth() < birthDate.getMonth() || 

            otherDate.getMonth() == birthDate.getMonth() && otherDate.getDate() < birthDate.getDate()) { 

            years--; 

        } 

        return years; 

    } 

</script> 

 

https://help.syncfusion.com/api/js/ejgrid#methods:setcellvalue 

https://help.syncfusion.com/api/js/ejgrid#events:cellsave 

 

We have prepared a sample that can be downloaded from the following location.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/132535/ze/MvcApplication66-1533113052.zip 

 

For calculating the Age from the given date, please follow this article.  

 

https://stackoverflow.com/questions/4076321/javascript-age-calculation 

 

Regards,  

Seeni Sakthi Kumar S.