Forums Ignite UI for React
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Shubham Patil
590
Want to change the value of one column by changing the value of another column of that particular row
posted

Hi

I want a small clarification on one use case related to IgrDataGrid.

When we enter the value in any row in Orders columns then press on tab button and then press enter button the value of that particular row in Orders Totals columns is set to its previous value.

You can reproduce the issue by following below-mentioned link. Add cellValueChanging property in IgrDataGrid and add the below function.

https://codesandbox.io/s/wild-dust-mtvyxh?file=/src/index.tsx:2877-2894

public onCellValue = (e: any, event: any) => {
    const column = event.column;
    const item = event.item;
    let rowItem = item;
    
    if (["OrderItems", "OrderValue"].includes(column.props.field)) {
      let value = parseFloat(event.newValue);
      if (column.props.field === "OrderItems") {
        let val = value;
        rowItem.OrderValue = Number(val.toFixed(2));
      } else if (column.props.field === "OrderValue") {
        rowItem.OrderItems = Number(value);
      }
      let foundRowIndex = this.data.findIndex((data) => {
        return data.ProductID === rowItem.ProductID;
      });

      if (foundRowIndex > -1) {
        this.data[foundRowIndex] = rowItem;
      }
    }
  };

I have attached the video to reproduced the issue.

drive.google.com/.../view

We Hope you will provide the solution for the above mentioned issue or an alternate approach for the same.

Thanks

Parents
No Data
Reply
  • 34830
    Offline posted

    Hello Shubham,

    I have been investigating into the behavior you are seeing, and I have reproduced it. I believe this is likely due to a timing issue between the two columns in which the following steps happen

    1. Enter edit mode on “Orders” (OrderItems) and enter a new value.
    2. Press “Tab” to commit the value and push the value to the “Order Totals” (OrderValue) column.
    3. While step 2 is happening, “Order Totals” goes into edit mode. I believe this is where the timing issue is, because it appears to be retaining its old cell value.
    4. Tab out of “Order Totals” – this causes cellValueChanged to fire because the text in the editor is different than what it thinks the cell value is (the old value), but no edit has been detected because there was no action in the editor, so cellValueChanged fires with the wrong value.

    I believe this to be a bug in the IgrDataGrid. I attempted to create a workaround using the cellEditEnded event instead of cellValueChanging, but unfortunately the same behavior was present. The only workaround I know of so far is to not have Orders and Order Totals directly next to each other so that you cannot directly tab into one from the other as this avoids the timing issue because there is another column that has to go through the “edit mode cycle” first.

    I have logged this issue on our Ignite UI for React GitHub page, here: https://github.com/IgniteUI/igniteui-react/issues/36. The next step will be for a developer to investigate and offer a fix or other resolution. I encourage you to follow the GitHub issue linked above so you can be notified when something changes about it and be notified that a fix has been made.

    Please let me know if you have any other questions or concerns on this matter.

Children
No Data