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_);
}
Related
I have a view panel in xpages and a computed field to show the row-count. I have 2 problems:
1st: how can i count only the rows of the current page of the pager?it seems that viewPanel.getRowCount() gets all rows from the beginning until the current page, so if i have 30 entries per page and i am in page 2, it shows 60 instead of 30.
2nd: even if i achieve the above, the pager only refreshes the view and i can't refresh the computed field or another panel. Can i put the computed field inside the view panel or make it somehow to be refreshed in each page change? i would prefer not to do it with full page refresh if possible...
Given the computed field refresh issue, even if you managed to get a count of rows (eg on a page-scope SSJS variable), it woudln't update the computed field.
It might be easier to to count to rows in the HTML table using clientside javascript ?
something like ..
page onload event :
get the HTML table
get the table rows property (array of rows in the table)
number or rows = that value (1st row = TH (header) row if there is one = row 0)
use javsscript to plug that value into a known DIV
You could also hijack the partial refresh issued from the pager and check for the ID that has been refreshed. If the ID match your view panel's ID, you could do another partial update in order to update another panel.
Example code for hijacking the partial refresh:
var sysHijackPartialRefresh = function(){
XSP._inheritedPartialRefresh = XSP._partialRefresh;
XSP._partialRefresh = function( method, form, refreshId,options) {
if (options){
if (!options.onComplete) {
options.onStart = function(){
};
options.onComplete = function(){
if (refreshId == "<client id of view panel>") {
// issue another partial refresh
XSP.partialRefreshGet(<client id of the other panel>);
}
};
}
}
this._inheritedPartialRefresh(method, form, refreshId, options); }
}
XSP.addOnLoad(sysHijackPartialRefresh);
See http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/Work_with_events_and_partial_or_full_refresh for more information about partial updates.
The pager should have a "refreshID" property in which you can put the client ID (!) of the panel you want to refresh. Use getClientId() to compute the client ID of the panel.
For the row count: use the XPages debug toolbar (from openNTF) to check for a property of the view panel or the pager which gives you the current page number. If you got that, you can simply compute by using viewPanel.getRowCount() - (page number * number of rows per page).
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?
There is a simple form that has 6 dropdownlists and a gridview. When any of the dropdownlists change the value filters the grid by altering the selectcommand. A user can navigate in another page through a row of the grid.
From the other page a user has a back button that loads the page WITH a querystring which has the values of the dropdownlists.
I want to accomplish 2 things:
1) To put the values in the dropdownlists. This i have done easily.
2) The next thing is to make the grid show data based on this values. this is its normal operation.
I thought that if i add the following code in page load would do the trick but it didnt. I tried all the events but no luck.I can get the dropdownlists to hold the value i want but the grid shows ALL records:
if (!IsPostBack)
{
if (Request.QueryString["ret"] != null)
{
string[] retvalues = Request.QueryString["ret"].Split('_');
Update_Search(retvalues);
dsTodo.SelectCommand = dsTodo.SelectCommand + Build_Where();
GridView1.DataBind();
}
}
The last 2 lines exist in the selectedvaluechange evnets on the dropdownlists and they work fine to filter the grid in normal operation.
You are setting the SelectCommand but you are not executing it. Do this:
dsTodo.SelectCommand = dsTodo.SelectCommand + Build_Where();
dsTodo.Select(DataSourceSelectArguments.Empty);
GridView1.DataBind();
That's assuming that the DataSourceID property of the GridView1 is set to dsTodo.
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 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).