Flex grid in react with new row to add value

Flex grid in react with new row to add value

Posted by: ankita on 24 March 2023, 10:04 am EST

• 

  ankita

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 24 March 2023, 10:04 am EST - Updated 24 March 2023, 10:09 am EST

  Hi there,

  I am attempting to create a Wijmo FlexGrid in React with a default extra row at the bottom for adding new items to the grid. The grid has three columns, with one of the columns being a dropdown that uses a data map, while the other two are simple numbers.
  
  I have attached an image of the grid.
  
  The first issue I am encountering is that when I edit one column on the new row and move to the next, the previous data is getting removed.
  
  The second issue is that the selected data from the dropdown is not being retained.

  For reference below is my code.

  [code]

  import { Modal } from “react-bootstrap”
  
  import { FlexGrid, FlexGridColumn } from ‘@grapecity/wijmo.react.grid’;
  
  import { DataMap } from ‘@grapecity/wijmo.grid’;
  
  import { useRef, useState } from “react”;
  
  import { Transform, Type } from “class-transformer”;
  
  import { Money } from “…/…/models/money”;

  export class QuoteCostGrid {
  
  costId: number = 0;
  
  description: string = “”;
  
  itemId: string = “”;

  @Type(() => Money)
  @Transform(({ value }) => new Money(value), { toClassOnly: true })
  price: Money | null = null;
  
  @Type(() => Money)
  @Transform(({ value }) => new Money(value), { toClassOnly: true })
  retail: Money | null = null;
  
  markup: number = 65;
  

  }

  export function QuoteCosts({ showCostpopup, closeCostpopup, selectedOption }: { showCostpopup: boolean, closeCostpopup: () => void, selectedOption:number|null }) {
  
  const [editingRowData, setEditingRowData] = useState({});
  
  const [costGridData, setCostGridData] = useState<QuoteCostGrid>();
  
  const gridRowHeight = 28;
  
  const gridRef = useRef<any | null>(null);
  
  const costItems = [{ “itemId”: “LABRUGREPAIRC”, “description”: “RUG REPAIR | AREA RUG REPAIR COMMERCIAL” },
  
  { “itemId”: “LABHOMESERVICEC”, “description”: “IN HOME SERVICE | INSTALLATION COMMERCIAL” },
  
  { “itemId”: “LABINSTLABORC”, “description”: “INSTALLATION: LABOR | INSTALLATION COMMERCIAL” },
  
  { “itemId”: “LABINSTMISCC”, “description”: “INSTALLATION: MISC CHARGE | INSTALLATION COMMERCIAL” }]
  
  const costItemsMap = new DataMap(costItems, ‘itemId’, ‘description’);

  const initializeGrid = (flex: any) => {
      gridRef.current = flex;
      flex.select(-1, -1);
      flex.rows.defaultSize = gridRowHeight;
  
      flex.bottomLeftCells.setCellData(0, 0, '?');
      flex.columnHeaders.rows.defaultSize = gridRowHeight;
      flex.columnFooters.rows.defaultSize = gridRowHeight;
  
      flex.beginningEdit.addHandler((s: any, args: any) => {
          let selectedRowIndex = s.selection.row;
          if (selectedRowIndex != -1) {
              const currentRow = s.rows[selectedRowIndex].dataItem;
              console.log(s.rows);
              if (currentRow) {
                  console.log(currentRow);
                  const otherValues = {
                      itemId: currentRow.itemId,
                      price: currentRow.price,
                      retail: currentRow.retail,
                      markup: currentRow.markup
                  };
                  setEditingRowData(otherValues);
              }
          }
      });
  
      flex.cellEditEnded.addHandler((s: any, args: any) => {
          let selectedRowIndex = s.selection.row;
          if (selectedRowIndex != -1) {
              const currentRow = s.rows[selectedRowIndex].dataItem;
              console.log(currentRow);
              const newData = [...costGridData];
              newData[selectedRowIndex] = { ...currentRow };
              setCostGridData(newData);
              setEditingRowData({});
          }        
      });
  }
  
  const handleRowAdded = (e: any) => {
      const newItem = new QuoteCostGrid();
      setCostGridData(costGridData.concat(newItem));
      //setCostGridData([...costGridData, newItem]);
  };
  
  return (
      <Modal show={showCostpopup} fullscreen={"xl-down"} size={ "lg"} className={"quote-cost-modal"} onHide={closeCostpopup} >
          <Modal.Header closeButton>
              <Modal.Title>Quote - Costs {selectedOption}</Modal.Title>
          </Modal.Header>
          <Modal.Body className={"quote-cost-body"} >
              <FlexGrid initialized={initializeGrid} headersVisibility={'Column'} headerHeight={50}
                  itemsSource={costGridData}
                  allowAddNew={true}
                  newRowAtTop={false}
                  onRowAdded={handleRowAdded}
              >
                  <FlexGridColumn header="Item" binding="itemId" name="itemId" dataMap={costItemsMap} width="2*" align="left" />
                  <FlexGridColumn header="Cost" binding="price" name="price" width="*" align="right" />
                  <FlexGridColumn header="Net" binding="retail" name="retail"  width="*" align="right" />
                  <FlexGridColumn header="M/U%" binding="markup" name="markup"  width="*" align="center" />
                  <FlexGridColumn header=" " binding="option" name="option" width="*" align="center" />
              </FlexGrid>
          </Modal.Body>
      </Modal>
  )
  

  }
  
  [/code]

  

  787×180 9.67 KB

  

  787×180 9.67 KB

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 26 March 2023, 8:02 pm EST

  Hi,

  This issue is caused by the ‘onRowAdded’ event handler, which seems to be a bug, So we have escalated this issue to the dev team for further investigation with internal tracking id - WJM-26452. We will update you as soon as we have a response from the dev team.
  
  Meanwhile, to avoid this issue, please try to avoid handling the ‘onRowAdded’ event of the flexGrid.

  Regards

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 5 February 2024, 8:24 pm EST

  Hi Ankita,

  The issue was caused by the ‘onRowAdded’ method, actually ‘onRowAdded’ is a method that raises the ‘rowAdded’ event, which gets over-ridden by the following statement in your code -

  onRowAdded={handleRowAdded}

  Hence, the issue occurs. The actual event you need to handle is ‘rowAdded’ event, you can modify the ‘onRowAdded’ to ‘rowAdded’ in your code to avoid this issue, like this -

  rowAdded={handleRowAdded}

  Here’s a sample for your reference - https://stackblitz.com/edit/react-ts-ewejfk?file=App.tsx

  Regards

• 

  digitechroshni

  • Post Options:
  • Link
    Copy

  Posted 6 February 2024, 7:33 pm EST

  Hey,
  
  To resolve the issues with your Wijmo FlexGrid:

  1. Ensure data from the previous column is properly saved before moving to the next one.
  2. Verify the correct binding of dropdown values to grid data fields.