javascript - Kendo MVC 网格集选择模式以编程方式

Question

我有一个 Kendo MVC 网格，我想在选中复选框时使用 Javascript 或 JQuery 将 SelectionMode 从单个更改为多个，并在取消选中复选框时从多个更改回单个。这可能吗？ (我还绑定(bind)和取消绑定(bind)更改事件，这按预期工作)。这是我目前尝试更改选择模式的方法，但它不起作用:

  <div class="col-md-5 col-sm-5" style="background-color: #52666f;">
            <h2 style="color:#fff;font-size:18px;margin-top:10px;margin-left:13px;">MultiSelect Products</h2>
            @(Html.Kendo().CheckBox()
                    .HtmlAttributes(new { style = "" })
            .Name("MultiSelect")
            )
        </div>


    <div class="col-md-12 col-sm-12">
        <h2 style="color:#fff;font-size:18px;margin-top:10px;margin:auto;width:100%;text-align:center;">Select Product</h2>
        @(Html.Kendo().Grid<ManufacturerProduct>()
            .Name("grdMainManufacturerProducts")
            .AutoBind(false)
            .Columns(columns =>
            {
                columns.Bound(manpr => manpr.Name).Width(150);
                columns.Bound(manpr => manpr.GenericStyle).Width(150);
                              })
            .HtmlAttributes(new { style = "height: 420px;" })
            .Selectable(selectable => selectable
                .Mode(GridSelectionMode.Single)
                .Type(GridSelectionType.Row))
            .Scrollable()
            .Sortable()
            .Filterable(filterable => filterable
                        .Extra(false)
                        .Operators(operators => operators
                             .ForString(str => str.Clear()
                             .Contains("Contains")
                                  ))
                            )
            .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
            .Events(events => events.Change("onChangeMainManProduct"))
            .Filterable(filterable => filterable
                            .Enabled(true))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Id(manpr => manpr.Id); 
                 })
                .Read(read => read
                                      .Url(Url.Content("~/json/ManufacturerProductsController/ManufacturerProduct_ReadMainProduct"))
                              .Data("additionalDataForReadManProducts"))
            )
        )
    </div>

 <script>    
  $(function () {
   $('#MultiSelect').change(function () {
       var checked = $(this).is(':checked');
       onChangeMultiSelect(checked);
   });
});

  function onChangeMultiSelect(checked) {
    var grid = $("#grdMainManufacturerProducts").data("kendoGrid");

    if (checked == true) {
      //alert("Checked!");
        grid.selectable = 'Multiple';
        grid.select.setMode('Multiple');
        ('#grdMainManufacturerProducts).data("kendoGrid").unbind('change');
    }
    else {
      //alert("UnChecked!");
        grid.bind("change", kendoGridWithCheckboxSelectionOnChange);
        grid.selectable = 'Single';
        grid.select.setMode('Single');


    }
}

  function kendoGridWithCheckboxSelectionOnChange() {
    alert("Change reactivated");
  }
</script>

我还制作了一个 Kendo UI dojo 来尝试达到预期的效果，你可以在这里找到它: Kendo UI set grid selection mode

有人可以解释一下吗？提前致谢!

Answer 1

您可以使用 setOptions 方法来完成此操作，如下所示:

if (checked == true) {
    //alert("Checked!");
    grid.setOptions({
        selectable: "multiple"
    });
    ('#grid').data("kendoGrid").unbind('change');
} else {
    //alert("UnChecked!");
    grid.bind("change", kendoGridWithCheckboxSelectionOnChange);
    grid.setOptions({
        selectable: "single"
    });
}