Skipping non-editable cells when tabbing in grid

[Chinonso]

Hi there, i am running into a bit of a problem. I want to tab through a batch edit grid and i have certain cells that are non-editable. I read in Telerik's documentation that for this to work, i have to remove "Navigatable()"  from grid. But if there is not event to attach to, how does the java script execute when i press the Tab key. Could this also be the reason whey i get the error "The grid is undefined." 

Here is the JavaSript

01.<script type="text/javascript">
02.    var grid = $('#PlanPepole').data('kendoGrid');
03.
04.    console.log("this is grid:", grid);
05.
06.    grid.table.on('keydown', function (e) {
07.        if (e.keyCode === kendo.keys.TAB && $($(e.target).closest('.k-edit-cell'))[0]) {
08.            e.preventDefault();
09.            var currentNumberOfItems = grid.dataSource.view().length;
10.            var row = $(e.target).closest('tr').index();
11.            var col = grid.cellIndex($(e.target).closest('td'));
12.
13.            var dataItem = grid.dataItem($(e.target).closest('tr'));
14.            var field = grid.columns[col].field;
15.            var value = $(e.target).val();
16.            dataItem.set(field, value);
17.            var nextCellCol = 3;
18.
19.            if (row >= 0 && row < currentNumberOfItems && col >= 0 && col < grid.columns.length) {
20.                console.log("this is col:",col);
21.                var nextCellRow;
22.                if (col === 3) {
23.                    nextCellCol = 4;
24.                }
25.                else if (col === 4) {
26.                    nextCellCol = 5;
27.                }
28.                else if (col === 5) {
29.                    nextCellCol = 6;
30.                }
31.                else if (col === 6) {
32.                    nextCellCol = 7;
33.                }
34.
35.                if (e.shiftKey) {
36.                    nextCellRow = nextCellCol === 3 ? row : row - 1;
37.                } else {
38.                    nextCellRow = nextCellCol === 3 ? row + 1 : row;
39.                }
40.
41.                if (nextCellRow >= currentNumberOfItems || nextCellRow < 0) {
42.                    return;
43.                }
44.
45.                // wait for cell to close and Grid to rebind when changes have been made
46.                setTimeout(function () {
47.                    grid.editCell(grid.tbody.find("tr:eq(" + nextCellRow + ") td:eq(" + nextCellCol + ")"));
48.                });
49.            }
50.        }
51.    });
52.
53.</script>

 

Here is my code Index.cshtml

01.@(Html.Kendo().Grid<P2I_UI.Models.ViewM.PlanPeopleVM>()
02.    .Name("PlanPepole")
03.    .Columns(columns =>
04.    {
05.        columns.Bound(e => e.PeopleCategoryName).Title("").Width(154);
06.        columns.Bound(e => e.MinistryGroupCategoryName).Title("Ministry Group").Width(2);
07.        columns.Bound(e => e.AgeCategoryName).Title("Age Category").Width(2);
08.        columns.Bound(e => e.PeopleQ1).Title("Q1").Width(79);
09.        columns.Bound(e => e.PeopleQ2).Title("Q2").Width(79);
10.        columns.Bound(e => e.PeopleQ3).Title("Q3").Width(79);
11.        columns.Bound(e => e.PeopleQ4).Title("Q4").Width(79);
12.        columns.Bound(e => e.Annual).Width(79);
13.    })
14.    .ToolBar(toolbar =>
15.    {
16.        toolbar.Save();
17.    })
18.    .Editable(editable => editable.Mode(GridEditMode.InCell))
19.    //.Navigatable()
20.    .Events(events =>
21.    {
22.        events.DataBound("Ppg_Uneditable_ColandRow");
23.        events.SaveChanges("disableBeforeUnload");
24.        events.Edit("onEditPlanPepole");
25.    })
26.    .DataSource(dataSource => dataSource
27.        .Ajax()
28.        .ServerOperation(false)
29.
30.        .Batch(true)
31.        .Model(model =>
32.        {
33.            model.Id(p => p.PlanPeopleID);
34.            model.Field(p => p.PeopleCategoryName).Editable(false);
35.            model.Field(p => p.MinistryGroupCategoryName).Editable(false);
36.            model.Field(p => p.AgeCategoryName).Editable(false);
37.        })
38.        .PageSize(30)
39.        .Read(read => read.Action("People_Read", "PlanPeople"))
40.    )
41.)

[Chinonso]

Hi there, i have fixed the issue with the grid undefined. I simply places the javascript logic in a  function

 

1.$(function () {
2.
3.    -- Insert JS here ----
4.
5.})

 

Now the issue i am running into is that when , tab, it doesn't move to the next column. What could be the issue?

[Chinonso]

Ignore This Post!!!!!!!!!!!!

Ignore This Post!!!!!!!!!!!!

Ignore This Post!!!!!!!!!!!!

Ignore This Post!!!!!!!!!!!!

 

it is flawed. i will create a new one. Sorry for the inconvenience

[Preslav]

Hello,

I am linking the other forum post for a reference if anyone from the community encounters the same issue. There, we will investigate the issue further.

http://www.telerik.com/forums/skipping-non-editable-columns-when-tabbing-in-a-grid(grouped-and-aggregated) 

Regards,
Preslav
Progress Telerik

[Chinonso]

Thanks