How to delete rows in jqgrid

Question

I have just begun 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 above code uses this function call to pass the selected row value for deletion

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

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

Mohammadmohammed

Answer 1

I found a solution to my own 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 button onclick event and on the function call this has all the properties i needed from the button but the most important one being the button id which is the interview ids of the row that the button belongs to.

Mohammadmohammed

Answer 2

you can delete row using

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

Parma

@Waaqas...the problem is that i cannot access the rowid of the row containing the delete button using the return button html code above...but inside the onSelectRow is workable. – Mohammadmohammed

also "delrowdata" doesn't call the back end. – Weakminded

write a custom method, that does both the jobs, deletes the row from ui, and back-end using ajax. – Parma

Answer 3

The variable cellValue is not defined in the same scope as your delete formatter is. You could try two things:

1. Pass the rowId argument from your formatter to the delete function instead of cellValue.
2. Declare a variable outside of the scope of BOTH functions and then set that variable to the ID value of the selected row in your onSelectRow handler.

Galumph

@AJ...funny enough is that in the formatter only the colpos parameter has value the others including rowId have no values. then when i set the variable outside of both functions and set that variable to the ID value of the selected row in my onSElectRow handler that value(rowId) wont change even if i click on different deleted buttons but it will only change upon clicking outside the delete button in any row. I think the challenge is how to connect the buttons to the cells coz when i click on a button it the grid doesnt have any info that that button is in row 1 or 2 etc... – Mohammadmohammed

Then you have to declare a variable outside of your jquery ready call, set it to the rowId in onSelectRow, and then retrieve it in your delete handler. – Galumph

@Galumph Please share the delete function from where the row is actually remove from the grid. Actually I cant figure it out how to remove that row from the grid. – Teth