This is a migrated thread and some comments may be shown as answers.

InCell Editing Refresh Another Cell

2 Answers 448 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Arie
Top achievements
Rank 1
Arie asked on 20 Oct 2016, 01:55 PM

I have a grid where it is like an invoice sheet.

Quantity

Cost

Discount

TotalAmount

 

The TotalAmount column has a client template that calculates its value via Quantity, Cost, and Discount . This column when you try to edit it will refresh with the correct value from the implementation of the client template. However, we would like to refresh this cell whenever the other three values are changed... and then we will change the TotalAmount field to read only...

How could we go about accomplishing this?

 

Thanks
AJ

2 Answers, 1 is accepted

Sort by
0
Accepted
Stephen
Top achievements
Rank 2
answered on 20 Oct 2016, 07:34 PM

We have this problem all the time and there are various ways around it.  I don't really know the "recommended" way, but I have solved it in a couple of ways, which I will describe in detail...because there was a lot of learning to be done.

 

If you use a template for TotalAmount that is based on the values for the other columns, it does not update immediately when those other columns change.  It *will* get updated when the grid is rebound, but that is too late for a nice UX.

 

You can bind to the grid's save event which will fire when you leave the cells.

Here you can recalculate your new TotalAmount and push it into the model.

But, there are issues:

1. if TotalAmount is marked as not editable, you cannot use model.set("TotalAmount", newValue).  You can update the value directly instead, model.TotalAmount = newValue, but this will not update the displayed value.  You can then force a grid refresh to update the display, grid.refresh().  At this point, you value has been updated in the model AND in the UI but the forced refresh will cause the grid to lose it's state, i.e. the selected row/cell, etc, which breaks the flow of the UX.

I do not recommend this way.  Instead of refreshing the grid, you can also just push the updated value into the cell markup directly...I have done this but also do not recommend it.

 

2. if TotalAmount is marked as editable, you can use model.set() and update right away, but now the cell will show an editor, which you do not want.

I have 2 ways to get around this:

2.1 Hide the editor in the edit event and refocus to maintain the row/cell focus: http://dojo.telerik.com/@Stephen/ekIjU.  This way gives you a lot of flexibility, i.e. if the cell is conditionally editable you can choose to hide or keep the editor as conditions change.

2.2 Implement a custom editor for the field that just shows the value instead of an actual editor: http://dojo.telerik.com/@Stephen/UYoju.  This is probably the way to go if you field is never editable.

 

The examples are entirely in JS instead of razor helpers but you can get the idea and the techniques can be incorporated into your MVC views...I define all my grids using razor helpers and then add on the event handler javascript as required.

0
Viktor Tachev
Telerik team
answered on 24 Oct 2016, 11:04 AM
Hi Arie,

The suggestions provided by Stephen are the way to go. You need to calculate the value in the TotalAmount column manually when the other cells in the row are edited.

Also, you need to handle the edit event and check if the edited cell is "TotalAmount". In that case you need to hide the editor. You could use a custom editor, however, simply hiding the input would be easier.



Regards,
Viktor Tachev
Telerik by Progress
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Tags
Grid
Asked by
Arie
Top achievements
Rank 1
Answers by
Stephen
Top achievements
Rank 2
Viktor Tachev
Telerik team
Share this question
or