NextJS 13 React DataGrid dropdownedit isn't triggered

[Sascha Affolter]

In NextJS 13 and React, I have the issue that when I double-click on a grid field to enter edit mode, the affected field isn't displayed as a drop-down list but as a text field and selection from a predefined list isn't possible. Here's the code:

"use client";

import React, { useEffect, useState } from "react";

import {

  GridComponent,

  ColumnsDirective,

  ColumnDirective,

  Toolbar,

  Inject,

  Edit,

} from "@syncfusion/ej2-react-grids";

const ProjektePage = () => {

  const [data, setData] = useState([]);

  const toolbarOptions = ["Add", "Edit", "Delete", "Update", "Cancel"];

  const editOptions = {

    allowEditing: true,

    allowAdding: true,

    allowDeleting: true,

  };

  const fetchData = async () => {

    const data = [

      {

        id: 1,

        Projekte: "Project 1",

        Kunden: "Customer A",

        Budget: 10000,

        Bemerkungen: "Lorem ipsum dolor sit amet consectetur adipisicing elit",

      },

      {

        id: 2,

        Projekte: "Project 2",

        Kunden: "Customer B",

        Budget: 15000,

        Bemerkungen:

          "Natus molestias, qui hic reiciendis aliquam fugiat voluptatem",

      },

      {

        id: 2,

        Projekte: "Project 2",

        Kunden: "Customer C",

        Budget: 13000,

        Bemerkungen: "Ut harum ipsam quos cum minus omnis assumenda possimus",

      },

      {

        id: 2,

        Projekte: "Project 2",

        Kunden: "Customer B",

        Budget: 18000,

        Bemerkungen: "Aspernatur cupiditate sint exercitationem architecto",

      },

    ];

    setData(data);

  };

  useEffect(() => {

    console.clear();

    fetchData();

  }, []);

  return (

    <div className="container w-[90%] lg:w-[80%] mx-auto mt-4 p-4 bg-white-100 border rounded-xl shadow-lg">

      <GridComponent

        dataSource={data}

        editSettings={editOptions}

        toolbar={toolbarOptions}

      >

        <ColumnsDirective>

          <ColumnDirective

            field="id"

            headerText=""

            textAlign="Left"

            width="40"

            isPrimaryKey={true}

          />

          <ColumnDirective

            field="Projekte"

            headerText="Projekte"

            textAlign="Left"

            width="200"

          />

          <ColumnDirective

            field="Kunden"

            headerText="Kunden"

            textAlign="Left"

            width="150"

            type="dropdownedit"

            edit={{

              params: {

                dataSource: ["Customer A", "Customer B", "Customer C"],

              },

            }}

          />

          <ColumnDirective

            field="Budget"

            headerText="Budget"

            textAlign="Left"

            width="80"

            format="C0"

          />

          <ColumnDirective

            field="Bemerkungen"

            headerText="Bemerkungen"

            textAlign="Left"

            width="200"

          />

        </ColumnsDirective>

        <Inject services={[Edit, Toolbar]} />

      </GridComponent>

    </div>

  );

};

export default ProjektePage;

Any Help is appreciated.

[Pavithra Subramaniyam]

Hi Sascha Affolter,

You can achieve your requirement by setting the “column.editType” property as “dropdownedit”. Please refer to the below code example and documentation link for more information.

<ColumnDirective

            field="Kunden"

            headerText="Kunden"

            textAlign="Left"

            width="150"

            editType="dropdownedit"

            edit={{

              params: {

                dataSource: ["Customer A", "Customer B", "Customer C"],

              },

            }}

          />

 

https://ej2.syncfusion.com/react/documentation/grid/editing/edit-types

Regards,

Pavithra S

[Sascha Affolter]

In the meantime, I've solved the issue with an EditTemplate, as this gives me a little more flexibility.

const editCustomers = (args) => {

    const uniqueCustomers = getUniqueCustomers(data);

    const defaultCustomer = getMostFrequentCustomer(data);

   

    return (

      <DropDownListComponent

        dataSource={uniqueCustomers}

        value={args.rowData ? args.rowData.Kunden : defaultCustomer}

        id="Kunden"

        placeholder="Kunden"

        floatLabelType="Never"

        allowFiltering={true}

      />

    );

  };

....

<ColumnDirective

            field="Kunden"

            headerText="Kunden"

            type="dropdownedit"

            editTemplate={editCustomers}

            width="150"

          />

[Pavithra Subramaniyam]

Sascha Affolter,

We are glad to hear that you have achieved your requirements with the Edit Template feature. Please get back to us if you need further assistance.