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

Posted 2023-05-07

【中文标题】始终显示在 Kendo 网格中选择的第一行

【英文标题】：Always show first row selected in Kendo grid

【发布时间】：2012-11-06 15:46:02

【问题描述】：

我正在开发一个使用 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 知之甚少）。任何帮助表示赞赏。提前谢谢你。

【参考方案1】：

确实，您可以使用 Grid 和 jQuery 的 dataBound 事件将 k-state-selected 类添加到 Grid tbody 中的第一个 tr 元素。

这是一个例子：

$('#GridName').data().kendoGrid.bind('dataBound',function(e)
    this.element.find('tbody tr:first').addClass('k-state-selected')
)

【讨论】：

但这并不是真正选择它

【参考方案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);

这适用于我的情况。希望对您有所帮助。

【参考方案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

【讨论】：

您能解释一下这段代码是如何工作的吗？仅代码的答案（有时被接受）可以通过添加一些东西来解释它的作用或工作原理来改进。谢谢！

【参考方案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')
    );
);

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