JQGrid Delete Row Does Not Delete Subgrid - jqgrid

I delete a row in a jqGrid like so:
elem.jqGrid('delRowData', rowid);
But the subgrid associated to this row remains. What other clever thing do I need to do to make the whole row (including subgrid) go away?

You can do instead of the code which you posted the following:
var selRow = $('#'+rowid), // get the row (<tr> element having id=rowid)
nextRow = selRow.next(); // get the next row
if (nextRow.hasClass('ui-subgrid')) {
// if the next row is a subgrid one should remove it
nextRow.remove();
}
elem.jqGrid('delRowData', rowid);
// the call of delRowData is better as just selRow.remove();
// because it change "records" and "reccount" parameters and
// change parameters "selrow" and "selarrrow" in case that
// the deleted row was selected.

This seems to work:
elem.jqGrid('collapseSubGridRow', rowid);
elem.jqGrid('delRowData', rowid);
Umm, okay.

Related

Iterate through jqGrid update every row for a column

I wish to iterate through jqGrid, and for a given column (ie: the second) I wish to insert a value. How do you find the first data row? The documentation warns to not use getRowData if updating row or cell data.
This is what I'm using, but it seems clumsy:
function loadCompleted() {
var $grid = jQuery("#jqGrid"), rows = $grid[0].rows;
for (var i = 1; i < rows.length; i++) {
var row = rows[i];
var id = row.cells[0].innerHTML;
$(row.cells[1]).html("<a href='#' onclick='deleteApp(" + id + "); return false;'>Delete</a>");
}
}
... this works, but it makes the assumption that the first data row is the second row in table #jqGrid. It also relies on index values for columns 1 and 2.
Is there any way to use setRowData when the documentation warns to not use getRowData when editing the row or cells?
The first row in grid is hidden and is used in the jqGrid for internal purposes.
I think that using a custom formatter will do the job.
Example of custom formatter can be found here. If you use Guriddo jqGid you may look into the docs for the parameters passed.

Why jgGrid alway move new row to last row of last page after paging, sorting, filtering?

Why jgGrid alway insert new row as last row of last page after paging, sorting, filter?
I use datatype: local.
Add row method:
var records = g.getGridParam("records") + 1;
var addedIndex = Date.now();
g.addRowData(records , { }, 'first');
//var addedRecordIndexes = g.getGridParam('addedRecordIndexes');
//addedRecordIndexes.push(addedIndex);
g.editRow(records , true, function () {});
But after paging, sorting, filtering, new inserted row is alway move to last row of last page. I try to use
g.addRowData(1, {}, 'first') but no luck.
Why is this bug serious?
This will make user confuse if they insert new row, then change to another page, then back. Oops, where is my new row?
But actually, it's in last page at last row.

jqGrid inline delete: selected row "selrow" is incorrect

I have a in-line delete button, I want to append more data to the delete message pop-up like this:
"Delete selected row with code = 7 ?"
I'm using the following in the delOptions:
beforeShowForm: function ($form) {
var sel_id = $("#list").jqGrid('getGridParam', 'selrow');
$("td.delmsg", $form[0]).html("Delete record with <b>code=" + $("#list").jqGrid('getCell', sel_id, 'cd') + "</b>?");}
The problem is If I click on the delete button without first clicking on any part of the row, the selrow is either null or it gets the previously selected row not the currently selected!
How do I make the row selected when clicking on the trash bin icon?
Any help is appreciated
I suppose that you use the example which I posted in the old answer. It was written in case of usage of the Delete button (the part of form editing) from navigator bar.
There are one hidden row in the Delete dialog which could help you. Try this one
beforeShowForm: function ($form) {
// get comma separated list of ids of rows which will be delete
// in case of multiselect:true grid or just id of the row.
// In the code below we suppose that single row selection are used
var idOfDeletedRow = $("#DelData>td:nth-child(1)").text();
$form.find("td.delmsg").eq(0)
.html("Delete record with <b>code=" +
$(this).jqGrid('getCell', idOfDeletedRow, 'cd') + "</b>?");
// REMARK: in old versions of jqGrid you can't use $(this) and
// will have to use something like $("#list")
}

adding values to a row in jqgrid

I am using ajax function to call a method on server side which will return a set of values, I need to add these values to the next row of a jqgrid. How to insert values to a jqid by iterating the rownumber?
After you receive the data from the the server you can add there to the grid. For example, if your grid has colModel with column names 'invid','invdate','amount','tax','total','note'. The code which add the row could be about following
var myfirstrow = {invid:"1", invdate:"2007-10-01", note:"note",
amount:"200.00", tax:"10.00", total:"210.00"};
$("#grid_id").jqGrid("addRowData","1", myfirstrow);
where "1" is the id of the data which you want to add.
If you want to add data to a special position in the grid, for example, after the selected row you can do almost the same:
var grid = $("#grid_id");
var selRowId=grid.jqGrid('getGridParam','selrow');
var myData = {invid:"1", invdate:"2007-10-01", note:"note",
amount:"200.00", tax:"10.00", total:"210.00"};
grid.jqGrid("addRowData", "1", myData, "after", selRowId);
See Data Manipulation part of the jqGrid documentation. By the way with respect of addRowData method you can add many rows to a grid at one call. In the case the data parameter must be array of row data.

JQgrid : specific value from a selected row

how to get a value of a (hidden) column, from the selected row. that is, the cell value needs to be from the cell identied by colName, and the selected row (not using multi select). From the API i see the method getGridParam("selrow") for reading the row, may be able to combine with other methods.. but, any convenient method available? a code snippet would save lot of time... \
thanks.
You should use getCell function to read the value from the cell identified by row id. So if you need a data from the column 'MyColName' of selected row you can do this with the following code:
var grid = jQuery('#list');
var sel_id = grid.jqGrid('getGridParam', 'selrow');
var myCellData = grid.jqGrid('getCell', sel_id, 'MyColName');
If you need read full data of a row you can use getRowData instead of getCell. More about methods supported by jqGrid you can read in the documentation (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods).

Resources