issues using both keyboard navigation and details Line

[Arnaud]

Hi everybody, 

I'm using a grid with both keyboard navigation and details Lines. Pressing the enter key open/close the detail Line in every cases even if a cell of the main line is focused or in edition mode.
I would like to set the enter key action to:
-open/close the detail line when the detail line arrow is focused
-go in edition or validate the edition if a cell is focused.

Do you have an idea about how I could handle this? So far, the only way I have found is to unable the keyboard navigation so it is not really a perfect solution...

any help would be appreciated, 
Thank you all!

[Vladimir Iliev]

Hi Arnaud,


From the provided information it's not clear for us what is the exact edit mode that you are using, however you can attach keydown event handler to the master Grid rows in which to prevent the default action if current key is "enter". Optionally if you are using "incell" editing you can close the current cell - please check the example below:
 

<script type="text/javascript">
    $(function () {
        //create one empty row
        $("#Employees table tbody").append("<tr class='k-master-row'></tr>");
        $("#Employees table").bind("keydown", "tr.k-master-row", function (e) {
            console.log(e.keyCode);
            //if current key is Enter
            if (e.keyCode == 13) {
                //prevent keypress
                e.stopImmediatePropagation();
                var grid = $("#Employees").data("kendoGrid");

                //You can additionally check if cell is the first from the row
                //to expand the details on given key combination

                //get current cell
                var currentCell = grid.current();
                //find all input elemens in current cell
                var editors = currentCell.find("input");
                if (editors.length != 0) {
                    //if there are editors, then the cell is in edit mode
                    editors.each(function () {
                        var current = $(this);
                        current.trigger("change");
                    })

                    grid.closeCell();
                    grid.table.focus();
                } else {
                    //view mode
                    grid.editCell(currentCell);
                }
            }
        })
    })
</script>


@(Html.Kendo().Grid<EmployeeViewModel>()
    .Name("Employees")

Regards,
Vladimir Iliev
Telerik

[Arnaud]

Hi Vladimir, 

Your answer works perfectly and feets exactly with my needs. 
Thank you very much!!

Arnaud