Grid Column Value change on client side

2 Answers 3924 Views
Grid
Alex
Top achievements
Rank 1
Alex asked on 03 Mar 2014, 02:14 PM
I am working on the Kendo Grid (Batch Editing) with following columns:

A - Stock Value (Numeric) - Non-Editable
B - Item Type (DropDown) - values are "In Stock", "Purchase", "Out Stock", "Credit" - Editable
C - Percentage (Numeric) - Editable
D - Sale Price (Numeric) - Editable
E - Amount - Non-Editable

My requirement is when I change any of the editable field (i.e. Item Type, Percentage or Sale Price), the "Amount" field should be calculated based on following formula.

If "Item Type" = "In Stock" then "Amount" = "Stock Value" - "Percentage"
If "Item Type" = "Purchase" then "Amount" = ("Stock Value" + "Percentage") * "Sale Price"
If "Item Type" = "Out Stock" then "Amount" = ("Stock Value" - "Percentage") * "Sale Price"

If "Item Type" = "Credit" then "Amount" = "Percentage" * "Sale Price"

The "Amount value should be calculated, as soon as I change any of the editable field.

Thanks for your help in advance.

Regards,
Komail Noori

2 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 05 Mar 2014, 11:36 AM | edited on 11 Jan 2024, 09:41 PM
Hello,

This can be achieved by using the dataSource change event to to update the Amount value and refresh the Grid. I created a small example(updated sample) that demonstrates this scenario.

Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Alex
Top achievements
Rank 1
commented on 06 Mar 2014, 06:43 AM

Thanks. This is exactly what I was looking for.
Alex
Top achievements
Rank 1
commented on 06 Mar 2014, 07:10 AM

One more thing here. I want the "red mark" on the top left of the edit field for all the records, until I press "Save" or "Cancel" button on the top. Currently the red mark disappear from the cell once I change some other cell value. My page is available at http://96.0.71.195/test

Thanks in advance.

Regards,
Komail
Alex
Top achievements
Rank 1
commented on 06 Mar 2014, 08:03 AM

One more major issue with this solution is that I have several columns on my grid. So every time I change a value, the grid gets refreshed and the control goes back to the first column and first row of the grid. I want the control to be remain on that cell which was last edited.

Please advise.

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 11 Jan 2024, 04:02 PM

The small example link returns a 404. Is there an updated example?
Patrick | Technical Support Engineer, Senior
Telerik team
commented on 11 Jan 2024, 09:40 PM

For reference, here's an updated version of the example above.  Hope this helps!
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 11 Jan 2024, 09:58 PM

Thank you, Patrick. This is great! 
0
Daniel
Telerik team
answered on 10 Mar 2014, 08:57 AM
Hello again,

In the case you will need to update the cell content without using the refresh method e.g.
if (currentValue !== model.Amount) {
    model.Amount = currentValue;
    $("#grid").find("tr[data-uid='" + model.uid + "'] td:eq(4)").text(currentValue);                       
}



Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
axwack
Top achievements
Rank 1
commented on 23 Jan 2016, 03:14 AM

Where can you find the documentation on the attributes for Jquery? In your example, 

 

$("#grid").find("tr[data-uid='" + model.uid + "'] td:eq(4)").text(currentValue);  

How did you know to look for this? 

 

Nikolay Rusev
Telerik team
commented on 27 Jan 2016, 08:54 AM

Hello Vincent,

 

The grid uses the uid data attribute to determine the data to which a table row is bound to.

 

It is mentioned in the row templates documentation. The other part of the selector is to find the appropriate cell element.

 

Regards,
Nikolay Rusev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Alex
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or