Implementing an autocomplete that stores ID and shows the Name of a component [question]

[adharshmk96]

Order ID 💳

45398

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I've implemented an autocomplete field as a custom component for a datagrid cell.
I'd like to change it such that it shows label and we can select from the list of labels.

Here's the current implemented code.

Column definition

{ 
            field: "Source_FK_Connections_ID",
            headerName: "Source Connections",
            width: 250,
            editable: true,
            renderCell: (renderParams) => {
                return <div>
                    {renderParams.row.Source_FK_Connections_ID}
                </div>;
            },
            renderEditCell: (editParams) => {
                return SourceConnectionAutoComplete(editParams, jobConnection);
            }
        },

Rows

const rows: GridRowModel[] = db2fs.map((item) => {
        return {
            id: item.ID,
            Source_FK_Connections_ID: item.Source_FK_Connections_ID
        }
}

Autocomplete code

export const SourceConnectionAutoComplete = (editParams: GridRenderCellParams, jobConnections: TJobConnectionsModelContent[]) => {
    const {id} = editParams;
    const apiRef = useGridApiContext();

    const valueOptions = jobConnections.map((item) => item.ID)


    return <Autocomplete
            disablePortal
            options={valueOptions}
            sx={{ width: editParams.colDef.width }}
            renderInput={(inputParams) => <TextField {...inputParams} />}
            value={editParams.row.Source_FK_Connections_ID}
            onChange={(_, value) => {
                apiRef.current.setEditCellValue({ id, field: "Source_FK_Connections_ID", value });
            }}
        />
}

A modification I attemtped is as follows.

changed column definition to this

Column definition

{ 
            field: "Source_FK_Connections_ID",
            headerName: "Source Connections",
            width: 250,
            editable: true,
            renderCell: (renderParams) => {
                return <div>
                    {renderParams.row.sourceConnectionName}
                </div>;
            },
            renderEditCell: (editParams) => {
                return SourceConnectionAutoComplete(editParams, jobConnection);
            }
        },

changed rows to have this.

const rows: GridRowModel[] = db2fs.map((item) => {
        return {
            id: item.ID,
            Source_FK_Connections_ID: item.Source_FK_Connections_ID
            sourceConnectionName: jobConnection.find(job => job.ID ==  item.Source_FK_Connections_ID)?.Name
        }
}

I modfied the custom component code to the following

export const SourceConnectionAutoComplete = (editParams: GridRenderCellParams, jobConnections: TJobConnectionsModelContent[]) => {
    const {id} = editParams;
    const apiRef = useGridApiContext();

    const valueOptions = jobConnections.map((job) =>{
        id: job.ID,
        label: job.Name
    })


    return <Autocomplete
            disablePortal
            options={valueOptions}
            sx={{ width: editParams.colDef.width }}
            renderInput={(inputParams) => <TextField {...inputParams} />}
            value={editParams.row.sourceConnectionName}
            onChange={(_, value) => {
                apiRef.current.setEditCellValue({ id, field: "Source_FK_Connections_ID", value: value.id });
                apiRef.current.setEditCellValue({ id, field: "sourceConnectionName", value: value.label });
            }}
        />
}

But this implementation doesn't seem to change the values in the table after selection.

Your environment 🌎

`npx @mui/envinfo`

   System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 14.20.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.17 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.62)
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0
    @emotion/styled: ^11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.79
    @mui/icons-material: ^5.6.2 => 5.6.2
    @mui/lab: ^5.0.0-alpha.80 => 5.0.0-alpha.80
    @mui/material: ^5.6.4 => 5.6.4
    @mui/private-theming:  5.6.2
    @mui/styled-engine:  5.6.1
    @mui/system:  5.6.4
    @mui/types:  7.1.3
    @mui/utils:  5.6.1
    @mui/x-data-grid:  5.12.1
    @mui/x-data-grid-pro: ^5.12.1 => 5.12.1
    @mui/x-date-pickers:  5.0.0-alpha.0
    @mui/x-license-pro:  5.12.1
    @types/react: ^18.0.2 => 18.0.2
    react: ^18.0.0 => 18.0.0
    react-dom: ^18.0.0 => 18.0.0
    typescript: ~4.5.4 => 4.5.5

[DanailH]

Hi, @adharshmk96 thanks for raising this!
Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[adharshmk96]

hello @DanailH I can't use apiRef.current.setEditCellValue in codesandbox right ? as its only for pro version

[DanailH]

hello @DanailH I can't use apiRef.current.setEditCellValue in codesandbox right ? as its only for pro version

You can use the DataGridPro in the sandbox if you want, it will just display a warning. You can check the demo for updating rows as an example -> https://codesandbox.io/s/qjsd8x?file=/demo.tsx

[m4theushw]

You can take a look at #5506 (comment) to see how to implement a custom edit component based on Autocomplete.