[REACT] Server side grid cell editable or not ?

[prashil]

Hello Bryntum team,

I tried to implement server side cell is editable or not.

onBeforeCellEditStart={async ({editorContext}) => {
           const oid = editorContext.record.data.name_oid;
          let resp = {};
         await fetch(`https://localhost:8000/member/data/oid?id=${oid}`)
            .then((res) => res.json())
            .then((res) => {
             resp = res;
            });
           return resp.success
           }}

In backend I passed name_oid to that row.

       {
            id: 4,
            name: "Gate 1",
            capacity: 100,
            airline: "SAS",
            manager: "Linda",
            name_oid: "g1",
          },
          {
            id: 5,
            name: "Gate 2",
            capacity: 45,
            domestic: "yes",
            airline: "Lufthansa",
            manager: "Steve",
            name_oid: "g2",
          },
          {
            id: 6,
            name: "Gate 3",
            capacity: 45,
            airline: "SAS",
            manager: "Steve",
            name_oid: "g3",
          },
          {
            id: 7,
            name: "Gate 4",
            capacity: 65,
            airline: "Norwegian",
            manager: "Linda",
            name_oid: "g4",
          },
          {
            id: 8,
            name: "Gate 5",
            capacity: 75,
            domestic: "yes",
            airline: "Air France",
            manager: "Steve",
            name_oid: "g5",
          },

But it not work for me.

Below the screenshot attached response.

[mats]

Can you please share your expectations? What do you mean when you say

But it not work for me.

[prashil]

I want to do validation from server whether the cell is editable or not . As u can see in the above code if I return false in the onBeforeCellEditStart that cell wont be editable but I don't want to do it on the client side I want to make request to the server and if it return false then cell won't edit . The problem with this event is that it is not waiting for the server response. So I want You to tell me about any event which can handle async request and there on server response it can tell me that cell is editable or not.

[mats]

Right, this event is currently synchronous. You could solve it by setting a flag on the grid and always return false from the listener and trigger another cell edit operation if your server reports cell being editable as a workaround.

[prashil]

Can you explain it in more details or it would be better if u provide me any example related to this.

[alex.l]

Here is a FR to make this async https://github.com/bryntum/support/issues/5153

You could implement a workaround as Mats suggested. I've created a very basic example how it may looks like

onBeforeCellEditStart= ({editorContext}) => {  

    if (grid.asyncValidSucceeded) {
          grid.asyncValidSucceeded = false;
          return true;
    }
    

const oid = editorContext.record.data.name_oid;
let resp = {};
 
fetch(`https://localhost:8000/member/data/oid?id=${oid}`)
        .then((res) => res.json())
        .then((res) => {
         resp = res;
         if (resp.success) {
               grid.asyncValidSucceeded = true; 
               grid.startEditing(editorContext);
         }
 });
 // false to prevent current edit
 return false;
}

links
https://bryntum.com/docs/gantt/api/Grid/feature/CellEdit#function-startEditing

[prashil]

Thank you.