I haven't checked it all but I found a problem in your implementation:
$grid.on('pqgridrefresh', function(){
var $mgrid = $(this);
$mgrid.find('.delete_btn').click(function(){
console.log("dele button pressed");
var $tr = $(this).closest('tr'),
rowIndx = $mgrid.pqGrid('getRowIndx',{
$tr:$tr
}).rowIndx;
console.log("Deleteing row:"+rowIndx);
$mgrid.pqGrid('deleteRow',{rowIndx:rowIndx});
});
});
$mgrid.find('.delete_btn') would also found the delete buttons of the detail grid. Correct way is to assign a unique class (e.g., btn_cls) to the buttons column of the outer grid.
selector would be $mgrid.find('.btn_cls .delete_btn');
Please correct it and any other similar problem and let me know your results.