Custom components with FlexGridCellTemplate in React rendering too slow

Custom components with FlexGridCellTemplate in React rendering too slow

Posted by: igor.tashevski on 14 September 2023, 12:37 pm EST

• 

  igor.tashevski

  • Post Options:
  • Link
    Copy

  Posted 14 September 2023, 12:37 pm EST

  Hi,
  
  We have question how we can improve the loading of the flex grid table when we provide custom components on the template prop of the FlexGridCellTemplate component.
  
  The table gets lagish for few secons when custom component is rerendered for all cells.
  
  We’ve tried to use memo, useMemo, even sending the component as prop, to prevent some re-rendering, but nothing really help.

        {this.state.columns
                .map((columnName: string) => {
                  return (
                    <wjGrid.FlexGridColumn
                      key={columnName}
                      binding={columnName}
                      header={columnName}
                    >
                      <wjGrid.FlexGridCellTemplate
                        cellType='Cell'
                        template={(ctx: wjGrid.ICellTemplateContext) => (
                          <SomeComponent text={ctx.item[columnName]} />
                        )}
                      />
                    </wjGrid.FlexGridColumn>
                  );
                })}

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 14 September 2023, 8:03 pm EST

  Hi,

  I am unable to reproduce the issue on my end. Please provide a sample that replicates the issue, so I can assist you. You can also modify the provided sample to replicate the issue.

  If the issue cannot be replicated in a fresh sample then It might also be possible that the lag that you are experiencing is coming because of the functionality that is defined in the

  <SomeComponent text={context.item[columnName]} />

  component.

  Please refer to this sample for reference: https://jscodemine.grapecity.com/share/rVJtfT5lRkeZId8b9RtVHA

  Thank you.

  Regards
  
  Anirudh

• 

  igor.tashevski

  • Post Options:
  • Link
    Copy

  Posted 14 September 2023, 8:15 pm EST

  Hi,
  
  I’ve tried to add as simple as much context menu component (we are using material ui), but even as that, the rendering is slow.
  
  I’m showing the wijmo table instance inside Material UI modal, and when I have many records, than is slow for 5-6 seconds.

  Maybe try like this (replace WijmoInstance with yours and inside that wijmo instance replace SomeComponent in the template prop wtih BasicMenu component):

  import * as React from 'react';
  import Button from '@mui/material/Button';
  import Menu from '@mui/material/Menu';
  import MenuItem from '@mui/material/MenuItem';
  
  export default function BasicMenu() {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
    const open = Boolean(anchorEl);
    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
      setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
      setAnchorEl(null);
    };
  
    return (
      <div>
        <Button
          id="basic-button"
          aria-controls={open ? 'basic-menu' : undefined}
          aria-haspopup="true"
          aria-expanded={open ? 'true' : undefined}
          onClick={handleClick}
        >
          Dashboard
        </Button>
        <Menu
          id="basic-menu"
          anchorEl={anchorEl}
          open={open}
          onClose={handleClose}
          MenuListProps={{
            'aria-labelledby': 'basic-button',
          }}
        >
          <MenuItem onClick={handleClose}>Profile</MenuItem>
          <MenuItem onClick={handleClose}>My account</MenuItem>
          <MenuItem onClick={handleClose}>Logout</MenuItem>
        </Menu>
      </div>
    );
  }
  

  import * as React from 'react';
  import Box from '@mui/material/Box';
  import Button from '@mui/material/Button';
  import Typography from '@mui/material/Typography';
  import Modal from '@mui/material/Modal';
  
  
  const style = {
    position: 'absolute' as 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 400,
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4,
  };
  
  export default function BasicModal() {
    const [open, setOpen] = React.useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
  
    return (
      <div>
        <Button onClick={handleOpen}>Open modal</Button>
        <Modal
          open={open}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
        >
          <Box sx={style}>
            <WijmoTable />
          </Box>
        </Modal>
      </div>
    );
  }

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 17 September 2023, 6:02 pm EST

  Hi,

  I am unable to replicate the issue on my end. Could you please verify if the issue persists in the attached sample at your end or not?

  However, I have noticed that the cellTemplate takes more than the available space in a cell so the FlexGridCellTemplate autoSizes the rowHeight to accommodate cells’ content. This causes some amount(minimal/expected) amount of lag when the grid is scrolled. So, to verify if this autoSizing is causing the issue please set the autoSizeRows of FlexGridCellTemplate to false. This will disable the autoSizing of the row when a cellTemplate is rendered.

  If autoSizing is causing the issue and each row has the same height then you can set the defaultSize property of Rows collection of FlexGrid to set each row height. However, if the height of each row is different then in that case you can autoSize the visible rows manually. This will increase the performance of the FlexGrid.

  Please refer to this DEMO link for manually autoSizing the visible rows: https://www.grapecity.com/wijmo/demos/Grid/Sizing/Auto-sizeRowsAsync/react

  Please refer to this modified sample: Custom_Component_Rendering.zip

  Regards,
  
  Anirudh