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'
Related
I will write a method, that gives the Cell value from the clicked Bootstrap table. When I click at first the table heading, the th function was called. After that, I can't click on the cells. The tdOnClick() method is only working before I click to th. Why is that so?
my JS:
//if a cell was clicked, this function was called
function tdOnClick(){
var col = $(this)[0].textContent;
console.log(col);
}
You must add your tdOnClick() function after the function which creates your table body
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;
}
I have a script in google Spreadsheet, which gets the active cell and then the row and column of the active cell:
function editedCellResponse() {
var s = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getActiveCell();
var r = s.getRow(); // gets row of edited cell
var c = s.getColumn(); // gets column of edited cell
... script then goes on doing what ever
}
This script also has an onEdit trigger so it's triggered at each edit of the spreadsheet. However either the getActiveCell doesn't work or the getRow and getColumn don't work because the (row, column) result is always (1, 1) regardless of the active cell. The funny thing is as I was first writing the script this all worked and I never changed anything, but now all of a sudden nothing works because the script seems to be reading the active cell or row and column wrong.
Any ideas as to what might be wrong?
Try this:
function onEdit(e){
var r = e.range.getRow();
var c = e.range.getColumn();
Logger.log('%s,%s',r,c);
}
I have a jgrid with inline editing, when i click on "+" in the pager button it adds a row in editable mode. When the row is in editable mode i click on "+" again at tht time i want to show a message saying "the grid is in edit mode please save it".
document.getElementById('partnerGrid_iladd').onclick = function() {
var rowid = jQuery("#partnerGrid").jqGrid('getGridParam', 'selrow');
var edited = "";
var ind = jQuery("#partnerGrid").getInd(rowid, true);
if (ind != false) {
edited = $(ind).attr("editable");
}
if (edited === "1") {
alert("There is an row in editable mode ,Please save the row before adding another row");
return;
}
}
But this gets fired after a row is added in the grid and the row is in added mode.. So i want to check if the row is a new one if the row is new one i don't want to throw error on click of +.
There are many ways to implement your requirement. You don't posted enough details about what you do, but because you test editable attribute I can guess that you write about the "+" button added by inlineNav. In the case jqGrid calls addRow on the click on the Add button. The method addRow have beforeAddRow callback and jqGridInlineBeforeAddRow event which you can use. The callback/event should return false to prevent adding new row and starting the editing. Moreover you can use savedRow parameter of jqGrid to test whether some other row is in editing mode. You can use getGridParam to get "savedRow" parameter. The returned value is array of saved rows with the values before starting editing. Thus if the length of the array grater as 0 then some other row is still editing.
Wasn't really sure how to ask the question, but my situation is this...
I have a table with one row, which contains a few input boxes. When a user presses the add new, I have managed to add another row to the table. First I make a new variable called oldtable, and then split it at each <tr>.. and save that to the array rows. I use this code:
var newdata="";
for(i=0;i<rows.length;i++)
{
// adds the next row on...
newdata=newdata+rows[i]+"<tr>";
}
newdata=newdata+"MY NEW ROW GOES HERE!";
Then I go on to reset the table innerHTML to the newdata variable.
All works fine, until the user enters data in the first row, and then goes to add data in the second. Then the values on the first row are gone, understandably. Taking into account that the table can theoretically have as many rows as the user wants, how can I go about keeping the values of the first row intact? Is there a way to insert data into the table without reseting what's there?
Thanks.
var olddata = document.getElementById("products_table").innerHTML;
// This splits up each row of it
var rows = olddata.split("<tr>");
// Makes a variable where the new data is going to be stored
var newdata = "";
// This loop is to add back the existing html into the table, it is one short, because we Omit the "add new product" row.
for(i=0;i<rows.length-1;i++)
{
// adds the next row on...
newdata=newdata+rows[i]+"<tr>";
}
// Adds the additional html needed to
newdata=newdata+"my new row goes here!";
// Add newly edited table back in...
document.getElementById("products_table").innerHTML=newdata;
Instead of manipulating HTML in string form (very error prone), you should use the built-in DOM manipulation methods to add new rows to your table. Make sure your table has a TBODY element and give it an ID:
<table id = "product_table">
<tbody id = "product_table_tbody">
<tr>
<td>A Cell</td>
</tr>
</tbody>
</table>
Then, attach an event handler to the Add Row button and do something like this:
function addRow() {
var myTbody = document.getElementById("products_table_tbody");
var myRow = document.createElement("tr");
var myCell = document.createElement("td");
myCell.innerHTML = "My new cell";
myTbody.appendChild(myRow);
myRow.appendChild(myCell);
}