子网格的 Kendo Grid Fluent API DataBound 事件以显示无项目文本？

Posted 2023-05-07

【中文标题】子网格的 Kendo Grid Fluent API DataBound 事件以显示无项目文本？

【英文标题】：Kendo Grid Fluent API DataBound event for a Child Grid to show No Items text?

【发布时间】：2015-03-19 06:08:51

【问题描述】：

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

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

我不确定这是否是因为它执行 ajax 回发，然后 OnD​​ataBound 在它返回之前触发？

我只需要在没有数据时显示“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 时，有没有人可以说“没有要显示的项目”的好方法？我觉得我在这里遗漏了一些简单的东西。

谢谢！

【参考方案1】：

我想通了：

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

我将我的无结果查询包装在 500 毫秒的 setTimeout 中，以便捕获它，只要少一点，我就会回到原来的错误。我还修改了 .find(... 调用以删除 k-grid-header，因为该类没有在我的网格上输出，并且 colgroup 直接位于桌子上的 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#'))")

希望这对将来的其他人有所帮助！

【讨论】：

它确实帮助了我.. 一年后:)