子网格的 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 回发,然后 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 时,有没有人可以说“没有要显示的项目”的好方法?我觉得我在这里遗漏了一些简单的东西。
谢谢!
【问题讨论】:
【参考方案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,如何处理只读网格?