我正在开发一个使用Kendo Grid的mvc4项目。我希望用户看到默认选中的网格的第一行。我有很多行,所以我使用分页。当用户转到第2,3页,... 40等我还想看到每个页面的第一行被选中。下面是我创建网格的代码
<%: Html.Kendo().Grid(Model)
.Name("AuthorisationsGrid")
.Columns(columns =>
{
columns.Bound(p => p.Mis).Title("MIS").Width(80);
columns.Bound(p => p.AuthorisationSerialNumber).Title("ΑΑ Προέγκρισης");
})
.Pageable()
.Sortable()
.Filterable()
.Selectable(s => s.Mode(GridSelectionMode.Single))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Model(model => model.Id(p => p.AuthorisationSerialNumber))
.Model(model => model.Field(p => p.Mis))
.Batch(true)
.Read(read => read.Action("AuthorisationsPartial", "UserFilesDashboard")))%>
我怎样才能实现上述行为?也许jQuery可能有用(但我对jQuery知之甚少)。任何帮助赞赏。提前谢谢。
答案 0 :(得分:4)
实际上,您可以使用Grid的dataBound事件和jQuery将 k-state-selected 类添加到Grid的tbody中的第一个tr元素。
这是一个例子:
$('#GridName').data().kendoGrid.bind('dataBound',function(e){
this.element.find('tbody tr:first').addClass('k-state-selected')
})
答案 1 :(得分:3)
它也可以用另一种方式做到这一点
通过
将网格绑定到onDataBound
事件
<div data-bind="source: mydataSource, events: {
dataBound: onDataBound
}" >
用于MVVM或通过
("#gridName").data("kendoGrid").dataBound(..) (not exact)
内
databound: function() {
var uid = data[0].uid;
var row = roomGrid.table.find('tr[data-uid="' + uid + '"]');
roomGrid.select(row);
}
这适用于我的情况。希望它有所帮助。
答案 2 :(得分:0)
$('#gridName').data().kendoGrid.bind('dataBound', function (e) {
this.select("tr:eq(1)");
//this.element.find('tbody tr:first').addClass('k-state-selected');
})
有关详细信息,请参阅以下链接 http://docs.kendoui.com/api/web/grid#methods-select
答案 3 :(得分:0)
更新代码后:
$('#GridName').data().kendoGrid.bind('dataBound',function(e){...
到:
$('#GridName').data("kendoGrid").bind('dataBound', function (e) {...
现在它已修复,下面的最终代码正常工作:
$(function () {
$('#GridMaster').data("kendoGrid").bind('dataBound', function (e) {
this.element.find('tbody tr:first').addClass('k-state-selected')
});
});
注意:如果在网格上获取记录时出现问题,请在网格定义之后而不是网格定义之前使用此脚本。