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.

1. 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>
   

2. Handle the CellClose event of the Grid that triggers when a specified cell in edit mode is going to be closed.

3. Check if the closed cell contains the custom class of the CreditAmount column and if its value has changed.

4. 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>
   

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core

• Server-Side API Reference of the Grid for ASP.NET Core

• Server-Side TagHelper API Reference of the Grid for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base