Issue with editing/adding rows in Grid

[camilla arena]

I have a grid component (GridArticoli["GrigliaCorpo"]) that displays a list of items. I can successfully add new rows to the grid, but I encounter a problem when editing an existing row. After editing a row and exiting the edit mode, the edited row is added at the top of the grid, overwriting the first row. Additionally, I noticed that when I try to add a new row after editing an existing row, the new row is not added, and the edited row data persists.

I observed that :

-  The refresh request type does not get triggered when the grid data is updated.
-  When an existing row is edited and saved, it is placed at the top of the grid, overwriting the first row.

- Adding a new row after editing results in the new row not being added correctly.

The new row is added to  o GridArticoli["GrigliaCorpo"] by selecting a row from another grid (GridArticoliAggiuntivi["VisLookupArticoli"]) and clicking a button.

Could you please provide guidance on how to resolve this issue? Any help or suggestions on what might be causing this behavior would be greatly appreciated.

[Pavithra Subramaniyam]

Hi camilla arena,

From your update, it seems that the problem arises because the primary key for the grid is not properly defined. When the isPrimaryKey property is not set for a column, the grid may not correctly identify and update the specific row, leading to the behavior where the edited row overwrites the first row.

To resolve this, ensure that you establish the isPrimaryKey property as true for the relevant column that holds the unique values for each row. If you are still facing the issue, please provide the following details for further validation:

1. The full Grid code example.
2. Any script errors encountered.
3. The grid data binding type (local/remote). If using remote data binding, please specify the adapter you are using.
4. Any customizations in Grid CRUD actions from your side.
5. The Syncfusion package version.

Regards,

Pavithra S

[camilla arena]

I used 21 Syncfusion version and This is my main grid:


