Question

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

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

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

以下是代码快照。

UI：

 @(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;
    }

Answer 1

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

UI：

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

    }
}

如何在实现服务器端分页时获取kendo grid filter multi复选框的所有值

1 个答案: