Telerik Kendo Grid with check boxes - it's possible to select only boxes from one page

Question

I have a Kendo Grid with column UniqueId that has Client Template with a check box:

 @(Html.Kendo().Grid<RunSummary>()
          .Name("CheckedPatients")                    
          .DataSource(datasource => datasource                
                .Ajax().PageSize(25)        
                .ServerOperation(false)                                       
                .Sort(sort => sort.Add("TimeOn").Descending())
                .Read(read => read.Action("GetRunSummaries", "PatientReport")))               


          .Columns(columns =>
              {
                  columns.Bound(c => c.UniqueId).Title(ELSORegistry.Resources.Views.Home.HomeStrings.UniqueId)
                      .ClientTemplate("<input type='checkbox'  class='primaryBox' id='#= UniqueId #' value='#= UniqueId #'>#= UniqueId #</input>");                        
                  columns.Bound(c => c.RunNo).Title(SharedStrings.Run);
                  columns.Bound(c => c.Birthdate).Title(SharedStrings.Birthdate).Format("{0:g}").Filterable(true);

                  columns.Bound(c => c.customAge).Title(SharedStrings.Age)
                         .Filterable(
                             filterable => filterable
                                 .UI("AgeFilter")
                                 .Extra(false)
                                 .Operators(operators => operators
                                     .ForString(str => str.Clear().IsEqualTo("Is equal to"))

                                 )

                   );

              columns.Bound(c => c.TimeOn).Title(PatientStrings.DateOn)
                  .Format("{0:g}")
                  .Filterable(true);
              columns.Bound(c => c.TimeOff).Title(PatientStrings.DateOff)
                  .Format("{0:g}")
                  .Filterable(true);
              columns.Bound(c => c.DischargedAlive).Title(PatientStrings.DischargedAlive).Filterable(true);
              columns.Bound(c => c.ShowSubmitted).Title(PatientStrings.Submitted).Filterable(true);
              columns.Bound(c => c.SupportTypeEnum).Title(PatientStrings.SupportType).Filterable(true);//.ClientTemplate("#= SupportType ? 'Yes' : 'No' #");
          }
      )
      .Pageable(p => p.PageSizes(new[] {10, 25, 50, 100}))
      .Sortable()
      .Filterable( )
      .Events( e => e.FilterMenuInit("FilterMenuFuncWithAge") ) // apply x [closing box] on pop up filter box
      )

For example, the client wants to select UniqueIds (by checking the box), and after that,to move to next page and select there, but when he comes back to the previous page, he finds unselected UniqueIds, although he selected them before(he can select UniqueIds only from one page). How to select from multiple pages and to make UniqueIds stay selected? Thank you in advance for any help.

Answer 1

We can make use of click event of the checkbox and the databound event of the grid to track the status of the checkbox across pages

//grid definition
var grid = $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                height: 430,
                //define dataBound event handler
                dataBound: onDataBound,
                toolbar: ["create"],
                columns: [
                    //define template column with checkbox and attach click event handler
                    { field:"Discontinued", template: "<input type='checkbox' class='checkbox' #= Discontinued ? checked='checked' : '' # />",
          headerTemplate: "<input type='checkbox' id='chkSelectAll' onclick='checkAll(this)'/>"
          },
                    "ProductName", {
                        field: "UnitPrice",
                        title: "Unit Price",
                        format: "{0:c}",
                        width: "100px"
                    }, {
                        field: "UnitsInStock",
                        title: "Units In Stock",
                        width: "100px"
                    }, {
                        field: "Discontinued",
                        width: "100px"
                    }, {
                        command: ["edit", "destroy"],
                        title: "&nbsp;",
                        width: "172px"
                    }
                ],
                editable: "inline"
            }).data("kendoGrid");

            //bind click event to the checkbox
            grid.table.on("click", ".checkbox" , selectRow);


        });


    //when check box is clicked
    function selectRow() {
        var checked = this.checked,
            row = $(this).closest("tr"),
            grid = $("#grid").data("kendoGrid"),
            dataItem = grid.dataItem(row);

        checkedIds[dataItem.id] = checked;
        if (checked) {
            //-select the row
            row.addClass("k-state-selected");
        } else {
            //-remove selection
            row.removeClass("k-state-selected");
        }
    }

   //restore previous selected rows:
    function onDataBound(e) {
        var view = this.dataSource.view();
        for(var i = 0; i < view.length;i++){
            if(checkedIds[view[i].id]){
                this.tbody.find("tr[data-uid='" + view[i].uid + "']")
                    .addClass("k-state-selected")
                    .find(".checkbox")
                    .attr("checked","checked");
            }
        }           
    }

 //for select all
 function checkAll(ele) {
    var state = $(ele).is(':checked');
    var grid = $('#grid').data('kendoGrid');
    $.each(grid.dataSource.view(), function () {
       if (this['Discontinued'] != state) 
        this.dirty=true;
       this['Discontinued'] = state;
   });
grid.refresh();

}

Please refer the dojo given below for a working sample http://dojo.telerik.com/ukavA