未显示结果时在 Kendo MVC 网格中显示消息答案

【问题标题】：Display a message in Kendo MVC grid when no results are displayed未显示结果时在 Kendo MVC 网格中显示消息
【发布时间】：2017-01-31 14:18:54
【问题描述】：

我需要在主 Kendo 网格区域显示友好的错误消息，而不是显示空白内容区域。

这类似于this question，但我使用的是 Kendo MVC，正如Telerik's help 报告的那样：“NoRecordsTemplate 在用于 ASP.NET MVC 的 Kendo UI Grid 中不可用”

我正在提供我想出的解决方案作为答案（类似于另一个问题）。我对解决方案不太满意，因为很难自定义错误消息。

【问题讨论】：

标签： telerik kendo-asp.net-mvc

【解决方案1】：

根据要求，这是工作示例：

我使用了已安装的最旧版本的 Kendo（2015.2.902，但我也使用 2016.3.914）并简单地从安装文件夹中的示例解决方案中修改了 Filter Row 示例（C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q2 2015\wrappers\aspnetmvc\Examples\VS2015)。

我修改了文件：

C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q2 2015\wrappers\aspnetmvc\Examples\VS2015\Kendo.Mvc.Examples\Areas\razor\Views\grid\filter_row.cshtml

然后将 .NoRecords() 添加到网格和 <style> 块的剃须刀中：

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(p => p.OrderID).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(220);
    columns.Bound(p => p.ShipName).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
    columns.Bound(p => p.Freight).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));
    columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .ServerOperation(true)
    .Read(read => read.Action("Orders_Read", "Grid"))
 )
 .NoRecords(x => x.Template("<div class='empty-grid'></div>"))
)

<style>
.empty-grid::before {
    padding: 1em;
    line-height: 3em;
    content: "No records found.";
}
</style>

这是输出：

【讨论】：

我不知道为什么 .Norecords() 配置仍然没有显着地显示在 Telerik 数据网格绑定文档上。太感谢了！ docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/…

【解决方案2】：

以防万一需要帮助的人在使用旧版本时遇到问题，就像我一样，使用版本 2013.2.918.340，我会这样做：

.Events(e => e.DataBound("onDataBound"))

javascript：

function onDataBound(e) {
    if (!e.sender.dataSource.view().length) {
        var colspan = e.sender.thead.find("th:visible").length, emptyRow = '<tr><td colspan="' + colspan + '">No Records Found</td></tr>';
        e.sender.tbody.parent().width(e.sender.thead.width()).end().html(emptyRow);
    }
}

【讨论】：

这个答案完美解决了我的问题。对此投票。

【解决方案3】：

我正在检查 Kendo 网格中返回的行数，并添加/删除将显示“无记录”消息的类。

JavaScript：

function noRecordsMessage(gridElement) {
    // Purpose: Call this function on dataBound event to hide/display a "No records" message
    // Argument: the HTML element for the grid

    var ds = gridElement.data("kendoGrid").dataSource;

    if (ds.total() === 0) {
        // No records
        grid.find(".k-grid-content").addClass("empty-grid");
    } else {
        grid.find(".k-grid-content").removeClass("empty-grid");
    }
}

CSS：

<style>
    .empty-grid::before {
        padding: 1em;
        line-height: 3em;
        content: "No records found.";
    }
</style>

【讨论】：

仅供参考，MVC .NoRecords() 配置现在确实显示在网格主体中。它支持 NoRecords() 以显示具有默认样式的默认消息， NoRecords(string) 用于具有默认样式的自定义消息，以及 NoRecords(GridNoRecordsSettingsBuilder) 以使用您想要的任何内容设置模板。我不知道它是在哪个版本中引入的，但它肯定在 2016.3.914 中有效。

【解决方案4】：

在最新版本的 Telerik 控件中，您只需在 .NoRecords() 辅助函数中放置一个字符串。我目前使用的是 2017.2.621 版本

@(Html.Kendo().Grid<YourModel>()
.Name("grid")
.NoRecords("No Records Found.")

【讨论】：

【解决方案5】：

如果您的网格是可分页的，另一种解决方案是这样做：

.Pageable(pageable => pageable
    .Info(true)
    .Messages(msg => msg
        .Empty("There are no data")              // Default: "No items to display"
        .Display("{0} - {1} of {2} elements"))   // Default: "{0}-{1} of {2} items"

如果您的表格包含任何数据，将显示显示消息，否则将显示空消息。 noRecords() 将消息定位在表格主体内，而此方法将消息定位在表格页脚的右侧。

【讨论】：