Kendo MVC grid set selection mode programmatically

Question

I have a Kendo MVC Grid, I want to change the SelectionMode from single to multiple with Javascript or JQuery upon checking the checkbox,and back from multiple to single when unchecking the checkbox. Is this even possible? (I am also binding and unbinding the change event, this works as expected). This is what I currently have tried for changing selection modes but it is not working :

  <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>

I have also made a Kendo UI dojo to try and achieve the desired effect, you can find it here : Kendo UI set grid selection mode

Can anybody shed some light on this? Thanks in advance!

Answer 1

You can accomplish this using the setOptions method, like this:

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