Need key down Event in Grid - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: delete, grid, jqxGrid ;, Key Down Event in Grid, row

This topic contains 5 replies, has 4 voices, and was last updated by a2m developer 5 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Need key down Event in Grid Posts

December 20, 2012 at 4:45 am Need key down Event in Grid #12618

Member

hi dude,

i need key down event in grid . i want to delete the selected row while press delete key in keyboard.
Kindly give me the clarification .

With Regards,
Ravikumar.R

December 20, 2012 at 9:08 am Need key down Event in Grid #12634

Dimitar

Participant

Hello Ravikumar.R,

Here is an example, based on the demo Customizing KB Navigation:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to override the built-in keyboard navigation.
        Press "Enter" or "Esc".</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var url = '../sampledata/nasdaq_vs_sp500.txt';
            var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Date', type: 'date' },
                    { name: 'S&P 500', type: 'float' },
                    { name: 'NASDAQ', type: 'float' }
                ],
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                editable: true,
                ready: function () {
                    $("#jqxgrid").jqxGrid('focus');
                },
                editmode: 'dblclick',
                selectionmode: 'singlerow',
                handlekeyboardnavigation: function (event) {
                    var rowindex = $('#jqxgrid').jqxGrid('getselectedrowindex');
                    var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                    if (key == 46) {
                        $('#jqxgrid').jqxGrid('deleterow', rowindex);
                        return true;
                    }
                },
                columns: [
                  { text: 'Date', datafield: 'Date', cellsformat: 'D', width: 250 },
                  { text: 'S&P 500', datafield: 'S&P 500', width: 200, cellsformat: 'f' },
                  { text: 'NASDAQ', datafield: 'NASDAQ', width: 200, cellsformat: 'f' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

December 20, 2012 at 9:20 am Need key down Event in Grid #12635

RavikumarR

Member

Thanks Dude… am also search the alternate solution …

Solution :

$("#grdAssigned").bind('keydown', function (event) {
                 var rowindex = $('#grdAssigned').jqxGrid('getselectedrowindex');
                 var rowcount = $("#grdAssigned").jqxGrid('getdatainformation').rowscount;
                 if (event.keyCode == '46') {  // Delete the Selected Row
                     var selectedrowindex = $("#grdAssigned").jqxGrid('getselectedrowindex');
                     var rowscount = $("#grdAssigned").jqxGrid('getdatainformation').rowscount;
                     if (selectedrowindex &gt;= 0 &amp;&amp; selectedrowindex &lt; rowscount) {
                         var id = $(&quot;#grdAssigned&quot;).jqxGrid('getrowid', selectedrowindex);
                         var commit = $(&quot;#grdAssigned&quot;).jqxGrid('deleterow', id);
                     }
                 }
                 else if (event.keyCode == '9') { // Tab Movement with in Grid
                     if (rowcount == rowindex + 1) { // If final row then Insert New Row
                         var datarow1 = generaterow1();
                         var commit = $(&quot;#grdAssigned&quot;).jqxGrid('addrow', 1, datarow1);
                         $('#grdAssigned').jqxGrid('selectrow', rowindex + 1);
                         $('#grdAssigned').jqxGrid('focus');
                     }
                     else { // Otherwise move the next row by using tab
                         $('#grdAssigned').jqxGrid('selectrow', rowindex + 1);
                     }
                 }
                 else if (event.keyCode == '39') {
                 }
             });

December 20, 2017 at 11:25 am Need key down Event in Grid #97986

cbr00t

Participant

var columns = [
	//... bla bla ...
];
var lastEventTimestamp;

function initGrid() {
	var grid = $('#grid');
	grid.jqxGrid('handlekeyboardnavigation', function(event) {
		if (!event || lastEventTimestamp == event.timeStamp)
			return;
		
		if (event.timeStamp)
			lastEventTimestamp = event.timeStamp;
		
		var cell = grid.jqxGrid('getselectedcell');
		if (!cell)
			return;
		
		//var column = columns.find(col => col.datafield == cell.datafield);
		var column = grid.jqxGrid('getcolumn', cell.datafield);
		var key = event.charCode || event.key || event.keyCode || 0;
		if (typeof key == 'string')
			key = key.toLowerCase();
		
		return handleKeyboardNavigation(event, key, cell, column);
	});
}

function handleKeyboardNavigation(event, key, cell, column) {
	if (key == 'enter') {			// Enter should be act like Tab key
		key = (event.key = 'Tab').toLowerCase();
		event.keyCode = 9;
	}
	
	switch (key) {
		case 'ins':
		case 'insert':
			grid.jqxGrid('unselectcell', cell.rowindex, cell.datafield);
			grid.jqxGrid('addrow', null, newEmptyRecord(options.columns), cell.rowindex);
			grid.jqxGrid('selectcell', cell.rowindex, cell.datafield);
			return true;			// true: prevents grid's default action
		case 'del':
		case 'delete':
			// if ctrlKey was pressed delete row(s); otherwise delete cell content and column(s) cellvaluechanging event should be fired
			if (event.ctrlKey) {
				var rowCount = grid.jqxGrid('getdatainformation').rowscount;
				if (rowCount) {
					// build rowID array and pass to deleterow method
					var records = grid.jqxGrid('rows').records;
					var cells = grid.jqxGrid('getselectedcells');
					var rowIDs = [];
					$.each(cells, (ind, cell) =>
						rowIDs.push(grid.jqxGrid('getrowid', cell.rowindex)));
					grid.jqxGrid('deleterow', rowIDs);
					
					// unselect currently selected first cell
					var _cell = cells[0];
					grid.jqxGrid('unselectcell', _cell.rowindex, _cell.datafield);
					
					// if rowCount == 0 then add an empty row (for excel-like free data input)
					rowCount = grid.jqxGrid('getdatainformation').rowscount;
					if (!rowCount)
						grid.jqxGrid('addrow', null, this.newEmptyRecord(options.columns), 'bottom');
					
					// select original first cell
					grid.jqxGrid('selectcell', _cell.rowindex, _cell.datafield);
				}
				
				return true;				// true: prevents grid's default action
			}
			else {
				// get selected cell(s) info and save old values
				var cells = grid.jqxGrid('getselectedcells');
				var oldCellInfos = [];
				$.each(cells, function(ind, _cell) {
					oldCellInfos.push({ cell: _cell, oldValue: grid.jqxGrid('getcellvalue', _cell.rowindex, _cell.datafield) });
				});
				
				// make cell values as empty value (0 or '') and then call related col's cellvaluechanging event
				// 	by passing oldValue and changed newValue.
				
				// async timer used to prevent bugs i seen at setcellvalue inside event ??
				setTimeout(function() {
					$.each(oldCellInfos, function(ind, bilgi) {
						var _cell = bilgi.cell;
						var _col = (_cell.datafield == col.datafield)
										? col
										: grid.jqxGrid('getcolumn', _cell.datafield);
						if (!_col || _col.editable === false)
							return true;			// continue loop
						
						var newValue = col.defaultValue || (col.datatype == 'number' ? 0 : '');
						grid.jqxGrid('setcellvalue', _cell.rowindex, _cell.datafield, newValue);
						if (_col.cellvaluechanging)
							_col.cellvaluechanging(_cell.rowindex, _cell.datafield, _col.columntype, bilgi.oldValue, newValue);
					});
				}, 500);
				
				return true;					// true: prevents grid's default action
			}
			break;
		}
	}
}

function raiseColumnsKeyboardNavigationHandler(selector, key, cell, column) {
	var handler = column[selector];
	if (handler)
		return handler(event, key, cell, column, options);
	
	// else returns undefined (== null)
}

function newEmptyRecord(columns) {
	var record = {};
	$.each(columns, function(ind, col) {
		record[col.datafield] = col.defaultValue
									? col.defaultValue
									: (col.type == 'number' ? 0 : '');
	});
	
	return record;
}

December 21, 2017 at 6:11 am Need key down Event in Grid #97997

Dimitar

Participant

Hello cbr00t,

Thank you for your contribution.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 21, 2019 at 7:36 pm Need key down Event in Grid #103594

a2m developer

Participant

Possible bug:

I see in cbr00t’s comment above the testing of the timestamp

if (!event || lastEventTimestamp == event.timeStamp)
			return;

I have also noticed the handlekeyboardnavigation event is raised multiple times on a single event. For every keystroke the function is hit three (3) times.

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.