This is a migrated thread and some comments may be shown as answers.

Grig navigation - disabled cells

1 Answer 181 Views
Grid
This is a migrated thread and some comments may be shown as answers.
gonzalo almada
Top achievements
Rank 1
gonzalo almada asked on 23 Jul 2013, 03:10 PM
I have a grid with incell editing enabled and keyboard navigation.

Based on business rules we are disabling some cells based on the values on some other columns.

The problem is that when navigation through each cell, when you move into a cell disable with closeCell() method, the grid lost focus, and page
scroll up and focus into some of the headers elements.
01.function onCommitmentEdit(e) {
02.       console.log("onCommitmentEdit");
03.       //debugger;
04.       var cell = e.container;
05.        
06.       var $bigStringEditor = cell.find(".big-string-editor");
07. 
08.       if ($bigStringEditor.length == 1) {
09.           $bigStringEditor.keydown(function (ev) {
10.               stop(ev);
11.           });
12.           
13. 
14.           $bigStringEditor.mousedown(function (ev) {
15.               if (ev.button == 0) {
16.                   ev.stopPropagation();
17.               }
18.           });
19. 
20.       }
21.       
22.       //debugger;
23.       switch (cell[0].cellIndex) {
24.           case PROJECT_COLUMN:
25.               //only enabled if Type = "Separately Budgeted"
26.               if (e.model.CommitmentTypeId != 3) {
27.                   this.closeCell();
28.               }
29.               break;
30.           case OFF_TRACK_IMPLICATION_COLUMN:
31.               //only enabled if Execution is "Behind" or "Failing", or Budget= "Over"
32.               if (e.model.CommitmentStatusTypeId != 3 && e.model.CommitmentStatusTypeId != 4 && e.model.BudgetStatusTypeId != 1) {
33.                   this.closeCell();
34.               }
35.               break;
36.           case DEPARTMENTS_INVOLVED_COLUMN:
37.               //only enabled if Cross Department = True
38.               if (!e.model.CrossDepartment) {
39.                   this.closeCell();
40.               }
41.               break;
42.           case CANCEL_OK_COLUMN:
43.               //only enabled if Execution is "Cancelled"
44.               if (e.model.CommitmentStatusTypeId != 6) {
45.                   this.closeCell();
46.               }
47.               break;
48. 
49.       }
50.       e.model.SubGroupId = getSubGroupIdVal();
51.       e.model.DashboardId = getDashBoardIdVal();
52. 
53.   }
Thanks in advance,

Gon

1 Answer, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 24 Jul 2013, 01:24 PM
Hi Gonzalo,


I already answered a ticket regarding the same scenario earlier today. I would like to ask you to post your questions only once, so we could provide you the best possible assistance. Here is a quote from my answer:

To achieve this I would suggest you to attach handlers to the keydown and click events instead of the built in grid events, which may cause some difficulties in the current scenario. Here is a sample implementation.
E.g.
$('#Grid table').on('keydown', function (e) {
    if (e.which == 13) {
        var grid = $("#Grid").data("kendoGrid");
        var row = $("#Grid_active_cell").closest("tr");
        var rowData = grid.dataItem(row);
  
        if (<condition>) {
            e.stopImmediatePropagation();
            grid.closeCell();
        }
    }
})
  
$('#Grid tbody').on('click', "tr[role='row']", function (e) {
    var grid = $("#Grid").data("kendoGrid");
    var rowData = grid.dataItem(this);
  
    if (<condition>) {
        e.stopPropagation();
        grid.closeCell();
    }
})


 

Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
gonzalo almada
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or