Is it possible to double click the igGrid and call the "Add new row" event? Currently if you enable the add row functionality you get an "Add new row" header at the top of the grid. This will create a temp row on that header. I would like to be able to double click the grid, take the row data clicked, call the "Add new row" event and populate the temp row with the data from the double clicked row.
I have tried the add row api but this adds a new row to the end. I really just want to mimic the single click and populate the temp row.
Thanks,Donnie
I found a work around by using the jQuery double click event and grabbing the nearest row. I then use the igGrid API to focus/edit on the last row created.Notes:Using JSON as a data source.Commit does not save on the back end just stores the row data to my datasource JSON array.This will also autofill the newest row with the data from the row double clicked/tap. Really handy for a timesheet entry system.Code:There are 2 ways to access a double click or tap.1. Straight jQuery. This will not support double tap.
$("#TSDefaultGrid").dblclick(function (event) { gridDoubleClick(this, event); });2. Using a prebuilt jQuery plugin. https://github.com/benmajor/jQuery-Mobile-EventsThis plugin will allow for all kinds of tap. If using this then the jQuery double click is not needed.
$('#TSDefaultGrid').doubletap(function (event) { gridDoubleClick(this, event); });
function gridDoubleClick(obj, evt) {var row = $(event.target).closest('tr'); // the row that was clicked var key = row.attr("data-id"); // This is the PAYROLL_ID from the database. Use this to update any current records. var rowIndex = (row.prevAll("tr").length + 1); // row number clicked var rowCount = $('#TSDefaultGrid tr').length; // overall row count. includes headers. var beforeNewRow = $(obj).igGrid("allRows"); // actual grid row count before adding new row. var GridRow = (rowIndex - 1);
$(obj).igGrid("commit"); // commit and rows before adding new row.
// add a new row with data from the row clicked $(obj).igGridUpdating("addRow", { 'RegNumber': gridData[GridRow].RegNumber, 'SSN': UserSSN, 'Name': gridData[GridRow].Name, 'OccCode': gridData[GridRow].OccCode, 'OccName': gridData[GridRow].OccName, 'InOne': gridData[GridRow].InOne, 'OutOne': gridData[GridRow].OutOne, 'InTwo': gridData[GridRow].InTwo, 'OutTwo': gridData[GridRow].OutTwo, 'Rate': gridData[GridRow].Rate, 'ST': gridData[GridRow].ST, 'OT': gridData[GridRow].OT, 'GrossPay': gridData[GridRow].GrossPay, 'Notes': gridData[GridRow].Notes } );
var afterNewRow = $(obj).igGrid("allRows"); // row array after adding new row.
$(obj).igGrid("commit"); // have to call this or when going to new row it will error.
$(obj).igGridUpdating('startEdit', afterNewRow.length, 0); // this will take me to the newest row for edit.}
Hope this helps someone.
Donnie
Hello Donnie ,
I’m just following up to see if you’ve been able to resolve your issue. If you have any questions or concerns or if you need further assistance please let me know.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support
Thank you for posting in our forum.
Generally you can force the grid to enter edit mode of the add row like this:
$("#grid1").igGridUpdating("startAddRowEdit", e);
So for example you could hook a double click event for each row and get the double clicked row’s cell values. Then you can store them in a global variable and set the in the editCellStarting event.
For example on the rows rendered event you can hook the double click event for each row of the grid and on double click get and store the values:
var valueToPass = new Array();
$(document).delegate("#grid1", "iggridrowsrendered", function (evt, ui) {
var body = ui.tbody;
for (var i = 0; i < ui.tbody[0].children.length; i++) {
$(ui.tbody[0].children[i]).dblclick(function (e) {
var row = this;
valueToPass = new Array();
for (var j = 0; j < this.cells.length; j++) {
valueToPass.push(this.cells[j].innerText);
}
valueToPass.reverse();
})
});
Then on editCellStarting set those values to the cells:
editCellStarting: function (evt, ui) {
if (ui.rowAdding) {
ui.value = valueToPass.pop();
},
Please refer to the attached sample and let me know if you’re trying to achieve something similar.
Developer Support Engineer II