我目前有一个分层的Kendo网格,我可以批量编辑一些详细列。我已经激活了自动同步,所以我只需要失去我编辑的单元格的焦点或按下回车键,它就会自动保存。
到目前为止这是有效的,但现在我需要的是,当用户在单元格中按下回车键时,焦点变为下一行,同一列。
我用自己的话来表述我的情况。我有一辆车的列表。我可以展开这些行,以便查看所选汽车的预订清单。在一定时间后,用户将输入每个预订后的车辆里程数。假设该车辆有10个预订。当用户输入第一个里程数据然后按下回车键时,焦点将切换到下一行,他可以输入下一个里程数。对于这10个预订,依此类推。我真的不知道如何实现这一点,我想我应该寻求帮助。
这是我的相关代码。
主网格:
<div class="col-md-12">
@(Html.Kendo().Grid<ParcAutoMvc.ViewModels.VehiculeViewModel>()
.Name("gridListeVehicule")
.Events(e => e.DataBound("onDataBoundVehiculeReservation"))
.Columns(columns =>
{
columns.Bound(c => c.VehiculeID);
columns.Bound(c => c.Description);
columns.Bound(c => c.Marque.Description);
columns.Bound(c => c.Modele.Description);
columns.Bound(c => c.Annee);
})
.Groupable()
.NoRecords(e => e.Template("<div style='padding:30px 0;'><i>Aucun enregistrement à afficher</i></div>"))
.Pageable(e => e.Messages(mes => mes.Empty("Aucun enregistrement à afficher")))
.Sortable()
.ClientDetailTemplateId("client-template")
.AutoBind(false)
.Scrollable(s => s.Enabled(false))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(25)
.Read(read => read.Action("ListeVehiculeReservation", "Operation").Data("FiltreVehiculeReservation"))
)
.HtmlAttributes(new { @class = "small" })
)
</div>
详细网格:
<script id="client-template" type="text/x-kendo-template">
@(Html.Kendo().Grid<ParcAutoMvc.ViewModels.ReservationViewModel>()
.Name("grid_#=VehiculeID#") // make sure the Name is unique
.Events(e => e.DataBound("onDataBoundReservation").Edit("onEditReservation").Save("onSaveReservation"))
.Columns(columns =>
{
columns.Bound(c => c.Depart);
columns.Bound(c => c.Arrivee);
columns.Bound(c => c.Ville);
columns.Bound(c => c.Endroit);
columns.Bound(c => c.ReservePour);
columns.Bound(c => c.KMDepart).ClientTemplate("\\#=Statut == 0 ? 'Annulée' : KMDepart == -1 ? '' : KMDepart\\#");
columns.Bound(c => c.KMArrivee).ClientTemplate("\\#=Statut == 0 ? 'Annulée' : KMArrivee == -1 ? '' : KMArrivee\\#");
})
.Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode
.DataSource(dataSource =>
// Load reservations
dataSource.Ajax()
.Model(model =>
{
model.Id(r => r.Id);
model.Field(r => r.KMArrivee);
model.Field(r => r.KMDepart);
model.Field(r => r.Endroit).Editable(false);
model.Field(r => r.Depart).Editable(false);
model.Field(r => r.Arrivee).Editable(false);
model.Field(r => r.Ville).Editable(false);
model.Field(r => r.ReservePour).Editable(false);
model.Field(r => r.Id).Editable(false);
})
.Batch(true)
.AutoSync(true)
.Update(update => update.Action(actionName: "Grille_Modifier", controllerName: "Operation"))
.Read(read => read.Action("ListeReservation", "Operation").Data("FiltreReservation(#=VehiculeID#)"))
)
.Pageable(e => e.Messages(mes => mes.Empty("Aucun enregistrement à afficher")))
.ToClientTemplate()
)
</script>
我脑海中的头脑里,这是与我的问题相关的代码。我知道我可能需要使用JavaScript来设置焦点,但我无法想出如何做到。我设法得到了下一行的UID,但我不知道该怎么做,甚至不知道它是否对我想要做的有用。
function onSaveReservation(e) {
var uid = e.model.uid;
var idx = $(e.container).index();
var sender = e.sender;
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
if (dataView[i].uid == uid) {
var vehiculeID = dataView[i].VehiculeID
if (dataView[i + 1] != null)
{
var nextUid = dataView[i + 1].uid;
}
}
}
}
如果有人能帮我解决问题,我将非常感激。如果我的意图不够清晰,请告诉我。英语并不是我的母语。如果您需要任何样本代码,请随时提出要求。