I have a kendo grid which is populated by a model from an MVC controller. Column 1 and 2 are not editable and are populated with data from the model. Column 3 is an editable column. Column 4 is rendered empty and is not editable.
I need to allow the user to enter a numeric value in the cell in column 3 and then when that cell looses focus, execute a javascript function which will compute a value and place it into the cell in column 4. So, for example, if row 1, column 1 has a value of "2023/24" and row 1, column 2 has a value of 1000, and the user enters 50 into row1, column 3, the javascript function will compute 1000 - 50 and will place the value of 950 into row1, column 4.
Here is the complete kendo grid definition:
@(Html.Kendo().Grid<TaxCertApp.ViewModels.SettlementMemoViewModel>()
.Name("SettlementMemodGrid")
.Columns(columns =>
{
columns.Bound(nr => nr.TaxYear).Width(50).Title("Tax Year");
columns.Bound(nr => nr.OriginalAssessment).Width(100).Title("ORIG. ASSESSMENT").Format("{0:##########0}");
columns.Bound(nr => nr.Reduction).Width(100).Title("REDUCTION").EditorTemplateName("Integer");
columns.Bound(nr => nr.FinalAssessment).Width(100).Title("FINAL ASSESSMENT").Format("{0:###,###,##0}");
columns.Bound(nr => nr.Rate).Width(100).Title("RATE").EditorTemplateName("Currency");
columns.Bound(nr=> nr.RefundSavings).Width(100).Title("REFUND/SAVINGS").Format("{0:###,###,##0}");
columns.Bound(e => e.Type).Width(100).EditorTemplateName("TypeList").Title("TYPE (R S R/S)");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Scrollable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Cell))
.Events(e => e.Edit("OnEdit"))
.Events(ev => ev.Change("OnChange"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(n => n.TaxYear);
model.Field(n => n.OriginalAssessment).Editable(false);
model.Field(n => n.Reduction).Editable(true);
model.Field(n => n.FinalAssessment).Editable(false);
model.Field(n => n.Rate).Editable(true);
model.Field(n => n.RefundSavings).Editable(true);
model.Field(n => n.Type).Editable(true);
})
.PageSize(20)
.Read(read => { read.Action("SettlementMemoFetchGrid", "Forms").Data("BuildObjectGridSettMemo"); })
)
)Currently, when a user clicks in row1, column 3, the onChange AND onEdit events fire, even before the user types any data into the cell. Neither event first when the user moves off the cell.
And the second piece of this question is, once the javascript computes the 950 value, how do I get that 950 value to display in the grid?
Thank you for any assistance.