在网格上分页时如何保持当前复选框状态

Question

I have Kendo grid with loaded data. Each column got checkbox where the user can select and download. Now the problem is if i check few rows on Page 1 and then move to Page 2 to select. When i goes back to page 1,all the selected checkbox will be unchecked.

I have also tried this Make Selection with Checkbox Column and also Example

How can i keep the checkbox state when paging ?

I have tried this with no luck,

Kendo

 <fieldset class="fieldsetStyle" id="form">
     <div class="box-body">
         <div id="divMain" class="col-md-13">
              <div class="form-group">
            @(Html.Kendo().Grid<myModel>()

.Name("Grid")
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
    <button class="btn btn-primary" id="showSelection1" 
            onclick="goToFunctionController()" name="submit" type="submit">Download Selected 
            Orders</button>
    </div>
</text>);
})
.Columns(columns =>
{
columns.Bound(x => x.ordernumber).Title("Order Number");
            columns.Bound(x => x.ordernumber).Template(@<text>
</text>).ClientTemplate("<input id='chkId' name'chkbox' type='checkbox' 
class='checkbox' onClick='' />").Title("")
                .Filterable(false).Sortable(false);

})
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.Events(e => e.DataBound(@<text>function(e) {onDataBound()}</text>))

                  .Resizable(resize => resize.Columns(true))
                  .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(10)
                  .ServerOperation(false) //No post back
                  .Read(read => read.Action("ReadPoss", "ConsolidatedPOSS"))))
        </div>
    </div>
</div>

Javascript

  function onDataBound() {
  alert("Inside onDataBound !!!!");
  var  grid = $("#Grid").data("kendoGrid")
  var  datasource = grid.dataSource.view();

    for (var i = 0; i < datasource.length; i++) {
        if (SeletectOrders[datasource[i].ordernumber]) {
            this.tbody.find("tr[data-uid='" + datasource[i].uid + "']")
            .addClass("k-state-selected")
            .find(".checkbox")
            .attr("checked", "checked"); 
        }
    }
}

Model

public class myModel
{
  public string ordernumber { get; set; }
  public bool IsSelected { get; set; }
}

Answer 1

What you have to do is store the check once it is selected into the griddata, kind of like a sessionstorage. OK here you go:

https://dojo.telerik.com/abEYO/2

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ID" },
    { field: "Checkbox", type: "boolean", template: '<input type="checkbox" style="margin-left: 4px;" class="checkone" />', editable: "false"},
    { field: "RollUp" },
    { field: "age" }
  ],
  editable: false,
  pageable: {
    input: true,
    numeric: false,
    refresh: true,
    pageSizes: [ 5, 10, 20, "all"],
    pageSize: 5,
  },
  dataSource: [
      { ID: "1", Checkbox: "false", RollUp: "Jane Doe", age: 30 },
      { ID: "2", Checkbox: "false", RollUp: "John Doe", age: 33 },
      { ID: "3", Checkbox: "false", RollUp: "Jane Doe", age: 30 },
      { ID: "4", Checkbox: "false", RollUp: "John Doe", age: 33 },
      { ID: "5", Checkbox: "false", RollUp: "Jane Doe", age: 30 },
      { ID: "6", Checkbox: "false", RollUp: "John Doe", age: 33 },
      { ID: "7", Checkbox: "false", RollUp: "Jane Doe", age: 30 },
      { ID: "8", Checkbox: "false", RollUp: "John Doe", age: 33 },
  ],
  dataBound: function (e) {
    var gridDataView = $("#grid").data().kendoGrid.dataSource.view();
    for (var i = 0; i < gridDataView.length; i++) {
      var panelApplicationId = gridDataView[i].Checkbox;
      if (ShouldBeChecked(panelApplicationId)) {
        $('#grid tr td input').eq(i).prop("checked", true);
      }
    }
  }
});

$(document).on('click', 'input.checkone', function (e) {
    var checked = $(this).prop("checked");
    var gridDataView = $("#grid").data().kendoGrid.dataSource.view();
    console.log(gridDataView);
    var idx = $(this).closest("tr").find("td:nth-child(1)").text();
    var gridData = $("#grid").data().kendoGrid.dataSource.data();
    for(var i = 0; i < gridData.length; i++) {
      if (gridData[i].ID == idx) {
        gridData[i].Checkbox = checked;
        break;
      }
    }
});

  function ShouldBeChecked(panelApplicationId) {
    var shouldBeChecked = false;
    var gridData = $("#grid").data().kendoGrid.dataSource.data();
    for (var i = 0; i < gridData.length; i++) {
      if (gridData[i].Checkbox == panelApplicationId) {
        if (gridData[i].Checkbox) {
          shouldBeChecked = true;
        }
        break;
      }
    }
    return shouldBeChecked;
  }

Let me know if you have any questions.