Issues after implementing Keyboard Navigation in the grid

[Sreejesh]

I have couple of issues after implementing the keyboard navigation in the Kendo grid.

Issue 1: I need the entire row to be selected when the user tries to edit the column by using keyboard navigation. But currently the row selection happens if
we use mouse or by pressing the “Space Bar” key while navigating through the keyboard.

I need to avoid the row selection, which happens after pressing space bar key and need to implement it when the user tries to edit the cell.

Reason: I need to update the values of other columns when the user edits one column. I have implemented it using the grid selection row.Please refer the
below code for it.

//To validate the user inputs
    function onSave(e) {
        var grid = $a('#GrdPlanOrderToMachine').data("kendoGrid");
        var select;
        var data;
        if (e.values["PlanningInd"] != undefined) {
            if (e.values["PlanningInd"] == "N") {
                $("#confirmationDialog").dialog({
                    resizable: false,
                    height: 150,
                    modal: true,
                    buttons: {
                        "Yes": function () {
                            // Access the row that is selected
                            select =grid.select();
                            // select the data
                            data =grid.dataItem(select);
                            // update the column `Machine` and set its value to `0`
                            data.set("MachineId", 0);
                            // update the column `Status` and set its value to `REC`
                            data.set("Status", "REC");
                            data.set("OrderStatus",0);
                            // update the column `PlanningSeq` and set its value to 9999`
                            data.set("PlanningSeq",9999);
                            $(this).dialog("close");
                        },
                        "No": function () {
                            $(this).dialog("close");
                            select =grid.select();
                            //select the data
                            data =grid.dataItem(select);
                            // update the column `PlanningInd` and set its value to`Y`
                            data.set("PlanningInd", "Y");
                            e.preventDefault();
                        }
                    }
                });
            }
        }
    };

Issue 2:  I have a combo box for a column, which contains value as "Y" or "N". I am able to expand the Combo Box in single click before implementing the keyboard Navigation, but after implementing the key board navigation, I am able to expand the combo box after clicking thrice or more time. I have written the below code in the Edit event. 

 //To protect the cell/entire row from editing based on different condition
    function onEdit(e) {
        //For Planning Ind - We are not able set this based on column name hence referring the index
        if (e.container[0].cellIndex == 14) {
            if (e.model.BundleInd != null) {
                if (e.model.BundleInd.toUpperCase() == 'Y') {
                    this.closeCell();
                }
            }
        }
    }

Thanks in Advance,
Regards,
Sreejesh

[Nikolay Rusev]

Hello Sreejesh,

Indeed selection will be activate on space key press. This "by-design" behavior and there isn't built-in infrastructure to prevent this behavior conditionally. It probably can be implement, but it will scenario dependent.

Regarding your second question - I'm not sure how replicate the behavior. I've prepared small example - keyboard navigation and dropdown in Grid editor: http://jsbin.com/OjAWaJe/1/edit

The click on the dropdown expands it on the very first click. Can you elaborate on how to replicate described behavior?
 
Regards,
Nikolay Rusev
Telerik