Hi there,I want to tab through a batch edit grid and i have certain columns that are non-editable (unamed column, Ministry Group, Age Category And Annual ( i use e.closeCell in javascript for the Annual column) ). Right now, i am able to Tab through the grid though partially. The problems i am running into is
1.) When i tab through the grouped section (People Reached) of the grid, it works fine but any thing past the first 3 rows and tabbing no longer works.
So my question ultimately is how do i make it jump to the next grouped section(People Trained) and Tab through and so on and so forth.
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).ClientGroupFooterTemplate(
"Total"
);
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).ClientGroupFooterTemplate(
"#=kendo.toString(sum,',0')#"
);
09.
columns.Bound(e => e.PeopleQ2).Title(
"Q2"
).Width(79).ClientGroupFooterTemplate(
"#=kendo.toString(sum,',0')#"
);
10.
columns.Bound(e => e.PeopleQ3).Title(
"Q3"
).Width(79).ClientGroupFooterTemplate(
"#=kendo.toString(sum,',0')#"
);
11.
columns.Bound(e => e.PeopleQ4).Title(
"Q4"
).Width(79).ClientGroupFooterTemplate(
"#=kendo.toString(sum,',0')#"
);
12.
columns.Bound(e => e.Annual).Width(79).ClientGroupFooterTemplate(
"#=kendo.toString(sum,',0')#"
);
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.
.Aggregates(aggregates =>
30.
{
31.
aggregates.Add(p => p.PeopleCategoryName).Count();
32.
aggregates.Add(p => p.PeopleQ1).Sum();
33.
aggregates.Add(p => p.PeopleQ2).Sum();
34.
aggregates.Add(p => p.PeopleQ3).Sum();
35.
aggregates.Add(p => p.PeopleQ4).Sum();
36.
aggregates.Add(p => p.Annual).Sum();
37.
})
38.
.Batch(
true
)
39.
.Model(model =>
40.
{
41.
model.Id(p => p.PlanPeopleID);
42.
model.Field(p => p.PeopleCategoryName).Editable(
false
);
43.
model.Field(p => p.MinistryGroupCategoryName).Editable(
false
);
44.
model.Field(p => p.AgeCategoryName).Editable(
false
);
45.
})
46.
.PageSize(30)
47.
.Group(groups => groups.Add(p => p.PeopleCategoryID))
48.
.Read(read => read.Action(
"People_Read"
,
"PlanPeople"
))
49.
)
50.
)
JavaScrpt
01.
$(
function
() {
02.
03.
var
grid = $(
'#PlanPepole'
).data(
'kendoGrid'
);
04.
05.
grid.table.on(
'keydown'
,
function
(e) {
06.
if
(e.keyCode === kendo.keys.TAB && $($(e.target).closest(
'.k-edit-cell'
))[0]) {
07.
e.preventDefault();
08.
var
currentNumberOfItems = grid.dataSource.view().length;
09.
var
row = $(e.target).closest(
'tr'
).index();
10.
11.
12.
var
dataItem = grid.dataItem($(e.target).closest(
'tr'
));
13.
var
field = grid.columns[col].field;
14.
var
value = $(e.target).val();
15.
dataItem.set(field, value);
16.
var
nextCellCol = 3;
17.
18.
if
(row >= 0 && row < currentNumberOfItems && col >= 0 && col < grid.columns.length) {
19.
console.log(
"this is col:"
, col);
20.
var
nextCellRow;
21.
if
(col === 3) {
22.
nextCellCol = 5;
23.
}
24.
else
if
(col === 4) {
25.
nextCellCol = 6;
26.
}
27.
else
if
(col === 5) {
28.
nextCellCol = 7;
29.
}
30.
else
if
(col === 6) {
31.
nextCellCol = 4;
32.
}
33.
34.
if
(e.shiftKey) {
35.
nextCellRow = nextCellCol === 4 ? row : row - 1;
36.
}
else
{
37.
nextCellRow = nextCellCol === 4 ? row + 1 : row;
38.
}
39.
40.
if
(nextCellRow >= currentNumberOfItems || nextCellRow < 0) {
41.
return
;
42.
}
43.
44.
// wait for cell to close and Grid to rebind when changes have been made
45.
setTimeout(
function
() {
46.
grid.editCell(grid.tbody.find(
"tr:eq("
+ nextCellRow +
") td:eq("
+ nextCellCol +
")"
));
47.
});
48.
}
49.
}
50.
});
51.
52.
})
And i also attached an image of the grid
Thank you.