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
30
whole IgrDataGrid gets re-rendered after an update to the data source. I am using hooks.
posted

I have a big matrix for representing data. After detecting a click event on the cell, a pop-up is opened and data is entered, which is then send to the backend and dataSouce is array is updated. The problem is that after updating the dataSouce, the whole grid re-renders and the scroll postition the grid was previously at is reset.

IgrDataGridModule.register();

const Matrix = (props) => {
    const { formData, priceMatrix, fetchPricingMatrixData, applyFilter } = props;
    const [data, setData] = useState([]);
    const [priceModal, setPriceModal] = useState(false);
    const [modalData, setModalData] = useState({});
    const [cellCoordinates, setCellCoordinates] = useState();

    const gridRef = useRef();

    useEffect(() => {
        fetchPricingMatrixData(formData);
    }, []);

    useEffect(() => {
        if (priceMatrix.failed) {
            toast.error('failed to get matrix data', { ...toasterFade });
        }
        setData(priceMatrix?.data ?? []);
    }, [priceMatrix]);

    useEffect(() => {
        if (gridRef.current && data.length > 0 && cellCoordinates) {
            gridRef.current.scrollTo(cellCoordinates.x, cellCoordinates.y);
        }
    }, [gridRef, data]);

    const toggleModal = () => {
        setPriceModal(!priceModal);
        gridRef.current.selectedCells.clear();
    };

    const generateColumns = () => {
        let columns = [];
        if (data.length > 0) {
            for (let obj of Object.keys(data[0])) {
                if (obj !== '$hashCode') {
                    columns.push(
                        <IgrTextColumn
                            name={obj}
                            key={obj === 'Zone' ? `${obj}.name` : `${obj}.price`}
                            field={obj === 'Zone' ? `${obj}.name` : `${obj}.price`}
                            headerText={`${obj}`}
                            width='*>170'
                            horizontalAlignment='center'
                            pinned={obj === 'Zone' ? 'left' : 'none'}
                            columnOptionsIconBehavior={obj === 'Zone' ? 'AlwaysVisible' : 'Unset'}
                            isColumnOptionsEnabled={obj === 'Zone' ? 'true' : 'false'}
                        />
                    );
                }
            }
        }
        return columns;
    };

    const onClick = (grid, v) => {
        console.log(grid, v);
        if (v instanceof IgrGridCellEventArgs) {
            const [selection] = grid.selectedCells.toArray();
            customLogger('selection args', selection, grid, v);
            if (selection && selection.columnUniqueKey !== 'Zone') {
                const cellData = {
                    ...selection.rowItem[selection.columnUniqueKey],
                    rowIndex: v.cellInfo.dataRow,
                    snappedX: v.cellInfo.snappedX - 170,
                    snappedY: v.cellInfo.snappedY - 120,
                    // columnIndex: Object.keys(selection.rowItem).indexOf(selection.columnUniqueKey),
                };
                setCellCoordinates({ x: v.cellInfo.snappedX - 200, y: v.cellInfo.snappedY - 170 });
                // grid.scrollTo(v.cellInfo.snappedX - 170, v.cellInfo.snappedY - 120);
                // console.log(v.cellInfo.snappedX, v.cellInfo.snappedY);
                setModalData(cellData);
                setPriceModal(true);
            }
        }
    };

    return (
        !priceMatrix.loading && (
            <>
                <IgrDataGrid
                    ref={gridRef}
                    dataSource={data}
                    height='62vh'
                    width='100%'
                    headerBackground='#f6f9fc'
                    autoGenerateColumns={'false'}
                    columnShowingAnimationMode='auto'
                    columnHidingAnimationMode='auto'
                    defaultColumnMinWidth={100}
                    isColumnOptionsEnabled='true'
                    rowHeight='40'
                    selectionMode={'SingleCell'}
                    // editModeClickAction="DoubleClick"
                    selectionBehavior='Toggle'
                    activationMode={'Cell'}
                    cellClicked={onClick}
                    filterUIType='ColumnOptions'
                    // editOnKeyPress={false}
                    // enterBehavior={'Edit'}
                    // enterBehaviorAfterEdit={'MoveRight'}
                    // cellClicked={(...props) => console.log(props[0].selectedCells.clear())}
                    editMode={'None'}
                >
                    {generateColumns()}
                </IgrDataGrid>
                <Modal active={priceModal} toggle={toggleModal} heading={'Pricing'} size={'md'} centered={true}>
                    <FixPriceModal
                        modalData={modalData}
                        setModalData={setModalData}
                        data={data}
                        setData={setData}
                        formData={formData}
                        toggle={toggleModal}
                        applyFilter={applyFilter}
                        setCellCoordinates={setCellCoordinates}
                    />
                </Modal>
            </>
        )
    );
};
Parents
  • 33240
    Verified Answer
    Offline posted

    Hello Ifti,

    I have been investigating into the behavior you are seeing, and while I am unsure of what your setModalData and setPriceModal methods are doing in this case within the onClick method you have defined, I can say that if the entire grid is re-rendering, it is likely that the instance of the data collection you have bound to the IgrDataGrid’s data source is changing. That is, your data source is likely being set to a new collection.

    If this is the case, it is expected that the grid is re-rendering, as you are essentially wiping out all of the existing rows of the grid and replacing them with new ones. Would it be possible for you to please confirm whether or not you are replacing your data variable with a new collection?

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

Reply Children
No Data