实现服务器端分页时如何获取剑道网格过滤器多复选框的所有值答案

【问题标题】：How to get all values for kendo grid filter multi checkbox when implement server side paging实现服务器端分页时如何获取剑道网格过滤器多复选框的所有值
【发布时间】：2016-08-03 18:05:50
【问题描述】：

我有一个剑道网格，其中一列（“状态”列）设置为过滤器多复选框。在中间层，我调用一个 api 按给定的页面大小和页面获取数据，通过这种方式实现服务器端分页。

但问题是过滤器多复选框仅包含在一页中的值。例如，该 api 一次最多可以返回 1000 条记录，filter multi 复选框只显示这 1000 条记录中的项目。假设总共有 20000 个，并且有 3 种不同的状态 - “延迟”、“待处理”、“已处理”。前 1000 条记录只有“延迟”状态。然后在网格上，过滤器多复选框仅显示一个状态选项-“延迟”。

如何显示所有这 3 种状态？也许我可以创建另一个 api 来返回所有状态，但是如何修改数据源使其显示所有状态？

以下是代码快照。

用户界面：

 @(Html.Kendo().Grid<ExceptionsPerGroup>()
              .Name("gridBatchDetail")
              .Columns(columns =>
              {
                  columns
                      .Bound(p => p.SnapshotHeader_Account_AccountNumber)
                      .Filterable(pfs => pfs.Extra(false))
                      .Title("LOAN NUMBER");
                  columns
                      .Bound(p => p.Borrower_BorrowerName_FullNameToBeParsed)
                      .Filterable(pfs => pfs.Extra(false))
                      .Title("BORROWER NAME");
                  columns
                      .Bound(p => p.PaymentHeader_ReportedPaymentAmount)
                      .Title("PAYMENT AMOUNT").Format("{0:C}");
                  columns
                      .Bound(p => p.CurrentStatus_PaymentStatus)
                      .Filterable(fs => fs.Multi(true))
                      .Title("STATUS");
                  columns
                      .Bound(p => p.CurrentExceptionTypeCode)
                      .Filterable(fs => fs.Multi(true))
                      .Title("EXCEPTION REASON");
                  columns
                      .Bound(p => p.CurrentStatus_CurrentAssignee)
                      .Filterable(pfs => pfs.Multi(true))
                      .Title("ASSIGNED TO");
              })
              .Pageable()
              .Sortable()
              .Filterable(pfs => pfs
                            .Operators(o => o.ForString(s => s.Clear()
                                .Contains("Contains")
                                )))
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .ServerOperation(true)
                  .PageSize(20)
                  .Read(read => read.Action("GetPaymentsList", "FileSummary").Data("getURLString"))
              )
              .ClientDetailTemplateId("batchDetailsTemplate")
            )

控制器：

public JsonResult GetPaymentsList([DataSourceRequest]DataSourceRequest request, string uri)
    {
        try
        {
            var myUri = new Uri(uri);
            var fileKeyString = HttpUtility.ParseQueryString(myUri.Query).Get("fileKey");
            var batchKeyString = HttpUtility.ParseQueryString(myUri.Query).Get("batchKey");

            Guid? fileKey = new Guid(fileKeyString);
            Guid? batchKey = new Guid(batchKeyString);

            var fileBatchPaymentTransactionsResponse = ApiHelper.GetBatchDetailByFileKeyAndBatchKey(fileKey, batchKey, request.PageSize, request.Page, request);
            List<ExceptionsPerGroup> listOfPayments = null;
            if (fileBatchPaymentTransactionsResponse.ListResults != null)
            {
                listOfPayments = DataMapper.MapperPaymentTransactionDataToExceptionsPerGroupsModel(fileBatchPaymentTransactionsResponse.ListResults);
            }

            var result = new DataSourceResult()
            {
                Data = listOfPayments,
                Total = (int)fileBatchPaymentTransactionsResponse.TotalRecords
            };

            return Json(result);
        }
        catch (Exception ex)
        {
            logger.LogMessage("FileSummary/GetPaymentsList", EnumLogLevel.Severe, "EXCEPTION:", ex);
        }
        return null;
    }

【问题讨论】：

标签： kendo-ui grid

【解决方案1】：

我通过添加一个 FilerMenuInit 事件处理程序来解决这个问题，在这个处理程序中，ajax 调用一个方法来检索所有状态值。

用户界面：

@(Html.Kendo().Grid<ExceptionsPerGroup>()
              .Name("gridBatchDetail")
              .Events(e=>e.FilterMenuInit("InitFilterMenu"))//add this event
              .Columns(columns =>
....
<script type="text/javascript">
function InitFilterMenu(e) {
    if (e.field === "CurrentStatus_PaymentStatus") {
        var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck");

        var url = '@Url.Action("GetStatusListForGrid", "FileSummary")';
        $.getJSON(url, {  }, function (result, status, xhr) {

            filterMultiCheck.container.empty();               
            filterMultiCheck.checkSource.data(result);
            filterMultiCheck.createCheckBoxes();
        });

    }
}

【讨论】：