Get the edited grid cell values and display calculated cell values based on that

[Pritam]

Hello,

I'm using a  grid,I have calculated cells startDate, endDate and Duration.

When i update the value of either one of these the calculated cell values will change.

But I always get the previous values of the cell and not the current edited value.

Is there a cellLeave function where i can access this value?

Grid is  as follows:-
 @(Html.Kendo().Grid<ROI_DataLayer.ViewModel.MilestonePhasesViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.order_id).Title("ID").Hidden(false).Width(30);
            columns.Bound(e => e.pk_milestone_phase_id).Title("Id No").Hidden(true).Width(50);
            columns.Bound(e => e.phase_name).Width(210);
            columns.Bound(e => e.plan_start_date).Title("Planned <br>Start Date").Format("{0:MM-dd-yyyy}").Width(70);
            columns.Bound(e => e.duration).Title("Duration").Width(40);
            columns.Bound(e => e.plan_end_date).Title("Planned <br>End Date").Format("{0:MM-dd-yyyy}").Width(70);
       })
            .ToolBar(toolbar =>
            {
                toolbar.Save().HtmlAttributes(new { @onclick = "savePhase()" });
            })
        .Editable(editable => { editable.Mode(GridEditMode.InCell); editable.DisplayDeleteConfirmation(false); })
        .Pageable()
        .Navigatable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(5)
        .ServerOperation(false)
        .Model(model =>
            {
                model.Id(p => p.pk_milestone_phase_id);
                model.Field(p => p.SrNo).Editable(false);
                model.Field(p => p.pk_milestone_phase_id).Editable(false);
            })
       .Events(events => { events.Error("error_handler"); })
       .Read(read => read.Action("MP", "Milestone", new { project_id = @Model.pk_project_id }))
        .Update(update => update.Action("Update_MP", "Milestone"))
        ).Selectable(s => s.Mode(GridSelectionMode.Single))
        .Events(events =>
        {
               events.Edit("onEdit");
         })
        .ClientDetailTemplateId("template")
)

function onEdit(e)
{
  var controlHtml = e.container.html();

        if (controlHtml.indexOf("plan_start_date") >= 0 || controlHtml.indexOf("duration") >= 0) {
            var startDate = new Date(e.model.plan_start_date);
            var duration = Number(e.model.duration) - 1;
            var endDate = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + duration);
            e.model.set("plan_end_date", endDate)
        }
        else if (controlHtml.indexOf("plan_end_date") >= 0) {
            //Get 1 day in milliseconds
            var one_day = 1000 * 60 * 60 * 24;

            // Convert both dates to milliseconds
            var date1_ms = new Date(e.model.plan_start_date).getTime();
            var date2_ms = new Date(e.model.plan_end_date).getTime();

            // Calculate the difference in milliseconds
            var difference_ms = date2_ms - date1_ms;

            // Convert back to days
            var duration = Math.round(difference_ms / one_day) - 1;

            if (duration < 0) {
                e.model.set("duration", duration);
                var grid = $("#grid").data("kendoGrid");
                var rowno = e.model.order_id - 1;
                grid.tbody.find("tr:eq(" + rowno + ") td:eq(6)").css('background-color', '#FBC1B7');
            }
            else {
                duration++;

                var grid = $("#grid").data("kendoGrid");
                var rowno = e.model.order_id - 1;
                if (rowno % 2 == 0) {

                    grid.tbody.find("tr:eq(" + rowno + ") td:eq(6)").removeAttr("style");
                }
                else {
                    grid.tbody.find("tr:eq(" + rowno + ") td:eq(6)").css('background-color', '#eaf4f9');
                }
                e.model.set("duration", duration);
            }

        }

}

[Atanas Korchev]

Hi,

You can try using the Save event of the grid. 

.Events(e => e.Save("onSave"))

<script>
function onSave(e) {
     // handle the event
}
</script>

Regards,
Atanas Korchev
Telerik