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.
)