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.
Related
I have requirement of adding a new row for the button onclick.
Example
In the first row at the last cell. I have an ADD MORE button. If I click that button new row should be added below that first row.
Is it possible in jqGrid ??
Yes it is possible. The method addRowData has the needed parameters:
addRowData(string rowid, mixed data, [string position], [string
srcrowid])
Inserts a new row with id = rowid containing the data in data (an
object) at the position specified (first in the table, last in the
table or before or after the row specified in srcrowid). The syntax of
the data object is: {name1:value1,name2: value2…} where name is the
name of the column as described in the colModel and the value is the
value.
More on the method you can read in the Gurrido jqGrid documentation
I use jqGrid v4.4.5 and I want to create it with dynamic columns.
It is filled by "jqGridHandler.ashx" file .
I want send all information(column name,data,...) by JSON .
I search for it in Google but can not find a good answer.
By Click on each node(child) change whole grid(actions and columns...).For example by click on node3 the grid has three columns 'A' and 'B' and 'actions' but by click on node2 grid has columns 'C' and 'D' and 'actions'.
One can use jqGrid to create many different grids, tree grids, subgrids and so on. It's very important to understand whether you want to display grid with 10 rows or with 100000 rows. If you have 100000 rows (or some other large number of rows) you will have to implement server side paging and sorting of data. So if the user would click on the "next page" button the next rows should be loaded from the server. Why you would need to send all colModel data on paging or sorting? So you should clear understand that in server side scenario one need create all structures of grid only once and then one need refresh only the body of grid. So it would be bad choice to send all information (column name, column model, data,... at once).
Only if you have some hundreds or some thousand of rows in the grid and you can use loadonce: true option them you can load once all information (column name, column model, data, ...) per separate jQuery.ajax call and then create jqGrid with datatype: "local" and using data parameter which contains all grid data.
UPDATED: If you need change
// in the example below the grid with id="list" will be created
// with column having name: "c4" in colModel
var $grid = $("#list"), columnName = "c4";
...
var $colHeader = $("#jqgh_" + $.jgrid.jqID($grid[0].id) + "_" + $.jgrid.jqID(columnName)),
$sortingIcons = $colHeader.find(">span.s-ico");
// change the text displayed in the column
$taxHeader.text("New header text");
// append sorting icons to the new text
$taxHeader.append($sortingIcons);
Before your initialize the jqGrid you will need to have the information for your colNames and colModel properties of the jqGrid.
So in short, you will request the information from your server, once you have successfully retrieved that information you can then build the jqGrid and then the jqGrid can go and fetch it's data.
The following post has some example code on the client side:
jqGrid and dynamic column binding
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');
How can I change data already present in my grid's row with different data on click of a button?
I want to update the values of selected row with new values.
The code could look like
var myGrid = $("#list");
var selRowId = myGrid.jqGrid('getGridParam','selrow');
myGrid.jqGrid('setRowData',selRowId,newData);
where the newData in the object of data that contain the new values. The structure of array is in type name:value (for example {firstName:"foo", lastName:"bar"}). You can examine the current data from the row with
var oldData = myGrid.jqGrid('getRowData',selRowId);
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).