Unable to Change Custom Cell Values (Dropdown)

[SyedSibtainRazvi]

Problem: Hey team, I am experiencing an issue in which I cannot change the values of custom cells, specifically dropdowns, in my application. Despite the console logs showing the correct value, the changes are not being reflected in the dropdowns. The edit functionality of other cells is working as expected and this is happening with custom cells. Would request further information on handling the edit of custom cells in glide-apps-grid. Let me know if any further information is required. Thank you

Here is the on-cell edited function:

// Sample code that demonstrates how the update is attempted
const onCellEdited = (cell: Item, newValue: CustomCell) => {
    const [col, row] = cell;
    const attribute = attributes[col];

    if (newValue.kind === "custom" && newValue.data.kind === "dropdown-cell") {
        const dropdownValue = newValue.data.value;

        // Update the dropdown value in indicatorRecord
        setIndicatorRecord((prevRecords: IndicatorRecord[]) => {
            const newRecords = [...prevRecords];
            newRecords[row] = {
                ...newRecords[row],
                [attribute.name]: dropdownValue,
            };
            return newRecords;
        });
    }
    // ...
};

[SyedSibtainRazvi]

My other approach is mentioned below, which works although I am curious to know if there is any better way to handle this.

`setIndicatorRecord((prevRecords: IndicatorRecord[]) => {
        const newRecords = [...prevRecords];
        newRecords[row] = {
          ...newRecords[row],
          org_node: {
            ...newRecords[row].org_node,
            name: dropdownValue,
          },
        };
        return newRecords;`

[jassmith]

I need a more complete example to see what is going on. How are you informing the grid of the change?

[SyedSibtainRazvi]

Hey @jassmith, adding more information, so about the change, I am doing the following.

 const onCellEdited = (cell: Item, newValue: CustomCell) => {
    const [col, row] = cell;
    const attribute = attributes[col];
    const dropdownValue: string = newValue.data.value;
    setIndicatorRecord((prevRecords: IndicatorRecord[]) => {
        const newRecords = [...prevRecords];
        newRecords[row] = {
          ...newRecords[row],
          org_node: {
            ...newRecords[row].org_node,
            name: dropdownValue,
          },
        };
        return newRecords;

 <DataEditor
        {...cellProps}
        getCellContent={getCellContent}
        columns={[...columns]}
        rows={rows}
        rowMarkers="number"
        freezeColumns={1}
        onCellEdited={onCellEdited}
        onRowAppended={onRowAppended}
        trailingRowOptions={{
          sticky: true,
          tint: true,
          hint: "Add Row",
        }}
      />

The above one works, just wanted to know if there is a better way to handle it. Also, let's say I have a custom cell called date-picker-cell. How should I handle it when the user tries to edit the date in the cell, would appreciate any information regarding this. Once again thank you, appretiate it

 const getCellContent = (cell: Item): EditableGridCell => {
    const [col, row] = cell;
    const attribute = attributes[col];
if (attribute.name === "date") {
      return {
        kind: GridCellKind.Custom,
        allowOverlay: true,
        readonly: isRowDisabled,
        copyData: "",
        themeOverride: {
          textDark: "#777777",
          bgIconHeader: "#CCCCCC",
          accentColor: "#777777",
          accentLight: "#CCCCCC20",
          fgIconHeader: "#FFFFFF",
          baseFontStyle: "600 13px",
          bgCell: "#F6F5F5",
        },
        data: {
          kind: "date-picker-cell",
          date: new Date(),
          displayDate: record ? record.start_date : "",
          format: "date",
        },
      };