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 add jquery tabledit buttons to new rows of a table

How to tell to jQuery tabledit that the rows are changed? The buttons only generated for existing rows, when I add a new row (for example using jQuery), the table buttons doesn’t appear in the new row. I saw in tabledit code, that there is possibility to switch between view and edit mode (maybe this would help me), but don’t know how to access these methods after the tabledit is created and when rows has been changed.
A little snippet from my code:
$(document).ready(function(){
$(‘#btn’).click(function(){ ... adding row, I need to update tabledit here });
$(‘#table’).Tabledit(...parameters...); }
});
tabledit

Here is the best solution I could come up with for your situation.
I created an "Add" button. NOTE the for-table attribute so I can figure out what table to add to later.
<button id='add' for-table='#example1'>Add Row</button>
Then I created a click handler for the "Add" button.
$("#add").click(function(e){
var table = $(this).attr('for-table'); //get the target table selector
var $tr = $(table + ">tbody>tr:last-child").clone(true, true); //clone the last row
var nextID = parseInt($tr.find("input.tabledit-identifier").val()) + 1; //get the ID and add one.
$tr.find("input.tabledit-identifier").val(nextID); //set the row identifier
$tr.find("span.tabledit-identifier").text(nextID); //set the row identifier
$(table + ">tbody").append($tr); //add the row to the table
$tr.find(".tabledit-edit-button").click(); //pretend to click the edit button
$tr.find("input:not([type=hidden]), select").val(""); //wipe out the inputs.
});
Essentially;
Deep Clone the last row of the table. (copies the data and attached events)
Determine and set the row identifier.
Append the new row.
Automatically click the Edit button.
Clear all inputs and selects.
In my limited testing this technique appears to work.

jQuery Tabledit should be executed every time a table is reloaded. See answer given here:
refreshing Tabledit after pagination
This means that every time you reload the table (e.g. navigating to new page, refreshing etc), you must initialize Tabledit on the page of the table where it wasn't initialized. The problem is that there is no way to know whether Tabledit has been initialized on the table already, hence if you re-initialize it, duplicate buttons (edit, delete..) will be added to the rows of the table. You also cannot destroy a non-existent Tabledit, hence calling 'destroy' always beforehand will not help.
I hence created my own function to tell me if Tabledit is initialized on a certain page of a table or not:
function hasTabledit($table) {
return $('tbody tr:first td:last > div', $table).hasClass("tabledit-toolbar");
}
and using it as follows:
if( !hasTabledit($('#table')) ) {
$('#table').Tabledit({
url: 'example.php',
columns: {
identifier: [0, 'id'],
editable: [[1, 'points'], [2, 'notes']]
},
editButton: true,
deleteButton: false
});
}
The hasTabledit(..) function checks whether the last cell of the first row of the table has a div which has the tabledit-toolbar class, since this is the div that holds the Tabledit buttons. You may improve it as you like. This is not the perfect solution but it is the best I could do.

the combo box editor in cell editing grid does not deselect after choosing a value

I am having an editor grid with four columns and i am trying to implement a sql builder. The where statement will have four fields namely "condition1" "operator" "condition2" "and/or".
I am using a combo box to select between and/or/none and there is a delete button as row action. when I delete a row and if that row is the last,the value of and/or combo in the previous row will be set as "none". I am able to achieve that but the problem is , when the combo box is selected in the previous row and i delete the row next to it, the value changes in the store but not in the view. the value changes in the view when the combo box is not selected in the previous row.
my code is :
if(rowIndex == grid.all.endIndex)
{
//get the previous record and set the vale to none
var previousRowRecord = grid.store.getAt(rowIndex-1);
previousRowRecord.set('andor','NONE');
//delete the current record
grid.getStore().removeAt(rowIndex);
grid.getView().refresh();
}
else
{
grid.getStore().removeAt(rowIndex);
}
How to deselect a combo box once the value is selected ? i think this can be a work around

Not sure if I understood you correctly (a screenshot would help out a lot here), but it may sound like the combo box is still in the edit state when you are deleting the row below. If so, try the following:
First make sure the grid editor plugin has an id:
plugins: [{
ptype: 'cellediting',
...
pluginId: 'celleditplugin'
}],
Then, before deleting the row, do the following:
yourGrid.getPlugin('celleditplugin').completeEdit();

JqGrid check to see if the row is selected

Hi im trying to check to see if a row is selected in jqGrid and if it is then toggle the selection.
I know i can deselect the current row using
`.jqGrid('setSelection', rowid, false);`
and
.jqGrid('resetSelection');
applys this to every row in the grid. But i need to check if the row is already selected before i deselect it.
But what i need to do is an if statement that checks if the selected row is selected and if so do some code but i don't know how to get the true or false value from the row. I've tried using and alert to see what the setSelection reruns but it just displays [object object]. Thank you for any help.

You can use .jqGrid("getGridParam", "selrow") and .jqGrid("getGridParam", "selarrrow") (be carefull in the strange name of the option) to get internal options which hold the last selected rowid and the array of rowids of selected rows. So, if you need to check whether the row with the rowId is selected and you use multiselect: true option, then you can use the following code template
var selRowIds = $("#grid").jqGrid("getGridParam", "selarrrow");
if ($.inArray(rowId, selRowIds) >= 0) {
// the row having rowId is selected
}

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 (?).