How to delete rows in jqgrid

Question

I just started using jqGrid and I want to delete rows using a custom delete button. I am using the code snippet below:

try { var cellValue; var id; jQuery("#editDataGridList").jqGrid({ datatype: "local", width: 900, height: 270, colNames: ['Action', 'Interview id', 'Date of observation', 'Name of enumerator'], onSelectRow: function (id) { debugger; var rowData = jQuery(this).getRowData(id); cellValue = rowData['InterviewId']; }, colModel: [ { name: 'actions', index: 'InterviewId', sortable: false, formatter: function (rowId, cellval, colpos, rwdat, _act) { return "<input type='button' id='btnid' value='delete' class='btn' onClick='deleteRecords(" + cellValue + ");' />"; } }, { name: 'InterviewId', index: 'InterviewId' }, { name: 'Date', index: 'Date' }, { name: 'NameOfEnum', index: 'NameOfEnum' } ], multiselect: false, caption: "Edit already entered data" }); } catch (e) { alert(e.message); } 

The code above uses this function call to pass the selected row value to delete

 function deleteRecords(rowData) { alert(rowData); } 

Unfortunately, rowData is undefined. How can I use the same structure to delete rows?

Answer 1

I found a solution to my problem.

 formatter: function (rowId, cellval, colpos, rwdat, _act) { var rowInterviewId = colpos.InterviewId.toString(); return "<input type='button' id='" + rowInterviewId + "' value='delete' class='btn' onClick='deleteRecords(this)' />"; } 

I just pass this as a parameter to the onclick event on the button, and in the function call it has all the properties that I need from the button, but the most important of them is the button identifier, which is the interview identifier of the line that the button belongs to.

Answer 2

you can delete the line using

 $('#editDataGridList').jqGrid('delRowData',rowid); 

Answer 3

The variable cellValue not defined in the same scope as your formatting format. You can try two things:

• Pass the rowId argument from your formatting to the delete function instead of cellValue .
• Declare a variable outside the scope of the BOTH functions, and then set this variable to the ID value of the selected row in your onSelectRow handler.