I am using a JQGrid, and have designed the grid such that the first column is a checkbox. I am using the property of multiselect:true, and I am not writing any code other than this to get the checkboxes. How do I fetch the values from the rows where the checkboxes are checked?
To get the selected rows, use:
var selected = $("#tableid").jqGrid('getGridParam', 'selarrrow');
selected will be set to an array of IDs of the selected rows.
To get column values from the rows, use the getCell method. See How to get the selected row id in javascript?
Related
I used Client side Pagination. In 1st page i have 5 rows.
var grid = jQuery("#mygrid").jqGrid('getGridParam', 'data');
$('#mygrid').jqGrid('getCell',grid[0].Id, 'Color');
Here grid[0].Id is unique key value of our grid.
The above line returns whole html tag with below options:
"<select class="editable" size="1" name="Color" id="xxxxxxxxx_Color" role="select"><option selected="selected" value="Pink">Pink</option><option value="Blue"> Blue</option><option value="Black"> Black</option><option value="Red"> Red</option></select>"
when i tried to access 6th record which is in another page:
var grid = jQuery("#mygrid").jqGrid('getGridParam', 'data');
$('#mygrid').jqGrid('getCell',grid[5].Id, 'Color');
Its returning false.
I tried grid[5].Color which only gets selected value option of dropdown. But i want all options of dropdown, just as i got for the 1st record. getCell only works for current page's rows its not working properly for other pages during pagination. Is there any way that i can access all options of dropdown cell of every row in grid.
I have a checkbox column in my jqgrid and am using datatype local, and scroll=1 to get (dynamic page turning e.g. virtual scroll) and a numRows value.
When I click the header checkbox to select all the rows it's not selecting any that aren't within what's visible . Is there a way to set jqgrid to support click on checkbox header to select all the data not just the part that is partially shown?
$("#grid").jqGrid('getGridParam','data'); will return an array of objects which is all the data (every page) from your grid.
These objects have _id_ as their attribute. You can now loop through this array and use the setSelection method to select all of the rows using the _id_.
Example:
var all_data = $("#grid").jqGrid('getGridParam','data');
for(var i=0; i<all_data.length; i++){
$("#grid").setSelection(all_data[i]._id_);
}
I'm using jqGrid's filterToolbar method to let users quick search/filter the grid data. I'm using loadonce: true and datatype: local as my grid configs. I have a drop-down (select) filter type for one of my columns, which works fine.
Problem is when i try to update a row (using setRowData) that is not visible (because the filter/search result is hiding them), the row doesn't get updated when I reshow them by clearing the filter.
Any suggestions? I've tried triggering the reloadGrid event too, no luck.
Cheers
Update 1 - Reproducing the problem:
Here's how to reproduce the problem, using jqGrid's official demos:
Step 1
Browse to the jqGrid's demo page, and open the demo named 'Toolbar search' under 'New in version 3.7'
Step 2
In the demo grid, filter by the code column with the value 575878 so that only the first row is shown on the grid.
Step 3
Bring up the javascript console and update a row that's not currently visible, in this example update row 2:
jQuery("#toolbar").jqGrid('setRowData',2,{item_id:2,item:'blargh',item_cd:12345678});
Step 4
Unhide all the rows by clearing the filter value, and see that row 2 has not been updated!
Anything I'm doing wrong here? Possible workarounds?
You misunderstand how the grid are build. Grid can contain hidden columns, but no hidden rows. If one filter grid the full grid body will be removed and only the filtered rows will be inserted.
The method setRowData can be used to modify any row of the grid, but you can't modify something which is not present in the grid.
If you use local grid (datatype: 'local') then the data which you save in the grid will be saved in two internal jqGrid parameters data and _index. So you should modify the data object. To fill grid with modified data you need call .trigger("reloadGrid").
So if you want modify columns item_id, item and item_cd of the grid's data for the rowid=2 you can do the following steps.
1) Get references to the internal jqGrid parameters data and _index:
var $myGrid = jQuery("#toolbar"),
data = $myGrid.jqGrid('getGridParam', 'data'),
index = $myGrid.jqGrid('getGridParam', '_index');
2) Get reference to the object which represent the rowid which you need:
var rowId = '2',
itemIndex = index[rowId],
rowItem = data[itemIndex];
3) Modify the data item like you as need:
rowItem.item_id = 2;
rowItem.item = 'blargh';
rowItem.item_cd = 12345678;
4) Refresh grid contain (if needed) by reloading the grid
$myGrid.trigger('reloadGrid');
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.
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).