始终在Kendo网格中显示第一行选定

Question

我正在开发一个mvc4项目，其中使用了Kendo Grid。我希望用户默认选择网格的第一行。由于有很多行，所以我使用分页。当用户转到第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的了解很少）。非常感谢您的帮助。谢谢。

- Giorgos Manoltzas

Answer 1

您可以使用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')
})

- Petur Subev

---

但这并不是真正的选择它。 - CMS

Answer 2

还有一种方法可以实现这个功能

方法一

通过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);
}

这对我的情况有用。希望能帮到你。

- Rohit Tidke

Answer 3

$('#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

- kazem

---

你能解释一下这段代码是如何工作的吗？仅有代码的回答（虽然有时被接受），但加上一些解释它是做什么或者如何工作会更好。谢谢！ - Qantas 94 Heavy

Answer 4

从更新代码后：

$('#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')
    });
});

注意：如果在网格上获取记录时出现问题，请在网格定义之后使用此脚本，而不是在网格定义之前。

- Murat Yıldız