# Calculated Value in Datagrid

**URL:** <https://community.weweb.io/t/calculated-value-in-datagrid/2795>\
**Category:** Ask us anything\
**Tags:** data-grid\
**Created:** [May 24, 2023, 7:35am UTC](https://community.weweb.io/t/calculated-value-in-datagrid/2795 "2023-05-24T07:35:52Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [May 24, 2023, 7:35am UTC](https://community.weweb.io/t/calculated-value-in-datagrid/2795/1 "2023-05-24T07:35:52Z")

</div>

Hi all!

I have a datagrid with two columns that a user can edit, and a third read-only column which is the product of the first two user-editable columns.

What’s the best practice for the calculation? Do it in WeWeb and then send the calculated value to Xano? Or have Xano do the calc and then return it to WeWeb?

Thanks!

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [May 24, 2023, 8:14am UTC](https://community.weweb.io/t/calculated-value-in-datagrid/2795/2 "2023-05-24T08:14:10Z")

</div>

You can use a custom readonly column on your datagrid.  
Then drag and drop a text inside the flexbox which appears when toggling the column type to custom.  
Bind the text content to your formula 🙂 (context.item will contain your row)

If the calculation is easy (just a product), it’s always best to do it in front, to avoid corrupted data in the back (someone sending a value which is not the formula you want from the two others). Its also avoid storing too many data.

Note: it can be usecase when you want to have this column in the back (for sorting per ex), but in this case i advice that your post endpoint do the math before saving the data, not the front.

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [May 24, 2023, 4:16pm UTC](https://community.weweb.io/t/calculated-value-in-datagrid/2795/3 "2023-05-24T16:16:48Z")

</div>

Worked perfectly thanks @aurelie! 🤩

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [May 24, 2023, 5:09pm UTC](https://community.weweb.io/t/calculated-value-in-datagrid/2795/4 "2023-05-24T17:09:04Z")

</div>

And just to show you what I ended up with, I used the incredible AI co-pilot to generate some custom JS to format the output with a $, commas and two decimal places. Worked first time! Amazing.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d75ae882a4ff48c3f89c6876ffd43a21fb244921.png)

---

<div class="post-metadata">

**Author:** ![twinsticks](https://avatars.discourse-cdn.com/v4/letter/t/e274bd/32.png) [@twinsticks](https://community.weweb.io/u/twinsticks)\
**Post date:** [May 24, 2023, 7:12pm UTC](https://community.weweb.io/t/calculated-value-in-datagrid/2795/5 "2023-05-24T19:12:36Z")

</div>

Awesome to see folks using the AI tools. When I have a project it fits, I’ll be sure to check it out.

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [May 24, 2023, 10:57pm UTC](https://community.weweb.io/t/calculated-value-in-datagrid/2795/6 "2023-05-24T22:57:14Z")

</div>

@aurelie I did end up calculating the product in Xano as I will need it for other purposes. It’s ok to calculate the sane thing in two places? Why not just have Xano calculate it and return the total to the front end? Or have the front-end submit the calculated value to Xano? Either way it just feels wrong to calculate it twice. Am I overthinking?

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [May 25, 2023, 8:00am UTC](https://community.weweb.io/t/calculated-value-in-datagrid/2795/7 "2023-05-25T08:00:49Z")

</div>

If finally you end up needed it on the database, I advise you to have it handle by the backend only.

- The get should return the product
- The edit should only accept the two others parameters, and your backend will do the maths before pushing in the database
- in your datagrid you mark this column as read-only (no edit), and you can go back to a normal text column or keep the custom one but bind to the field of your backend instead of doing maths.

A reason to do the maths in front would be to have instant feedback while editing the other values (so you see the result before the backend process it). Can be a good user experience depending on your workflow.

Edit: I just watch your video, and I think you have the correct approach (modulo the eventual user feedback when editing). Only suggestion: I am not an expert in xano, but maybe do the maths and make only one update to the DB instead of push/read/push again (do not know if possible)

---

<div class="post-metadata">

**Author:** ![Dorian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorian/32/13183_2.png) [@Dorian](https://community.weweb.io/u/Dorian)\
**Post date:** [May 25, 2023, 5:59pm UTC](https://community.weweb.io/t/calculated-value-in-datagrid/2795/8 "2023-05-25T17:59:31Z")

</div>

Thanks again @aurelie. Yes in this case doing it in the back-end seemed correct. I will see if I can streamline the API further per your suggestion.

---

<div class="post-metadata">

**Author:** ![sgani](https://avatars.discourse-cdn.com/v4/letter/s/e47774/32.png) [@sgani](https://community.weweb.io/u/sgani)\
**Post date:** [November 13, 2024, 4:47pm UTC](https://community.weweb.io/t/calculated-value-in-datagrid/2795/9 "2024-11-13T16:47:53Z")

</div>

Hi Aurélie,

I have the same request with showing a calculated field based on 2 editable fields in the datagrid.  
The datagrid is populated through a collection from Xano.  
I added a custom column to show the total which is a product of the 2 editable fields.  
So the number display field has the following formula: item.data.quantity \* item.data.unit\_price.  
But when I edit the quantity or unit\_price the total doesn’t change which is logical because the data in the collection is not changed until you click save after editing.  
How do I make the total change when the quantity and unit\_price are changed without updating the collection?  
User story reason: creates an offer with several cost lines, wants to review the cost lines and make some changes. Wants to see the total change per line when he makes some changes. If he is satisfied, he clicks save and only then the collection is updated with the new values.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c81edc7ec219c122c89355171fd3aa98dfd99aa5.png)
