CODEWITHSUNDEEP
jquerykendo-grid
Vahid Hashemi
Vahid Hashemi

Reputation: 5240

how to focus next cell in kendo grid by enter

I want to select next cell by pressing enter key in Kendo Grid. and i'm using following script :

 function onDataBound(e) {
        $("#batchgrid").on("focus", "td", function (e) {

            var rowIndex = $(this).parent().index();
            var cellIndex = $(this).index();
            $("input").on("keydown", function (event) {
                if (event.keyCode == 13) {
                    $("#batchgrid")
                    .data("kendoGrid")
                    .editCell($(".k-grid-content")
                    .find("table").find("tbody")
                    .find("tr:eq(" + rowIndex + ")")
                    .find("td:eq(" + cellIndex + ")")
                    .next()
                    .focusin($("#batchgrid")
                    .data("kendoGrid")
                    .closeCell($(".k-grid-content")
                    .find("table")
                    .find("tbody")
                    .find("tr:eq(" + rowIndex + ")")
                    .find("td:eq(" + cellIndex + ")")
                    .parent())));
                    return false;
                }
            });
        });
    }

and this is my jsfiddle. The problem with this code is when I hit enter it will focus on the next cell but the previous changes won't remain on screen(the last cell will lost the changes somehow). I know there is a bug with this code I can't figure it out where is the bug.

Upvotes: 1

Views: 9882

Answers (4)

yuniardi
yuniardi

Reputation: 31

this code is work for me

$("#grid").on("focus", "td", function (e) {         
    $("input").on("keydown", function (event) {
        if (event.keyCode == 13) {
            setTimeout(function () {
                var grid = $("#grid").data("kendoGrid");
                var curCell  = $("#grid").find(".k-edit-cell");

                grid.editCell(curCell.next()); 

            });

        }
    });
});

I hope this helps

Upvotes: 1

Shivam657
Shivam657

Reputation: 743

There is actually no need to use a databound function, instead you can use a simple and plain keydown or keypress jQuery function.

Have a look at the below code:-

<script>

$(document).ready(function(){

$("#batchgrid").keypress(function(e){

var keyCode = e.keyCode || e.which;
                if (keyCode == 13) {
                    var grid = $("#batchgrid").data("kendoGrid");
                    var curCell = grid.find(".k-edit-cell");
                    grid.editCell(curCell.next()); // To move the cursor to the next cell and put the cell in edit mode
                    grid.select(curCell.next()); // To select the next cell
                    grid.focus(curCell.next()); // To set focus on to next cell   
                    e.preventDefault(); // To prevent the default behavior of the enter key press
                }
});

});

</script>

Upvotes: 3

karthickj25
karthickj25

Reputation: 1197

Take a look at this JS FIDDLE link

I have modified the databound event as below.

     $("#list").on("focus", "td", function (e) {         
     $("input").on("keydown", function (event) {
         if (event.keyCode == 13) {
             setTimeout(function () {
                 var curCell = $("#list").find(".k-state-selected")
                 var eCell = $("#list").find(".k-edit-cell")

                 curCell.removeClass("k-state-selected");
                 curCell.removeClass("k-state-focused");
                 curCell.removeAttr("data-role");
                 curCell.next().addClass("k-state-selected");
                 curCell.next().addClass("k-state-focused");
                 try {                         $('#list').data('kendoGrid').closeCell(eCell);
                 } catch (ex) {
                 }
                 $('#list').data('kendoGrid').select();                     
                 $('#list').data('kendoGrid').editCell(curCell.next());

             }, 50);

         }
     });
 });
 }

Upvotes: 2

Brunis
Brunis

Reputation: 1063

If you comment out the .data("kendogrid") calls in your keydown event you can navigate with tab and edit/close with enter. It looks like you're resetting the data on both focus and blur.

Upvotes: 1

Related Questions