async function creaGrigliaArticoli(idGriglia, dati) {
  let ColonneCorpo = [
    {
      field: "id",
      headerText: "Id",
      textAlign: "center",
      width: 120,
      isPrimaryKey: true,
      minWidth: 10,
      visible: false,
    },
    {
      field: "MG73_CODART_MG66",
      headerText: "Codice Articolo",
      textAlign: "center",
      width: 0,
      minWidth: 10,
      allowEditing: false,
      visible: false,
    },
    {
      field: "MG87_DESCART",
      headerText: "",
      textAlign: "center",
      width: 60,
      minWidth: 10,
      allowEditing: false,
    },
    {
      field: "qta",
      headerText: "Qta",
      textAlign: "center",
      type: "numeric",
      width: 20,
      minWidth: 10,
      editType: "numericedit",
      allowEditing: true,
    },
    {
      field: "UM",
      headerText: "UM",
      textAlign: "center",
      width: 50,
      minWidth: 10,
       allowEditing: true,
      editType: "dropdownedit",
      edit: {
        create: function (args) {
          umElem = document.createElement("input");
          return umElem;
        },
        read: function () {
          return umObj.text;
        },
        destroy: function () {
          umObj.destroy();
        },
        write: function () {
          umObj = new ej.dropdowns.DropDownList({
            dataSource: umOptions,
            fields: { value: "umId", text: "umName" },
          });
          umObj.appendTo(umElem);
        },
      }, 
    },
    {
      field: "MG66_UM1",
      headerText: "UM1",
      textAlign: "center",
      width: 10,
      minWidth: 10,
      allowEditing: false,
      visible: false,
    },
    {
      field: "MG66_UM2",
      headerText: "UM2",
      textAlign: "center",
      width: 10,
      minWidth: 10,
      allowEditing: false,
      visible: false,
    },

    {
      field: "Qta1",
      headerText: "Qta1",
      textAlign: "center",
      type: "numeric",
      width: 20,
      minWidth: 10,
      allowEditing: false,
      visible: false,
    },
    {
      field: "Qta2",
      headerText: "Qta2",
      textAlign: "center",
      type: "numeric",
      width: 20,
      minWidth: 10,
      allowEditing: false,
      visible: false,
    },
    {
      field: "MG66_FATTCONV",
      headerText: "fattore di conversione",
      textAlign: "center",
      type: "numeric",
      width: 20,
      minWidth: 10,
      allowEditing: false,
      visible: false,
    },
  ];

  let Griglia = GridArticoli;
  dati = Array.isArray(dati) ? [...dati] : [];
  console.log("Dati passati alla griglia:", dati);
	// let aggiuntaRigaVuota = false;

  if (document.getElementById(idGriglia).innerHTML.toString().trim() != "") {
    //Griglia[idGriglia].dataSource = dati;
    //Griglia[idGriglia].dataBind();
	
      // Assicurati di svuotare il contenuto dell'elemento
    

	
  } else {
    ej.grids.Grid.Inject(ej.grids.NumericEdit, ej.grids.Page);
    ej.base.enableRipple(window.ripple);
    Griglia[idGriglia] = new ej.grids.Grid({
      gridLines: "Both",
      //rowHeight: 50,
      height: "100%",
      editSettings: {
        allowEditing: true
       // allowAdding: true,
       // allowDeleting: true,
      },
      allowPaging: false,
      allowSelection: true,
      selectionSettings: { type: "Single" },
      //pageSettings: { pageSize: 30 },
      allowFiltering: true,
      allowSorting: true,
      allowResizing: true,
      allowSelection: true,
      //allowTextWrap: true,

      filterSettings: {
        type: "Excel",
      },

      dataSource: dati,
      columns: ColonneCorpo,
	 /*  actionComplete: function (args) {
	  if (args.requestType === 'save') {
		  console.log(args);
		  
	  }
	  }, */
/* 	  dataBound: function () {
        if (!aggiuntaRigaVuota) {
          let datiCorrenti = Griglia[idGriglia].dataSource // Crea una copia dei dati esistenti

          // Definisci una riga vuota con gli stessi campi della tua griglia
          let rigaVuota = {
            id: '',
            MG73_CODART_MG66: '',
            MG87_DESCART: '',
            qta: 0,
            UM: '',
            MG66_UM1: '',
            MG66_UM2: '',
            Qta1: 0,
            Qta2: 0,
            MG66_FATTCONV: 0,
          };

          // Aggiungi la riga vuota all'inizio
          dati.unshift(rigaVuota);

          // Aggiorna la dataSource e fornisci un'istanza aggiornata
          Griglia[idGriglia].dataSource = datiCorrenti;
          Griglia[idGriglia].dataBind();

          aggiuntaRigaVuota = true; // Imposta il flag a true per evitare loop infiniti
        }
      }, */
actionComplete: function (args) {
      if (args.requestType === 'save') {
        console.log(args);
        handleSave(args); // Richiama la funzione di salvataggio
      } else if (args.requestType === 'refresh') {
        isRefreshing = false; // Fine del refresh
      }

      // Registra gli eventi beginEdit e save
      GridArticoli["GrigliaCorpo"].on("beginEdit", handleBeginEdit);
      GridArticoli["GrigliaCorpo"].on("save", handleSave);
    },
    actionBegin: function (args) {
      if (args.requestType === 'refresh') {
        isRefreshing = true; // Inizio del refresh
      } else if (args.requestType === 'add' && isRefreshing) {
        args.cancel = true; // Blocca l'aggiunta di righe durante il refresh
        console.log('Aggiunta di nuove righe non è permessa durante il refresh');
      }
    },
      rowSelected: function rowSelected(args) {
        const selectedRecord = Griglia[idGriglia].getSelectedRecords()[0];

        console.log("Riga selezionata:", selectedRecord);

        let codiceArticolo = selectedRecord["MG73_CODART_MG66"].trim();
        let codCli = $("#Cliente").val();
        $("#HiddenDataArt").val(selectedRecord["MG73_CODART_MG66"]);
      },
      load: function () {
        if (ej.base.Browser.isDevice) {
          Griglia[idGriglia].enableAdaptiveUI = true;
          Griglia[idGriglia].rowRenderingMode = "Vertical";
          Griglia[idGriglia].element.parentElement.classList.add("e-bigger");
        } else {
          Griglia[idGriglia].enableAdaptiveUI = false;
          Griglia[idGriglia].rowRenderingMode = "Horizontal";
          Griglia[idGriglia].element.parentElement.classList.remove("e-bigger");
        }
        window.addEventListener("resize", function (e) {
          if (Griglia[idGriglia]) {
            if (ej.base.Browser.isDevice) {
              Griglia[idGriglia].enableAdaptiveUI = true;
              Griglia[idGriglia].rowRenderingMode = "Vertical";
              Griglia[idGriglia].element.parentElement.classList.add(
                "e-bigger"
              );
              Griglia[idGriglia].allowEditing = true;
            } else {
              Griglia[idGriglia].enableAdaptiveUI = false;
              Griglia[idGriglia].rowRenderingMode = "Horizontal";
              Griglia[idGriglia].element.parentElement.classList.remove(
                "e-bigger"
              );
              Griglia[idGriglia].allowEditing = true;
            }
          }
        });
      }, 
    });

    Griglia[idGriglia].appendTo("#" + idGriglia);
    loadCultureFiles("it");
	// Aggiungi la registrazione dell'evento dopo la creazione della griglia
    Griglia[idGriglia].on("endEdit", handleEndEdit);
	
  }
}

