用于子网格的Kendo Grid Fluent API DataBound事件显示No Items文本?

时间:2015-01-20 21:03:08

标签: kendo-grid kendo-asp.net-mvc kendo-template

感觉我已经失去了很多时间寻找这个并且仍然没有发现任何有效的东西(好吧,这是正常的)。我有一组用于用户需求的嵌套网格,每个网格都钻到下一个等等,所有这些工作正常。它是使用客户端模板处理的,客户端模板在扩展时执行ajax调用,然后显示数据。

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

我不确定这是不是因为它回复了ajax,然后OnDataBound会在它回来之前触发?

我只需要显示一个"没有找到物品"消息,以便在没有数据时使用户体验更好(这实际上只发生在最低级别)

足够的话,这里有一些示例代码:

    <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个项目(最初是未定义的,然后我传递了网格名称,但仍然没有运气)。

有没有人有一个很好的方式来说'#34;没有要显示的项目&#34;使用嵌套网格的Fluent API时?我觉得我在这里错过了一些简单的东西。

谢谢!

1 个答案:

答案 0 :(得分:1)

我想出了这些:

由于我正在使用ajax帖子,因为某些原因调用DataBound事件时,网格项目始终不可用(感觉它们应该是,因为它是DataBound,但它未获得#39; t)的

我在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
}

通过传递Databound事件中的jQuery网格项来调用此代码:

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

希望将来帮助其他人!