right click delete not working for my ajax

[greg_make]

window.modulegrid = new Grid({
	class ActionModel extends Model {
	  static get fields () {
	    return [
	      { name : 'id', type : 'number' },
	      { name : 'step', type : 'number' },
	      'action',
	      'outcome',
	      'aboveId'
	    ];
	  }
	}		
		appendTo : 'module-grid',
		features : {
			rowResize: true,
		    cellEdit : { addNewAtEnd : true },
		    cellMenu : {
		        items : {
		            insertAbove : {
		                text   : 'Insert above',
		                icon   : 'b-fa b-fa-arrow-up',
		                weight : 10,
		                onItem : ({ record }) => insertRow(record)
		            },
		        }
			}
		},
		columns : [
			{
				text : 'Step',
				field : 'step',
				autoHeight : true,
				width : 80,
				hidden: true,
			},
			{
				text : 'Action',
				field : 'action',
				editor : {
					type : 'MultiLineTextEditor',
				},
				autoHeight : true,
				width : 350,
				resizable: true,
				cellCls : 'multiline-cell',
			},
			{
				text : 'Outcome',
				field : 'outcome',
				editor : {
					type : 'MultiLineTextEditor'
				},
				autoHeight : true,
				width : 250,
				resizable: true,
				cellCls : 'multiline-cell',
			}
		],
	 	store : {
			modelClass   : ActionModel,
			autoLoad     : true,
			autoCommit   : true,
			readUrl      : `v7.do?actionRefId=3050&orgId=${orgId}`,   // GET → JSON list
			updateUrl      : `v7.do?actionRefId=3051&orgId=${orgId}`,
			createUrl      : `v7.do?actionRefId=3052&orgId=${orgId}`,
			deleteUrl      : `v7.do?actionRefId=3053&orgId=${orgId}`,
		}
	});
	

If I right click insert

  

async function insertRow(targetRecord) {
    const store  = window.modulegrid.store;
    const index  = store.indexOf(targetRecord);          // current row
    const newRec = {
        aboveId     : targetRecord.id,                // above this row
    };

// store.insert(<index>, data) ⇢ returns the inserted record
const [rec] = store.insert(index, newRec);
  
// put focus where the user expects it
const actionColumn = window.modulegrid.columns.find(c => c.field === 'action');
window.modulegrid.startEditing({ record : rec, column : actionColumn });
   
}

it adds the record fine, with an id

{
  "success": true,
  "data": [
    {
      "id": "27497091",
      "action": "whynote",
      "outcome": "",
      "step": 12
    }
  ],
  "total": 0
}

I can update the field and it updates it just fine.

But right click delete will do nothing, no console errors, no network activity.
It is only after reloading the store that I can right click delete anything.

I checked the record added, doesnt say phantom or commiting or anything obvious. It has an id.

[tasnim]

How can we reproduce it? Are you able to reproduce it here https://bryntum.com/products/grid/examples/php/?
Could you please share the steps to reproduce the issue, or a runnable test case would help a lot to debug it!

[greg_make]

How can we reproduce it?

See attached spring boot example reproducing it. Right click, insert above adds a row, you can't delete that newly added row, despite the fact you can update it, it has an id, doesnt appear to be phantom etc.

[greg_make]

Ok I see the issue, my model had the id as a number and I guess that is wrong

  class ActionModel extends Model {
      static get fields() {
        return [
          { name: 'id' },
          { name: 'step', type: 'number' },
          'action',
          'outcome',
          { name: 'aboveId', type: 'number' }
        ];
      }
    }

since when you create it, it is a string with the _phantomblah

I removed the number type and delete works.

[tasnim]

Glad to know that you've figured it out. If you have any other questions or need help, feel free to reach out