this is secondary grid that use to add new row in main grid: 

async function creaGrigliaArticoliAggiuntivi(idGriglia, dati) {
  let ColonneCorpo = [
    {
      field: "id",
      headerText: "Id",
      textAlign: "center",
      width: 120,
      isPrimaryKey: true,
      minWidth: 10,
      visible: false,
    },
    {
      field: "MG87_CODART_MG66",
      headerText: "Codice Articolo",
      textAlign: "center",
      width: 50,
      minWidth: 10,
      allowEditing: false,
    },
    {
      field: "MG87_DESCART",
      headerText: "Descrizione",
      textAlign: "center",
      width: 100,
      minWidth: 10,
      allowEditing: false,
    },
    {
      field: "MG66_UM1",
      headerText: "Descrizione",
      textAlign: "center",
      width: 100,
      minWidth: 10,
      allowEditing: false,
      visible: false,
    },
    {
      field: "MG66_UM2",
      headerText: "Descrizione",
      textAlign: "center",
      width: 100,
      minWidth: 10,
      allowEditing: false,
      visible: false,
    },
  ];

  let Griglia = GridArticoliAggiuntivi;

  console.log(dati);
  if (document.getElementById(idGriglia).innerHTML.toString().trim() != "") {
    Griglia[idGriglia].dataSource = dati;
    //Griglia[idGriglia].dataBind();
  } else {
    ej.base.enableRipple(window.ripple);
    Griglia[idGriglia] = new ej.grids.Grid({
      gridLines: "Both",
      rowHeight: 30,

      height: 500,
      allowAdding: true,
      allowPaging: false,
      allowFiltering: true,
      allowSorting: true,
      allowResizing: true,
      allowSelection: true,
      filterSettings: {
        type: "Excel",
      },

      dataSource: dati,
      toolbar: ["Search"],
      columns: ColonneCorpo,
      rowSelected: function rowSelected(args) {
        let SelectedRecords = Griglia[idGriglia].getSelectedRecords();
      },
      headerCellInfo: (e) => {
        e.node.style.backgroundColor = "#E0FFFF";
      },
    });

    Griglia[idGriglia].appendTo("#" + idGriglia);
    loadCultureFiles("it");
  }
}



and this is a CRUD operation:
function aggiungiNuovaRiga() {
  if (GridArticoliAggiuntivi && GridArticoliAggiuntivi["VisLookupArticoli"]) {
    var selectedRecord = GridArticoliAggiuntivi["VisLookupArticoli"].getSelectedRecords()[0];
    if (selectedRecord) {
      let datiCorrenti = GridArticoli["GrigliaCorpo"].dataSource.slice(); // Crea una copia profonda dei dati correnti

      // Assicurati che i dati da aggiungere siano nuovi e non duplicati
      if (!datiCorrenti.some(record => record.MG73_CODART_MG66 === selectedRecord.MG73_CODART_MG66)) {
        datiCorrenti.unshift(selectedRecord); // Aggiungi la nuova riga in cima

        // Aggiorna la griglia con i dati modificati
        GridArticoli["GrigliaCorpo"].dataSource = datiCorrenti;
        GridArticoli["GrigliaCorpo"].refresh(); // Usa refresh per assicurarti che la griglia venga aggiornata
      } else {
        Swal.fire({
          allowOutsideClick: false,
          title: "Attenzione",
          html: "L'articolo è già presente nella griglia.",
          icon: "info",
          confirmButtonText: "Chiudi",
        });
      }
    } else {
      Swal.fire({
        allowOutsideClick: false,
        title: "Attenzione",
        html: "Seleziona un articolo dalla griglia aggiuntiva prima di premere Aggiungi",
        icon: "info",
        confirmButtonText: "Chiudi",
      });
    }
  }
}

[Pavithra Subramaniyam]

camilla arena,

The reported issue might occur because the primary key field contains duplicate values. As a result, when refreshing the grid, the first row is replaced with the last edited row. Therefore, we strongly recommend that the primary key field contains unique values for each row to perform the Grid CRUD actions properly.