Grid Column Value change on client side

[Alex]

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

[Daniel]

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

[Alex]

Thanks. This is exactly what I was looking for.

[Alex]

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]

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]

The small example link returns a 404. Is there an updated example?

[Patrick | Technical Support Engineer, Senior]

For reference, here's an updated version of the example above.  Hope this helps!

[Lee]

Thank you, Patrick. This is great! 

[Daniel]

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

[axwack]

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]

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