Question

我有一个Kendo MVC Grid，我希望在选中复选框时使用Javascript或JQuery将SelectionMode从单个更改为多个，并在取消选中复选框时从多个更改为单个。这甚至可能吗？（我也绑定并取消绑定更改事件，这可以按预期工作）。这是我目前尝试更改选择模式但它无法正常工作：

  <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"
    });
}

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

1 个答案: