Updating the value of a non-editable cell

[John]

Hi,

I hoping this will be a easy answer.

I have a grid and to keep it simple it only has two columns. Quantity and Value. There is an additional JavaScript variable called 'price'. In this example price = 10.

Quantity is inline editable, and Value is defined in the schema as being { editable: false }

When the user clicks the Quantity cell and enters a new number, I need the cell next to it (Value) to recalculate and display the new number in Quantity * price.

So, initially the grid row would be Quantity 0, Value 0.

User enters 10 in Quantity. Value changes to 100.

For some reason I just can't get this to work. Any help would be appreciated!

[Georgi]

Hi John,

A possible solution would be to enable the editing of the Value field on dataSource level, but configure the column as non editable.

e.g.

{ field: "value",editable: function(){
  return false
}

Below you will find a small sample which demonstrates the above approach. Please examine it and let me know if it helps:

• https://dojo.telerik.com/oROJayAd

Regards,
Georgi
Progress Telerik

[John]

Hi Georgi,

Thanks for the reply. That looks like the solution I needed, but unfortunately it didn't quite work.

First thing is that I'm restricted to using an older version on Kendo (v2016.1.112), and the 'editable' column configuration to return false doesn't seem to work for me. Switching to the latest version of Kendo, and that worked. There are plans to upgrade to the latest Kendo, but...that's a whole other story.

But, even on the latest Kendo version I found that the script to update the value column always seemed to use the previous number entered in the quantity cell. No idea why, it works perfectly well in your code snippet.

Also, in your example the spin control for the quantity cell didn't trigger the function, so that doesn't update the 'value' cell.

However, I did find a work around. I used: grid.bind("save", grid_save); And in that function I calculated the new 'value' when the quantity is updated and then set the new value into the destination cell. I found an example of a kendoFastReDrawRow function. I modified that to update on single cell on a row in the grid.

It works OK. Both solutions just feel like too much hard work for something that seemed simple on the face of it.

Cheers,
John

 

 

[Georgi]

Hi John,

The issue related with the old value depends might be related to the event you are using - if you are using some of the numeric text box events, the value might not yet be updated when the event is triggered. To avoid this I would recommend you to access the value directly from the input element.

Furthermore, regarding the old version. You could achieve the same by using a template column and update the html of the cell manually. Below you will find a sample which demonstrates the same approach:

• https://dojo.telerik.com/aNiYikIb

Finally, the value does not update since the input event is used which does not fire when the value is change through the spinners. To avoid that you could use the blur event.


Regards,
Georgi
Progress Telerik

[Lee]

The linked Dojo doesn't work. 

[Martin]

Hello, Lee,

In the example, if you edit the price and the quantity cells, the third column cell will be updated respectively as per the code in the save event ( price * quantity). Could you please let me know what does not work as expected?

[John]

Hi Georgi,

Thanks for the reply. What I have is working now, but I will circle back around and try your suggestion when I can. I'll update this thread when I try it.

Cheers
John

[Georgi]

Hello John,

Take your time to test the approach from my previous reply and let me know how it works for you.


Regards,
Georgi
Progress Telerik

[NHJ]

The best answer. I've been searching for this answer for a long time.