Kendo Grid Fluent API Child Grid 的 DataBound 事件显示无项目文本？

Question

感觉我已经浪费了很多时间来寻找这个，但仍然没有找到任何有用的东西（嗯，可以正常工作）。我有一组用于满足用户需求的嵌套网格，每个网格都深入到下一个等等，所有这些都工作正常。它是使用客户端模板处理的，客户端模板在扩展时执行 ajax 调用，然后显示数据。

我遇到的问题是，如果其中一个扩展没有结果，Kendo 只会显示 child 网格 header 而没有其他内容。当我连接到 DataBound 事件（在网格上，.Events(e => e.DataBound("myJavaScriptFunctionName")）这不是 Kendo 网格，如果我传递名称child kendo 网格（使用 #=# 中的键是唯一的）它在我的数据源中为我提供了 0 个项目。

我不确定这是不是因为它做了一个 ajax post 返回，然后 OnDataBound 在它返回之前触发了？

我只需要显示一个 "No Items Found" 消息，让用户在没有数据时体验更好（这实际上只发生在最低级别）

废话少说，下面是一些示例代码：

    <script id="SecondToLastTemplate" type="text/kendo-tmpl">                    
        @(Html.Kendo().Grid<CustomerViewModel>()
              .Name("SumGrid_#=ResultYear#_#=ResultQuarter#_#=ResultMonth#_#=ResultWeekStart#_#=ResultDate#_#=Region#")
              .Columns(column =>
              {
                  column.Bound(x => x.CustomerName).Width("23%");                  
                  column.Bound(x => x.CustomerSummaryItem1).Width("14%");
                  column.Bound(x => x.CustomerSummaryItem2).Width("14%");
                  column.Bound(x => x.CustomerSummaryItem3).Width("14%");
              })

              .DataSource(dataBinding => dataBinding
                  .Ajax()
                  .PageSize(500)
                  .Read(read => read.Action("GetCustomerSummaryItems", Constants.Controller_ReportController, new
                  {
                      ResultYear = "#=ResultYear#"
                      ,ResultQuarter = "#=ResultQuarter#"
                      ,ResultMonth = "#=ResultMonth#"
                      ,ResultWeekStart = "#=ResultWeekStart#"
                      ,ResultDate = "#=ResultDate#"
                      ,Region = "#=Region#"                     
                  }))
              )
              .Scrollable(scrolling => scrolling.Enabled(false))
              .Sortable()
              .Filterable(filtering => filtering.Enabled(true))
              .ClientDetailTemplateId("LastTemplate")
              .Pageable(paging => paging.Enabled(false))
              .ToClientTemplate()
              )
</script>

    <script id="LastTemplate" type="text/kendo-tmpl">                    
        @(Html.Kendo().Grid<CustomerDetailsViewModel>()
              .Name("SumGrid_#=ResultYear#_#=ResultQuarter#_#=ResultMonth#_#=ResultWeekStart#_#=ResultDate#_#=Region#_#=CustomerName#")
              .Columns(column =>
              {
                  column.Bound(x => x.CustomerDetails1).Width("23%");
                  column.Bound(x => x.CustomerDetails2).Width("20%");
                  column.Bound(x => x.CustomerDetails3).Width("35%");
                  column.Bound(x => x.CustomerDetails4).Width("14%");
              })

              .DataSource(dataBinding => dataBinding
                  .Ajax()
                  .PageSize(500)
                  .Read(read => read.Action("GetCustomerDetails", Constants.Controller_ReportController, new
                  {
                      ResultYear = "#=ResultYear#"
                      ,ResultQuarter = "#=ResultQuarter#"
                      ,ResultMonth = "#=ResultMonth#"
                      ,ResultWeekStart = "#=ResultWeekStart#"
                      ,ResultDate = "#=ResultDate#"
                      ,Region = "#=Region#"                      
                      ,CustomerName = "#=CustomerName#"                      
                  }))
              )
              .Events(e => e.DataBound("onDataBound"))                 
              .Scrollable(scrolling => scrolling.Enabled(false))
              .Sortable()
              .Filterable(filtering => filtering.Enabled(true))
              .Pageable(paging => paging.Enabled(false))
              .ToClientTemplate()
              )
</script>

OnDataBound 我已经尝试了一些方法，包括这个线程 (Display a message within the Kendo grid when it's empty) 的答案，但没有成功。那个特别总是告诉我我的数据源中有 0 个项目（最初它是未定义的，然后我传递了网格名称但仍然没有运气）。

有没有人有一个很好的方法来在使用带嵌套网格的 Fluent API 时只说 "No Items to display"？我觉得我在这里遗漏了一些简单的东西。

谢谢！

Answer 1

我想出了这些：

由于我使用的是 ajax post 返回，因此当出于某种原因调用 DataBound 事件时，网格项并不总是可用（感觉它们应该是，因为它是DataBound，但它不是)

我将我的无结果查询包装在 500 毫秒的 setTimeout 中以便捕捉它，任何更少的时间我都会回到原来的错误。我还修改了 .find(... 调用以删除 k-grid-header，因为 class 没有在我的网格上输出，并且 colgroup 直接在 table 上的 k-grid 下面.

function DisplayNoResultsFound(e) {
    var self = e;
    setTimeout(function (item) {
        var grid = self;
        var dataSource = grid.data('kendoGrid').dataSource;
        var colCount = grid.find('colgroup > col').length;
        var noResultsMessage = '@Resources.Global.NoResultsFound';

        // If there are no results place an indicator row
        if (dataSource._view.length == 0) {
            grid.find('tbody')
                .append('<tr class="kendo-data-row"><td colspan="' + colCount + '" style="text-align:center"><b>' + noResultsMessage + '</b></td></tr>');
        }
    }, 500); //Need to delay for ajax postback
}

通过传递数据绑定事件中的 jQuery 网格项来调用此代码：

.Events(e => e.DataBound(DisplayNoResultsFound($('\#SumGrid_#=ResultYear#_#=ResultQuarter#_#=ResultMonth#_#=ResultWeekStart#_#=ResultDate#_#=Region#_#=CustomerName#'))")

希望这对以后的其他人有所帮助！

Kendo Grid Fluent API Child Grid 的 DataBound 事件显示无项目文本？

Kendo Grid Fluent API DataBound event for a Child Grid to show No Items text?

kendo-grid

kendo-asp.net-mvc

kendo-template