Updating Grid Cell Dynamically based on the Values of Multiple Cells
Environment
Product | Telerik UI for ASP.NET MVC Grid |
Progress Telerik UI for ASP.NET MVC version | Created with the 2023.3.1114 version |
Description
How can I dynamically update a specified non-editable cell, whose value is a calculation based on other editable cells, when using Telerik UI for ASP.NET MVC Grid in InCell editable mode?
Solution
The InCell editable Grid contains the following columns:
- CreditAmount—An editable column.
- DebitAmount—A non-editable column.
- TransactionAmount—A non-editable column which value equals subtraction of the DebitAmount from the CreditAmount value (CreditAmount - DebitAmount).
Follow the next steps to update the TransactionAmount when the CreditAmount changes.
-
Add a custom class to the CreditAmount column and disable the TransactionAmount by using the
k-disabled
class.@(Html.Kendo().Grid<GridViewModel>() .Name("grid") .Columns(columns => { columns.Bound(p => p.CreditAmount).HtmlAttributes(new { @class="creditAmountCell"}); columns.Bound(p => p.DebitAmount); columns.Bound(p => p.TransactionAmount).HtmlAttributes(new { @class = "k-disabled", style = "opacity: 1"}); }) .Editable(e => e.Mode(GridEditMode.InCell)) ... .DataSource(dataSource => dataSource .Ajax() .Model(m => { m.Id("OrderID"); m.Field(p => p.OrderID).Editable(false); m.Field(p => p.DebitAmount).Editable(false); }) ... ) )
Handle the
CellClose
event of the Grid that triggers when a specified cell in edit mode is going to be closed.- Check if the closed cell contains the custom class of the CreditAmount column and if its value has changed.
-
Use
set()
method to update the TransactionAmount column.@(Html.Kendo().Grid<GridViewModel>() .Name("grid") .Events(ev => ev.CellClose("onCellClose")) ... )
<script> function onCellClose(e) { var closedCreditAmountCell = $(e.container).hasClass("creditAmountCell"); if (closedCreditAmountCell && e.model.dirtyFields["CreditAmount"] == true) { // Check if "CreditAmount" cell is updated. let creditAmountValue = e.model.CreditAmount; // Get the new CreditAmount value. let debitAmountValue = e.model.DebitAmount; // Get the respective DebitAmount value. setTimeout(() => { e.model.set("TransactionAmount", (creditAmountValue - debitAmountValue)); // Update the "TransactionAmount" cell. }, 100); } } </script>