Edit mode stops working when press Enter key

[Nico]

Hello,

 

 

 

 

 

When the grid is in edit mode, pressing the ENTER key cancels the edit mode. Each row has several columns of text fields and the upload button (Kendo upload control) is on the last column.
With the Navigatable option, I can tab on each column to edit the text and when I tab into the upload button column and hit enter to upload files, the edit mode is gone and no pop-up window to select files. This behavior is the same with text fields; if I hit the enter key, the fields are closed (not open for edit).  

How do I fix this? It's the grid that doesn't allow the upload control to use the enter key to launch it. Only the mouse CLICK can launch the upload button but I need the upload button to work with the enter key as well.

Below are the options of the grid:

                                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                                            .Pageable()
                                            .Sortable()
                                            .Scrollable()
                                            .Filterable()
                                            .Events(e => e.FilterMenuInit("filterMenuInit"))  <==  I tried this but not working
                                            .Navigatable()

    function filterMenuInit(e) {
        if (e.field == "PdfFileUpd") {  <== I used the browser debugging tool and found this the ID of upload button
            e.container.find("input").keydown(function (e) {
                if (e.keyCode === 13) {
                    $(this).focus().trigger('click');
                }
            });
        }
    }

Below is the columns in the Grid for the upload option:
columns.Bound(p => p.PdfFileUrl).EditorTemplateName("PdfFileUrl").Title("My File").ClientTemplate("Upload").Sortable(false).Filterable(false);

 

Other than that, the grid works fine. Does anyone know how I can make the Enter key to work normally in edit mode?

 

Thank you.

[Nico]

Hello,

I find that if I add ".Navigatable()" to the grid. The edit mode cancels out when using the Enter key. This option messes up the Enter key function. 

Is there a work around to solve this behavior? I would like to have the ".Navigatable()" option so that I can tab thru the fields when editing but not canceling out the edit mode when using the enter key.

 

Thank you.

[Nikolay]

Hello Dominic,

As this forum thread is a duplicate to another support thicket this one will be closed now. Please continue the communication there for better tracking of the case.

I will repost the answer here as well so others encountering the same scenario can benefit from it.

When using a client-side edit template the following code can be used to interact with the keydown handler of the grid's table and to open the upload dialog on Enter. 

    $(document).ready(function () {
        var grid = $("#grid").data("kendoGrid"); // Get the grid's client-side instance. Note that the id must match your grid's id (.Name() method).

        // Attach the keydown event of the grid's table element
        grid.table.on("keydown", function (ev) {
            // Search for the upload input
            var uploadInput = grid.table.find("#grid_active_cell [data-role='upload']");

            if (uploadInput[0] && ev.keyCode === kendo.keys.ENTER) { // Check if upload is in the cell and if Enter is pressed
                uploadInput[0].click(); // Call the click method of the DOM element not the jQuery result.
                ev.preventDefault(); // Prevent additional keydown events.
            }
        });
    });

In case a server-side edit template is used he approach will be different. You will need to reopen the editable container again and then open the upload dialog. Which actually results in very slow action.

    $(document).ready(function () {
        var grid = $("#grid").data("kendoGrid");
        grid.table.on("keydown", function (ev) {
            var target = $(ev.target);
            var container = grid.table.find("#grid_active_cell");
            if (target.is("#upload") && ev.keyCode === kendo.keys.ENTER) {
                grid.editCell(container);
                target.click();
            }
        });
    });

Attached can be found a sample MVC project demonstrating both approaches.

Regards,
Nikolay
Progress Telerik