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

Posted

技术标签:

【中文标题】子网格的 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#'))")

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

【讨论】:

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

以上是关于子网格的 Kendo Grid Fluent API DataBound 事件以显示无项目文本?的主要内容,如果未能解决你的问题,请参考以下文章

Kendo grid getKendoGrid无法使用扩展的kendo网格

更新 ViewModel 时如何防止 Kendo UI Grid 多次重新绑定

在 Kendo Grid 的外部网格行中显示详细网格行的总和

Kendo Grid hasChanges,如何处理只读网格?

Telerik/ Kendo MVC Grid,按需加载网格,而不是页面加载

如何根据 Kendo-Angular2-grid 中的数据自动调整网格列的大小?