jQuery UI Widgets › Forums › DataTable › select new row on Enter pressed
Tagged: beginrowedit, data table, datatable, edit, Enter, jqxdatatable, key, keyboard, row, rowEndEdit
This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 9 years, 10 months ago.
-
Author
-
Hi,
I need to enter data “quickly” into a DataTable. I have set the row that it is editable on first mouse click. Now I want to select the next row to put in a new value after I pressed Enter on the previous line. My code looks like this –$(“#table”).jqxDataTable(
{
altrows: true,
width: “100%”,
sortable: true,
editable: true,
editSettings:
{
saveOnPageChange: true,
saveOnBlur: true,
saveOnSelectionChange: true,
cancelOnEsc: true,
saveOnEnter: true,
editSingleCell: true,
editOnDoubleClick: true,
editOnF2: true
},
source: dataAdapter,
theme: “metro”,
columns: columns
}).on(‘rowSelect’, function (event) {
var args = event.args;
rowIndex = args.index;
$(“#table”).jqxDataTable(‘beginCellEdit’, rowIndex, “QuantityCounted”);
}).on(“cellEndEdit”, function (event) {
var args = event.args;
rowIndex = args.index;
newRow = rowIndex + 1;
$(“#table”).jqxDataTable(‘beginCellEdit’, newRow, “QuantityCounted”);
}).on(“cellBeginEdit”, function (event) {
event.preventDefault();
});So in essence, I use ‘rowSelect’ to trigger ‘beginCellEdit’ – this works fine. But now after the edit, in other words when I press Enter, I’m trying to edit the next line. Only one column is editable. The reason I added event.preventDefault(), is because it seems that when I press enter, it loops through the entire DataTable before “saving” the value in the cell, but then still fails to go to the next line.
Can you please assist or guide me in the right direction?
Regards.
IgiHello Igi,
Here is a working example. We hope it is helpful to you:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#dataTable").jqxDataTable( { altrows: true, sortable: true, editable: true, ready: function () { $("#dataTable").jqxDataTable('beginRowEdit', 0); }, columns: [ { text: 'First Name', dataField: 'First Name', width: 100 }, { text: 'Last Name', dataField: 'Last Name', width: 100, editable: false }, { text: 'Product', dataField: 'Product', width: 180, editable: false }, { text: 'Unit Price', dataField: 'Price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2', editable: false }, { text: 'Quantity', dataField: 'Quantity', width: 80, align: 'right', cellsAlign: 'right', editable: false } ] }); $('#dataTable').on('rowEndEdit', function (event) { // event args. var args = event.args; // row data. var row = args.row; // row index. var index = args.index; // row's data bound index. var boundIndex = args.boundIndex; // row key. var key = args.key; var rows = $("#dataTable").jqxDataTable('getRows').length; if (rows >= boundIndex + 1) { setTimeout(function () { $("#dataTable").jqxDataTable('beginRowEdit', boundIndex + 1); }, 100); } }); }); </script> </head> <body class='default'> <table id="dataTable" border="1"> <thead> <tr> <th align="left"> First Name </th> <th align="left"> Last Name </th> <th align="left"> Product </th> <th align="right"> Price </th> <th align="right"> Quantity </th> </tr> </thead> <tbody> <tr> <td> Ian </td> <td> Devling </td> <td> Espresso Truffle </td> <td> $1.75 </td> <td> 8 </td> </tr> <tr> <td> Nancy </td> <td> Wilson </td> <td> Cappuccino </td> <td> $5.00 </td> <td> 3 </td> </tr> <tr> <td> Cheryl </td> <td> Nodier </td> <td> Caffe Americano </td> <td> $2.50 </td> <td> 4 </td> </tr> <tr> <td> Martin </td> <td> Saavedra </td> <td> Caramel Latte </td> <td> $3.80 </td> <td> 11 </td> </tr> <tr> <td> Guylene </td> <td> Bjorn </td> <td> Green Tea </td> <td> $1.50 </td> <td> 8 </td> </tr> <tr> <td> Andrew </td> <td> Burke </td> <td> Caffe Espresso </td> <td> $3.00 </td> <td> 2 </td> </tr> <tr> <td> Regina </td> <td> Murphy </td> <td> White Chocolate Mocha </td> <td> $3.60 </td> <td> 6 </td> </tr> <tr> <td> Michael </td> <td> Murphy </td> <td> Caramel Latte </td> <td> $3.80 </td> <td> 2 </td> </tr> <tr> <td> Petra </td> <td> Bein </td> <td> Caffe Americano </td> <td> $2.50 </td> <td> 7 </td> </tr> <tr> <td> Nancy </td> <td> Nodier </td> <td> Caffe Latte </td> <td> $4.50 </td> <td> 10 </td> </tr> <tr> <td> Peter </td> <td> Devling </td> <td> Green Tea </td> <td> $1.50 </td> <td> 1 </td> </tr> <tr> <td> Beate </td> <td> Saylor </td> <td> Espresso con Panna </td> <td> $3.25 </td> <td> 3 </td> </tr> <tr> <td> Shelley </td> <td> Nodier </td> <td> Peppermint Mocha Twist </td> <td> $4.00 </td> <td> 7 </td> </tr> <tr> <td> Nancy </td> <td> Murphy </td> <td> Peppermint Mocha Twist </td> <td> $4.00 </td> <td> 1 </td> </tr> <tr> <td> Lars </td> <td> Wilson </td> <td> Caffe Espresso </td> <td> $3.00 </td> <td> 11 </td> </tr> </tbody> </table> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you very much, work perfectly.
One other question, is there a way to select all text automatically when the new row comes to focus, as you would in JQuery use $(element).select() ?
Igi
Hi Igi,
Here is how to achieve this functionality:
$("#dataTable").jqxDataTable( { altrows: true, sortable: true, editable: true, ready: function () { $("#dataTable").jqxDataTable('beginRowEdit', 0); }, columns: [ { text: 'First Name', dataField: 'First Name', width: 100, initEditor: function (row, cellValue, editor, cellText, width, height) { setTimeout(function () { editor.select(); }, 50); } }, { text: 'Last Name', dataField: 'Last Name', width: 100, editable: false }, { text: 'Product', dataField: 'Product', width: 180, editable: false }, { text: 'Unit Price', dataField: 'Price', width: 90, align: 'right', cellsAlign: 'right', cellsFormat: 'c2', editable: false }, { text: 'Quantity', dataField: 'Quantity', width: 80, align: 'right', cellsAlign: 'right', editable: false } ] });Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.