Question

我们正在使用Kendo Grid(Asp.Net Mvc)用户任务表。用户将选择最多10个任务并使用位于网格底部的按钮开始操作。我们必须限制行的最大选择。我们设置了GridSelectionMode.Multiple可选模式。

    @(Html.Kendo().Grid<TaskModel>()
    .Name("TaskModelGrid")
    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
    .Columns(columns =>
    {
        columns.Bound(c => c.TaskName);
        ...
    })
    .HtmlAttributes(new { style = "height: 550px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetUsersTask", "TaskController"))
        .PageSize(20)
    )
)

我们可以使用任何设置或方法吗？我们检查了文档但找不到任何内容。任何想法都将不胜感激。谢谢你的帮助。

Answer 1

我打赌你可以通过对电网变化事件的计数检查来做到这一点：

....

.Events(e=> e.Change("onGridRowChange"))

...
function onGridRowChange()
{
    var grid = $('#grdMyGrid').data('kendoGrid');
    var selectedRows = grid.select();
    console.log(selectedRows.length);
}

Answer 2

Kendo没有对最大选定行的开箱即用支持。使用Change事件捕获所选行的数组并取消选择额外的行。基本工作代码如下所示，用户最多可以选择10行

.cshtml

.Events(e=> e.Change("onRowChange"))

function onRowChange(e)
{
    /* get all the selected rows */
    var items = e.sender.select();
    items.each(function(i, e) {
      /* allows user to select 10 rows max */
      if (i > 9) {
        $(e).removeClass("k-state-selected");
      }
    });
}

查看演示fiddle。

Kendo Grid多选最大行数

2 个答案:

.cshtml