Updating Grid Cell Dynamically based on the Values of Multiple Cells
Environment
Product | Telerik UI for ASP.NET Core Grid |
Progress Telerik UI for ASP.NET Core 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 Core 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); }) ... ) )
@addTagHelper *, Kendo.Mvc <kendo-grid name="grid"> <columns> <column field="CreditAmount" html-attributes='new Dictionary<string,object> { ["class"] = "creditAmountCell" }'/> <column field="DebitAmount"/> <column field="TransactionAmount" html-attributes='new Dictionary<string,object> { ["class"] = "k-disabled", ["style"] = "opacity: 1" }'/> </columns> <editable mode="incell"/> <!-- Other configuration --> <datasource type="DataSourceTagHelperType.Ajax"> <schema> <model id="OrderID"> <fields> <field name="OrderID" type="number" editable="false"></field> <field name="DebitAmount" type="number" editable="false"></field> </fields> </model> </schema> <!-- Other configuration --> </datasource> </kendo-grid>
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")) ... )
@addTagHelper *, Kendo.Mvc <kendo-grid name="grid" on-cell-close="onCellClose"> <!-- Other configuration --> </kendo-grid>
<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>