Develop Reference

Deselect selected rows from ag grid angular

Is there any grid api to deselect ag-grid selected rows programatically?
I'm trying to perform some operation on the selected row, basically an async operation , after which I need to deselect this row from the grid .

Used grip api deselectAll function . It worked !
this.gridOptions.api.deselectAll();

For anyone that finds this in the future:
Allow manual row deselection by setting gridOptions.rowDeselection = true as Victor said.
Programatically deselect all rows using gridOptions.api.deselectAll() as OP discovered.
To programatically deselect a single row, use rowNode.setSelected(false).
rowNode.setSelected(isSelected, clearSelection) can be used to select rows as well, and will deselect all rows other than the subject rowNode if clearSelection is true.

I believe it is weird but setting rowDeselection to true didn't work for me. What I wanted was simple: Being able to deselect a row when it was selected already. So I checked the Row Selection section of AG Grid's documentation and I find this:
rowMultiSelectWithClick: ... Clicking a selected row in this mode will deselect the row.
Huh! Yeah that sounds like what I need! But I don't want multiple selection...! I want single selection ONLY. So I thought maybe setting rowSelection to single will fix it and the selection will be single and deselectable. And... yes it works! The reason I was in doubt initially when doing this is using "rowMultiSelectWithClick" together with "single rowSelection" sounds contradictory, but it works anyways and this is the thing that matters really! :)
So e.g., if you're using it in React (quite similar in Angular or Vanilla JavaScript), just add:
<AgGridReact
rowSelection="single"
rowMultiSelectWithClick={true}
//...
>

set gridOptions.rowDeselection to true with rowSelection as multiple will deselect a selected by click when holding control key.

You could try the deselectAll() method in the GridApi. Though, it doesn't appear that AgGrid has an option to deselect specific rows.

To deselect a specific row/node use api.getSelectedNodes() instead of getSelectedRows(). Then for each node use node.data for the row info you need and then node.setSelected(false) to deselect when done.
let selected = gridOptions.api.getSelectedNodes();
_.each(selected, function(node) {
let row = node.data;
//stuff
node.setSelected(false);
});

How to scroll a grid up/down in protractor?

How can I scroll a grid so that I can fetch all element's text for post-processing? Rows under the grid gets created dynamically as I scroll up/down. I tried doing it through Javascript,but, being new to it, did not get success.
I am using protractor and VS Code.
HTML:
Tried:
var div = element(by.css('.ag-scrolls'));
var lastRow = element(by.css('CSS value of last visible row in the view e.g: 5th element ')); //I have 5 rows displayed at once in the view. Remaining elements are displayed when I scroll.
browser.executeScript("return arguments[0].offsetTop;",lastRow.getWebElement()).then(function (offset) {
browser.executeScript('arguments[0].scrollTop = arguments[1];',div.getWebElement(), offset).then(function() {
// assertion of last possible element/row after complete scroll.
});
});
I gave the locator values for first two lines.

Use browser.executeScript("arguments[0].scrollIntoView();", lastRow)

mouseMove has worked for me. It'll scroll the object you pass to it into view
browser.actions().mouseMove(<element>).perform();

How to change layout dynamically in Bootstrap?

Let's say I have a grid with fluid layout. It has one component, a table, in a span12 div - using the entire screen.
When a row in this table is clicked, I want to change the layout. I want to change the table's div to span4 and create a new span8 column on the right to display details of the selected item.
How can I do this programmatically? Something as simple as:
$("#mydiv").removeClass("span12").addClass("span4")
... doesn't seem to work, I believe I need to somehow tell Bootstrap to re-process the entire layout. Is it possible at all?

What about this solution:
var $table = $('.table-container'), // table inside
$side = $('.side-container'); // hidden by default
$table.on('click', 'tr', function() {
$table.removeClass('span8').addClass('span4');
$side.show();
});
http://jsfiddle.net/meV43/
I used total width of span8 in this demo
With toggle column functionality http://jsfiddle.net/meV43/1/

jqGrid: Expected Behavior for Checkboxes in Table Formatting

I am working with jqGrid to display a list of data. Each row has a checkbox on the leftmost side, with the top row acting as a column header. The checkbox on the leftmost side of the column header acts as a "Select All" button for all of the rows being displayed. In this scenario, if a user manually selects all of the checkboxes for each row, should the "Select All" checkbox automatically select itself?
See attached image for the checkbox in question.

Not necessary. It would be nice though.

You can do this way:-
$("#selectAll").click(function(){
grid.jqGrid('resetSelection');
var ids = grid.getDataIDs();
for (var i=0, il=ids.length; i < il; i++) {
grid.jqGrid('setSelection',ids[i], true);
}
});
$("#clear").click(function(){
grid.jqGrid('resetSelection');
});
​
This example is taken from here.

In my point(and my customer's request also) of view, It is necessary. The main reason I want to make sure the header checkbox gets selected in my grids is so the user can subconsciously determine that yes, all the rows in the grid are definitely selected right now. If you consider, many rows in the jqgrid (some row are not visible) , how can i make sure all rows are selected (?).

Change cursor style depending on sort or not

I'm using the jqGrid and have 3 columns that can NOT be sorted. At this point the cursor changes to a hand when the user hovers over the headers regardless of sorting set to true or false. I'd like that cursor to be something other than a hand (text or pointer) on those column heads. It's confusing to the users this way. Is this something that can be set?
Thanks,
Mark

I find the question very good. So +1 from me.
You are not the first person (and not the last one) who wish to have another cursor on non-sortable columns. It's pity, but jqGrid gives you not classes or some other simple attributes which can be used to find the elements at which one can set CSS "cursor:default".
So I suggest to do this with the following code:
var myGrid = $("#list");
// create the grid
myGrid.jqGrid({
// all jqGrid parameters
});
// fix cursor on non-sortable columns
var cm = myGrid[0].p.colModel;
$.each(myGrid[0].grid.headers, function(index, value) {
var cmi = cm[index], colName = cmi.name;
if(!cmi.sortable && colName!=='rn' && colName!=='cb' && colName!=='subgrid') {
$('div.ui-jqgrid-sortable',value.el).css({cursor:"default"});
}
});
You can see on the demo live that the method work. In the demo the last column 'Notes' is non-sortable.
It would be nice if such behavior would be standard in the next version of jqGrid. I will try to find time and to write suggestion what from the code of jqGrid should be changed to make the behavior out-of-the-box.
UPDATED: The problem with the cursor on non-sortable columns is not exist more in free jqGrid 4.8.

Welcome to SO.
Absolutely. CSS:
th.unsortableclass {
cursor: default;
}
Now apply that class to your column headers that aren't sortable.

Oleg's example worked great but I had a request to always show the arrows if the column was sortable. I know I'm commenting but thought some one might have the same requirement.
So I added this to his loop:
jQuery('span.s-ico',value.el).remove();
Then after his code runs:
jQuery(".s-ico").show();
And then added this to my grid create:
onSortCol:function(index, iCol, sortorder){
// redisplay all arrows
jQuery(".s-ico").show();
}

$("jquery selector to pick only non-sorted columns").css("cursor", "default");