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

我们可以利用复选框的点击事件和网格的数据绑定事件来跟踪页面内复选框的状态

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

}

请参考下面给出的dojo作为工作样本 http://dojo.telerik.com/ukavA

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

1 个答案: