We Keep Coding

adding and editing a new row in ag-grid

I am adding a new row at the top of an existing ag-grid with this code
function addRow() {
let lastrow = gridOptions.api.getDisplayedRowAtIndex(gridOptions.api.getLastDisplayedRow());
gridOptions.api.applyTransaction({add:[lastrow.data], addIndex:0});
}
this works.
I then want to edit the cells which I do by double clicking on each cell.
Every time I press enter, it calls the grid callback
onCellEditingStopped: function(event) {
const rowNode = gridOptions.api.getRowNode(event.rowIndex);
}
I noticed that when it calls onCellEditingStoppedand tries to get the rowNode it always returns the row that was on top before I added the new row (that initial row is now the second row).
What am I doing wrong?

you can tries the 'onCellValueChanged' instead 'onCellEditingStopped'

How to pass clicked/selected row data from one table to another table that are placed side by side

I have two tables that are placed side by side and i would to append selected row on the first table to the second tab
i managed to get the data from a selected row and convert it to an array. I tried using the v-bind tag to bind the data values in the second table and its not working
I expect to click a row in a table and that row is added to another table that is just placed on the side of the other table

What I understood from you question is that you are looking for a jquery code that makes the rows from the two tables to move from one table to the other whenever the user clicks on a row in any of the tables.
for example if you click on a row in first table, it moves to the second table and if you click on a row in second table, it moves to the first table.
if it is so, then the jquery code could be:
// identify the two tables with IDs for easier access
var tbl1=$('#table_1_id'), tbl2=$('#table_2_id');
// use tbody selector to make sure that you don't bind this event to table heading rows
$('#table_1_id,#table_2_id').find('tbody tr').on('click', moveRow);
function moveRow() {
// find on which table this row is
var row = $(this);
var table_current = row.closest('table');
// If current table ID equals to first table ID then it means we are in first table
if (table_current.prop('id')==tbl1.prop('id')) {
// Then we move the row to second table
tbl2.find('tbody').append(row);
} else {
// The row was in second table so we move it to first table
tbl1.find('tbody').append(row);
}
return;
}

Clearing selected table cell by a button click

I have a table that can select a cell by a java script function. I want to clear the selected cell by clicking the clear button. How to implement this by java script.
The cell selecting function is below;
function select_class(element){
document.getElementById("clicked_cell"+previous_element).classList.remove('auto-style01');
document.getElementById("clicked_cell"+element).classList.add('auto-style01');
previous_element = element;
}

Just with innerHTML to empty:
document.getElementById("clicked_cell"+element).innerHTML = "";
You should execute this line on clear button click.

Click on table row except first cell

I have a html table in which rows and columns are adding dynamically.
Create dynamic row
var row = tableHolder.insertRow(0);
row.id = "row_0";
Create a cell
var cell = row.insertCell(0);
cell.id = "cell_0"
Now I need to attach a click event on the dynamically created row.
row.addEventListener('click', function(evnt) {
openPopup();
}, false);
A popup will open on click on the row.
Now I want when user click on first cell of every row, click event should not be fired and popup will not open.

You can use :gt selector in jquery to add click event on other rows.
Checkout the following link :
http://api.jquery.com/gt-selector/

If you have a table with id="mytable" then you can use jQuery's on() method to listen for events on the table which occur on any cell except the first one in each row. The reason for binding to the table is so that dynamicly created rows will still trigger the event (since the event will bubble up to the table).
// Listen for click event on anything but first cell in each row within #mytable
$('#mytable').on('click', 'td:gt(0)', function() {
alert('Got click on anything but the first cell');
});
// Dynamically create row for demonstration
$('#mytable').append('<tr><td>Cell 1</td><td>Cell 2</td></tr>');
Here's a fiddle: jsfiddle
Click on cell 1 and you will find no event fired, click on the second cell and the alert will appear.

Try this JQuery Solution
$('table tr td:not(:first-child)').click(function () {
openPopup();
});

row selection on row click but not on hyperlink click in one of the column in jquery datatable?

i have my customer dataTable which has five columns. one column contains hyperlink. One of the column is checkbox.
i want when user clicks on the row, that row should be selected(which means row color should change and checkbox
should be selected). i can do it with below code snippet
$("#customer").on('click', $.fn.getDataTablesClickHandler("#selectAll"));
//where customer is the html div associated with dataTable and call the same function which gets triggered
//on call of selectAll html element. Inside that function i toggle the class of row
It works great. But my problem is i dont want this to happen(i.e row seection) on click of link inside one of the column.
how i can do this?So basically how can i restrict firing getDataTablesClickHandler on click of certain link in a cell or
on click on cell?

Try this out, you want to check out which target is being clicked, and ignore it if it's an anchor tag.
$("#customer").on('click', function(event) {
if(event.target.tagName == 'A')
return;
$.fn.getDataTablesClickHandler("#selectAll").apply(this);
});

You could do something like this:
if customer is your table;
$("#customer").on('click', 'tr', function(){
if( !$(this).is('tr') )
return;
$.fn.getDataTablesClickHandler("#selectAll");
});