CODEWITHSUNDEEP
jquerykendo-gridenter
sanzy
sanzy

Reputation: 815

how to focus next cell in kendo grid by pressing enter key

<button class="k-button" id="batchGrid">
    Batch Edit</button>
<div id="example" class="k-content">
    <div id="batchgrid">
    </div>
</div>
<script>
    $("#batchGrid").click(function () {
        var crudServiceBaseUrl = "http://demos.kendoui.com/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function (options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return { models: kendo.stringify(options.models) };
                                    }
                                }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true} },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true} }
                                    }
                                }
                            }
                        });

        $("#batchgrid").kendoGrid({
            dataSource: dataSource,
            dataBound: onDataBound,
            navigatable: true,
            filterable: true,
            pageable: true,
            height: 430,
            width: 300,
            toolbar: ["create", "save", "cancel"],
            columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                            { field: "Discontinued", width: "130px" },
            //                            { field: "", title: "No", template: "#= ++record #", width: "30px" },
                            {command: ["destroy"], title: "&nbsp;", width: "100px"}],
            editable: true
        });
    });
</script>
<script>
    function onDataBound(e) {
        var grid = $("#batchgrid").data("kendoGrid");
        $(grid.tbody).on("keydown", "td", function (e) {
            if ((e.keyCode ? e.keyCode : e.which) == 13) { //Enter keycode
                var row = $(this).closest("tr");
                var rowIdx = $("tr", grid.tbody).index(row);
                var colIdx = $("td", row).index(this);
                alert(rowIdx + '-' + colIdx);

                $this.closest('tr').next().find('td').eq(index).focus();
                e.preventDefault();
            }
        });
    }
</script>

in here when i press the enter key in edit mode(inserting new record) i need to go the next cell(as if i press the tab key).

as well as if i press the enter key in last cell(last column) of any row it should move to the first cell(first column) of next row.

i think problem is in my script.but don't know exactly where.

please help me here..

Upvotes: 5

Views: 16812

Answers (6)

Divyesh Jani
Divyesh Jani

Reputation: 311

  $("#GridID").keypress(function (e) {
            if (e.keyCode === 13) {
                e.preventDefault();
            }
        });

Refer Tested Code:

https://www.telerik.com/forums/how-to-prevent-kendo-validation-on-pressing-enter-key

http://dojo.telerik.com/@c0re/iMaBi

Upvotes: 0

yuniardi
yuniardi

Reputation: 31

you can try this too

$("#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()); 

        });

    }
});

});

Upvotes: 2

Tab
Tab

Reputation: 1762

This is a year late but maybe someone can get something from it. I had a ticket into Telerik and their answer was that tabbing to the next editable cell was by design. Unacceptable.

I needed to go from one editable cell to another and ignore non editable cells so here is the way I did it: http://dojo.telerik.com/@barbedCoil/OhaYo/3

It is not pretty since I have a mix of hard coded cell indexes where ideally I would want to use a css attribute to navigate from cell to cell (next version)

It's a good start anyway

Upvotes: 0

Shivam657
Shivam657

Reputation: 743

Try this code:-

<script>

$(document).ready(function(){

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

var keyCode = e.keyCode || e.which;
                if (keyCode == 13) {
                    var grid = $("#KendoGridName").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>

Note:- Instead of keypress function(e), you can also use keydown function(e){}.

Please pass your comments if the code doesn't work or has some flaws. I tried this in MVC5 and it worked with Kendo Grid.

Upvotes: 2

Jaimin
Jaimin

Reputation: 8020

try this code it help you to move next cell while enter keypress, 

  $(document).ready(function () {
            $("#batchGrid").on("click", "td", function (e) {
                var rowIndex = $(this).parent().index();
                var cellIndex = $(this).index();
                window.onkeydown = 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())));

Upvotes: 0

Chirag Vidani
Chirag Vidani

Reputation: 2587

Try this

    $('.k-edit-field .k-input').on('keypress', function (e) {
   if(event.keyCode == 13)                
                $('.k-edit-field .k-input').next().focus(); //This statement will be used where you want to provide focus
});

you can use class of the kendo edit grid text box which is appended by kendo grid

Upvotes: -2

Related Questions