带有复选框的 Telerik Kendo Grid - 可以从一页中仅选择框

Question

我有一个带有 UniqueId 列的 Kendo Grid，其中包含带有复选框的客户端模板：

 @(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
      )

例如，客户想要选择UniqueIds（通过选中该框），然后移动到下一页并在那里选择，但是当他回到上一页时，他发现未选择的UniqueIds，虽然他选择了他们之前（他只能从一页中选择 UniqueIds）。如何从多个页面中选择并使 UniqueIds 保持选中状态？提前感谢您的帮助。

Answer 1

我们可以利用checkbox的click事件和grid的databound事件来跨页面跟踪checkbox的状态

//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();

}

请参阅下面给出的道场以获取工作示例 http://dojo.telerik.com/ukavA