Grid with rowSpan crashes pagination

[smd]

Hi,

Is there a way to have both rowSpan and Pagination on a grid? 

My grid originally has pagination, now that I am trying to merge rows, which have the same values, within a column into a cell; other columns remain the same. I found that once I achieve that it displayed the grid briefly (enough to observed merged rows), but it crashed right away and report error on pagination. I can't remember the exact error but it has something to do with "process", "slice"...

Thank you for the support

Luu

 

[Konstantin Dikov]

Hi Luu,

I have tested our rowSpan demo by enabling paging on it, but I was not able to observe any issues with the implementation:

• https://stackblitz.com/edit/react-yhhscl?file=app%2Fmain.jsx

If the issue on your side persists, please share an example reproducing the problem, so we can test and debug it locally.

Looking forward to your reply.

 

Regards,
Konstantin Dikov
Progress Telerik

[smd]

Thank you Konstantin, I will look further into my codes to see where it goes wrong

[smd]

Hi Telerik Support Team,

https://stackblitz.com/edit/react-yhhscl-qdhn6r?file=app%2Fmain.jsx

Please look at the above code with a minor modification - I moved the Discontinued column to another location, besides the last column.

You will notice the column is rendered incorrectly when you move to another pages. This is the issue I have been having. I hope you can help

 

[Konstantin Dikov]

Hi,

Thank you for sharing an example demonstrating the issue.

The issue in question is due to the fact that the field added to the dataItems that determines the rowSpan of each cell is written for the case with no paging. In order to have the correct values for the row span you need to add that field only after the paging operation is applied, so that it can be handled per page. Here is the modified example that resolves the issue;

• https://stackblitz.com/edit/react-yhhscl-2hczm4?file=app%2Fmain.jsx

  const finalData = React.useMemo(() => {
    const processedData = process(gridData, dataState);

    const data = {
      data: mergeCells(processedData.data),
      total: processedData.total,
    };
    return data;
  }, [dataState, gridData]);
  return (
    <div>
      <Grid
        style={{
          height: '700px',
        }}
        data={finalData}

[smd]

Thank you! Thank you! This is exactly where I have been stuck on