54271

kendo grid - navigate and enter cells with arrow keys

Question:

How can I achieve the following, when arrow keys are pressed it should go to the curresponding cell and enter the cell so the user can start typing right away without having to enter the cell first, and if the arrow keys are pressed in a numeric cell it should ignore the default behavior of adding or subtracting numbers and instead go to the upper or lower cell in the next row.

<strong>EDIT</strong>:

Here is the code I came up with but it only works sometimes and sometimes it will skip a cell or two, any advice?

$(document).ready(function () { var grid = $("#grid").data("kendoGrid"); $(grid.tbody).on("keydown", "td",function (e) { if (e.keyCode >= 37 && e.keyCode <= 40) { var row = $(this).closest("tr"); var rowIndex = $("tr", grid.tbody).index(row); var colIndex = $("td", row).index(this); grid.closeCell(); if (e.keyCode == 37) {//left colIndex--; } if (e.keyCode == 38) {//up rowIndex--; } if (e.keyCode == 39) {//right colIndex++ } if (e.keyCode == 40) {//down rowIndex++ } grid.editCell($("#grid tr:eq(" + rowIndex + ") td:eq(" + colIndex + ")")); } }); });

Answer1:

You have a silly mistake in your code which prevents it to work. You know, Kendo's grid actually works with two tables togheter, one for the header, other for the body. So if you specify in your selector the body's table tbody element(the header table doesn't haves that element), it will work:

grid.editCell($("#grid tbody tr:eq(" + rowIndex + ") td:eq(" + colIndex + ")")); ^^^^^ // add here the 'tbody' element

<a href="http://dojo.telerik.com/osaBU/2" rel="nofollow">Demo</a>.

Also, I have added a little logic at the end to user be able to loop through rows and cell while navigating.

It is such a simple feature which should be native in the widget, IMHO.

Recommend

  • Is it possible to run an application built on sql server 2008 to run with 2005
  • How to Divide an array on c#?
  • Run EF6 Query in separate Thread on WinForm Button Click Event
  • Returning this from a constructor function in JS
  • AVCaptureSession VS UIImagePickerController camera preview
  • Accessing the variables from a PHP Anonymous Function
  • What is the use of a session store?
  • How to open html table in xls on click of a button
  • how to get username into sql trigger when multiple users signed on from asp membership
  • Uncaught TypeError: $(…).select2 is not a function
  • android.support.v7.widget.Toolbar VectorDrawableCompat IllegalStateException when using support lib
  • Button click event not firing in jQuery
  • How do I get HTML corresponding to current DOM tree?
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Custom validator control occupying space even though display set to dynamic
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Refering to the class itself from within a class mehod in Objective C
  • Fetching methods from BroadcastReceiver to update UI
  • How to recover from a Spring Social ExpiredAuthorizationException
  • ILMerge & Keep Assembly Name
  • Change an a tag attribute in JavaScript based on screen width
  • Symfony2: How to get request parameter
  • Large data - storage and query
  • WOWZA + RTMP + HTML5 Playback?
  • GridView Sorting works once only
  • Unanticipated behavior
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • How to delete a row from a dynamic generate table using jquery?
  • WPF Applying a trigger on binding failure
  • Acquiring multiple attributes from .xml file in c#
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How can I remove ASP.NET Designer.cs files?
  • Can't mass-assign protected attributes when import data from csv file
  • Binding checkboxes to object values in AngularJs
  • Unable to use reactive element in my shiny app
  • java string with new operator and a literal
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?