InCell Editing Refresh Another Cell

3 posts, 1 answers
  1. Arie
    Arie avatar
    20 posts
    Member since:
    Jun 2014

    Posted 20 Oct 2016 Link to this post

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






    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?



  2. Answer
    Stephen avatar
    90 posts
    Member since:
    Jan 2011

    Posted 20 Oct 2016 in reply to Arie Link to this post

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

  3. Viktor Tachev
    Viktor Tachev avatar
    2500 posts

    Posted 24 Oct 2016 Link to this post

    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.

    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.
Back to Top