Click on row removed Datagrid

[BogdanScherban]

@fzaninotto
Hi, Francois! Right now I found new issue.

Let's look at the video:
https://drive.google.com/file/d/1GqvCtBPnVX8Xkp1qYcT-1T21KsujMb41/view

When we click on the row at the page 2 and more, content of ids array in Store (I mean admin.resources.allergies.list.ids) is removed, and we can see only one id here - id of item, which we click on.

This problem is absent only at first page of list (paginator = 1).

My assumption: it is because program don't know current page=X and perPage=Y.
Because when I try to use URL like:

/{resourseName}/{id}?page=2&perPage=10

the problem is absent:

I can try to find a way how to add page and perPage to URL when we click on row, but is it true way?

[fzaninotto]

As seen together on the phone, you can pass a function as rowClick and build a URL containing the query parameters busing document.location

[BogdanScherban]

@fzaninotto

Hi, Francois!
I tried to use custom rowClick to solve this problem. But this solution doesn't work with custom datagrid:

function getPath(id, basePath, record) {
    console.log('++++++++++++++++++++++++++++++++++++++++++++')
    console.log('id', id);
    console.log('basePath', basePath);
    console.log('record', record);
    ...
    ...
    ...
}

const CustomDatagridBody = ({ CustomRow, location, hiddenColumns, history, ...rest }) => {
    return (
        <DatagridBody
            row={<CustomRow
                location={location}
                hiddenColumns={hiddenColumns}
                history={history}
            />}
            {...rest}
        />
    );
};


const CustomDatagrid = ({ classes, history, CustomRow, CustomTableHead, hiddenColumns, location, ...rest }) => {
    return (
        <Datagrid
            rowClick={(id, basePath, record) => getPath(id, basePath, record)}
            body={
                <CustomDatagridBody
                    location={location}
                    hiddenColumns={hiddenColumns}
                    history={history}
                    CustomRow={CustomRow}
                />}
            {...rest}
        />
    );
};

const DatagridBlock = ({ classes, location, hiddenColumns, isCustomDatagrid, children, history, CustomRow, CustomTableHead, ...rest }) => {
    if (isCustomDatagrid) {
        return (
            <div className={classes.tableWrapper}>
                <CustomDatagrid
                    className={classes.tableList}
                    hiddenColumns={hiddenColumns}
                    location={location}
                    CustomRow={CustomRow}
                    CustomTableHead={CustomTableHead}
                    history={history}
                    {...rest}
                >
                    {children}
                </CustomDatagrid>
            </div>
        );
    }
    return (
        <div className={classes.tableWrapper}>
            <Datagrid
                className={classes.tableList}
                classes={{ rowEven: classes.rowEven, rowOdd: classes.rowOdd  }}
                rowClick={(id, basePath, record) => getPath(id, basePath, record)}
                {...rest}
            >
                {children}
            </Datagrid>
        </div>
    );
};

I checked it, by disabling these rows:

const DatagridBlock = ({ classes, location, hiddenColumns, isCustomDatagrid, children, history, CustomRow, CustomTableHead, ...rest }) => {
    // if (isCustomDatagrid) {
    //     return (
    //         <div className={classes.tableWrapper}>
    //             <CustomDatagrid
    //                 className={classes.tableList}
    //                 hiddenColumns={hiddenColumns}
    //                 location={location}
    //                 CustomRow={CustomRow}
    //                 CustomTableHead={CustomTableHead}
    //                 history={history}
    //                 {...rest}
    //             >
    //                 {children}
    //             </CustomDatagrid>
    //         </div>
    //     );
    // }
    return (
        <div className={classes.tableWrapper}>
            <Datagrid
                className={classes.tableList}
                classes={{ rowEven: classes.rowEven, rowOdd: classes.rowOdd  }}
                rowClick={(id, basePath, record) => getPath(id, basePath, record)}
                {...rest}
            >
                {children}
            </Datagrid>
        </div>
    );
};

In this case we can see console.log() results. But when we try to use rowClick={....} with CustomDatagrid, console.log() is absent.

I tried to add rowClick={....} also to:

• CustomDatagridBody
• DatagridBody
• CustomRow

But in all cases console.log() doesn't appear in Console.
Is rowClick work with custom datagrid generally?

[BogdanScherban]

@tony-shannon @PhilBarrett
This issue was fixed.
I tried to use DatagridRow instead of TableRow - table not working in this case.
But I changed onClick - now it add page to URL. I forgot, that we redirect user to show page manually (not by RA-functionality), so we have possibility to control it.

And it works!!!
@djhi, thank you very much for help!