Telerik Кендо Сетка с флажками - это можно выбрать только коробки с одной страницы

Question

У меня есть Кендо Сетка с колонкой UniqueID, который имеет клиента шаблон с флажком:

@(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 (установив флажок), а затем перейдите на следующую страницу и выберите там, но когда он вернется на предыдущую страницу, он найдет unselected UniqueIds, хотя он выбрал их раньше (он может выбрать UniqueIds только с одного страница). Как выбрать из нескольких страниц и выбрать UniqueIds? Спасибо заранее за любую помощь.

Answer 1

Мы можем использовать событие нажатия на флажке и DataBound события сетки для отслеживания состояния чекбокса через страницу

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