I have a multiselect jqGrid with a multiselect grid-as-subgrid. In the onSelectRow event for the parent grid, how can I grab a reference to the child grid?
Essentially, I need to do the following:
Expand the subgrid (so as to load its data from the server)
Get a reference to that subgrid
With the reference, loop through the rows and set each one to selected (For rows which have a nested subgrid of their own, this will trigger their onSelectRow and repeat the process. Don't worry, the grid is no more than 3 nestings deep.)
I'm looking through the various documentation this morning, but so far haven't spotted what I need to make this happen. Maybe I'm just missing the obvious? Or maybe this would require a bit more cleverness?
I see how Step 3 above can be accomplished starting with getRowData() and looping through the results with setSelection(). I use those elsewhere in code and they work great. But Steps 1 and 2 above are where I'm stuck at the moment.
Edit: Following #Oleg's answer below, I looked a bit more into synchronizing efforts between a parent grid's onSelectRow event and subGridRowExpanded event. Here's a boiled down version of what I'm testing right now:
onSelectRow: function(id, status) {
// Automatically expand the sub-grid (to load the data) and select the rows in that grid
autoSelecting = true; // autoSelecting is a global variable normally set to false
$('#mainGrid').expandSubGridRow(id);
}
subGridRowExpanded: function(subgrid_id, row_id) {
//... build the sub-grid, works fine (an artifact of which is a subgrid_table_id)
// If this grid was auto-expanded to be auto-selected, select all its rows
if (autoSelecting) {
var sdata = $('#' + subgrid_table_id).getRowData();
for (var i = 0; i < sdata.length; i++) {
$('#' + subgrid_table_id).setSelection(sdata[i].Id);
}
autoSelecting = false;
}
}
A few things are happening here as I tinker with this:
If I'm stepping through FireBug to debug this, selections and sub-selections work correctly. However, if I take out breakpoints and try it in real-time, sub-selections don't happen. The sub-grid expands, but its rows don't get selected. I figure there's a timing issue in there somewhere.
I haven't accounted for cascading de-selects yet, clearly.
If the sub-grid is already expanded, the selecting doesn't cascade.
Inside of loadComplete event handler the grid is loaded and you can do some additional actions like expanding of some rows.
You can expand the subgrid with respect of expandSubGridRow method.
To get the reference to the subgrid the subgrid should be created first. So the best place to reference of the grid is subGridRowExpanded event. You don't posted the JavaScript code which you use, so it is difficult to describe all more exactly.
To select all rows you can use setSelection in the loop or use code like $('.cbox', myGrid[0]).trigger('click'); There are different other variation how to do the same. If you will see that you have performance bottleneck here then I could describe how you can do the step more effective.
I can repeat, that the most important that you expand or select the rows after the grid data (or the subgrid data) is loaded.
Related
I'm developing an app using the amazing angularslickgrid.
Till now, i haven't got any problem, buy I found out an strange behaviour on it.
In the ngOnInit I wrote the following code:
ngOnInit(){
this.defineGridHeaders();
this.defineGridOptions();
this.obtainData();
}
Till this moment everything works well and the grid load correctly the data including the RowSelection column.
The problem is when I try to change the columndefinition, and perfrom a reset() like this:
this.defineGridHeaders();
this.angularGrid.gridService.resetGrid();
The new colums have been loaded correctly but i lose the rowSelection column.. :(
I've tried to include the defineGridOptions() function in the middle of the defineGridHeaders() and resetGrid() but the result is the same.
In the this.defineGridHeaders() I just perfom the following:
this.columnDefinitions = [];
[...FIELDS CREATION...]
const col = {
id,
name,
field,
sortable,
filterable,
type,
editor,
formatter,
filter,
outputType,
params,
minWidth: minwidth,
width: width,
header: header,
excludeFromExport,
excludeFromGridMenu,
excludeFromQuery,
excludeFromHeaderMenu
};
this.columnDefinitions.push(col);
Could someone help me on this?
Many Thanks!
Please note that I'm the author of Angular-Slickgrid and you opened an issue with the same question on GitHub, I'll simply reply with the same answer here
a reset is a reset, so it won't keep that. But I added the Row Selection in the Grid State not that long ago, so you could get it from there (just check the Grid State/Presets - Wiki. Dynamically adding a new column can be seen in this Example 3, you should look at the code on how to make it show up correctly (you can't just add it, you need to manually trigger a dirty change call, look at the example code for that)
Also to add a bit more to this, SlickGrid Row Selection is by row index, it's not by row data. Meaning that if your data changes when you refresh or something and you keep the row selection it will not synched anymore... all that to say, just remember, it's a row index, so pay attention when you want to keep or want to reapply a row selection.
If it's just to row selection that you lose, just save it before adding a column and put back the selection after adding the column. It's simple, get the row selection (with getSelectedRows) before you change the column definitions, add your new column and then put back the selection (with setSelectedRows).
I have a basic treegrid with 2 levels, and I want some rows hidden and others visible; I do this with $("#" + rowId).hide() and $("#" + rowId).show() programatically, as which rows are visible is dependent on data outside the grid. That part works fine.
However, when I collapse a node and then expand it, all children are visible, even those I hid. Evidently, jqGrid is pretty much just doing .hide() and .show() on the rows, which negates my settings. So my thought is to add a hidden field in each row that stores whether it should be visible or not, and then re-hide/show after the expand event. The problem is, I'm not sure how to catch the event and execute code immediately after it.
Oleg shows a method for catching the events here: jqGrid treeGrid catch expand collaps events
Unfortunately, that doesn't work for me because it will just override whatever hide/show I do there. I need to execute code after the jqGrid functions. Any ideas on how to do this?
The solution seems very easy for me. One need just make small modification from the code from the answer which you reference. You can do something like the following
var orgExpandNode = $.fn.jqGrid.expandNode;
$.jgrid.extend({
expandNode: function (rc) {
// here you can insert the code which will be executed
// before the original expandNode
var res = orgExpandNode.call(this, rc);
// now you can execute some code after the original expandNode
// for example the next line hide the node in the grid
$("#1_1_1").hide(); // hide some row of the grid
return res; // return the value from expandNode
}
});
see the demo. The demo has one node in the TreeGrid which has id="1_1_1", but it stay hidden all the time.
UPDATED: Free jqGrid have beforeExpandRow, afterExpandRow, beforeExpandNode and afterExpandNode callbacks and "jqGridTreeGridBeforeExpandRow", "jqGridTreeGridAfterExpandRow", "jqGridTreeGridBeforeExpandNode", "jqGridTreeGridAfterExpandNode" events. Thus subclassing of TreeGrid methods described above is not required in case of usage free jqGrid.
I have a single slickgrid that uses a dataview with the row selection model. I frequently assign a completely different array to the dataview, switching the data in this grid.
I use this function to swap datasets in the grid:
function setData(dataArray, uniqueIdFieldName) {
dataView.beginUpdate();
dataView.setItems(dataArray, uniqueIdFieldName)
dataView.endUpdate();
grid.resizeCanvas();
grid.invalidate();
}
The first time I use this function (to load the initial data into an empty grid), everything works great. Every time after that, it loads the data fine but has a selection bug. I can't select the first row in the grid. However, if I select a row other than the first, the bug seems to correct itself and I can then select the first row again. When I change the data again with my function, I once again can't select the first row.
Anyone know why this is happening?
I found the problem and solution. The problem is slickgrid is keeping all the data about the active cell/row even after you completely change it's data with setItems(). The internal variable activeCell is still set to an index value, even though no cells are selected anymore. The solution is to call grid.resetActiveCell() before changing the data. So the working code looks like this:
function setData(dataArray, uniqueIdFieldName) {
grid.resetActiveCell(); //THIS LINE ADDED
dataView.beginUpdate();
dataView.setItems(dataArray, uniqueIdFieldName)
dataView.endUpdate();
grid.resizeCanvas();
grid.invalidate();
}
It seems to me that this is a bug in slickGrid. The setItems() function should reset the selection variables internally before changing the rows, since obviously the current selection is going to be null and void after resetting the items and not doing so leaves the entire selection model in a faulty state.
When you click on a row in jqgrid it gets "selected" (applies some coloring and styles), other "selected" rows get deselected. However, when I click on an input button element in one of the cells in a row nothing happens... the row is not "selected". How would I make the clicking of this button (or link or whatever) cause the row to be "selected" (and deselected when a different row is clicked)?
Solution:
In the gridComplete method of jqgrid I can attach a click handler to each button, get the ID of the button's parent row and then call jqgrid's setSelection method on it, passing in the required row id as a parameter.
$('#mygrid').find('input[type=button]').each(function() {
$(this).click(function(){
var therowid = $(this).parents('tr:last').attr('id');
$('#mygrid').jqGrid('setSelection', therowid );
});
});
On "tricky" thing about this is that instruction on the jqgrid website show two different ways to go about doing this. The above uses the new API which does things rather differently so you will find a mix of suggestions online that switch between this new API and the older one.
I have a grid like this:
To edit a line, the user chooses one from the grid an click the "pen" icon. Then, the record is displayed in the form.
To save the form, choose the save button link. Ok.
Now I need to update the line in the grid.
I get this working, doing the follow in javascript:
$.post(this.href,
sf,
function (response) {
$("#form-edicao").html(response);
var $grid = $("#Grid").data("tGrid");
$grid.rebind(); //==this line update the grid
});
But this approach updates all the grid, return to the first page...
I need to update just one line.
In common table grids, I replace some html elements. How to do this in this mysterious grid?
Taking a look at the Client-side API of the Grid component I think that using .ajaxRequest() instead might be what you're looking for. .rebind() resets the state (page number, filter/sort expressions etc.) while .ajaxRequest() shouldn't.