Issues after implementing Keyboard Navigation in the grid

2 posts, 0 answers
  1. Sreejesh
    Sreejesh avatar
    4 posts
    Member since:
    Sep 2013

    Posted 21 Oct 2013 Link to this post

    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
  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 23 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top