未显示任何结果时在 Kendo MVC 网格中显示一条消息

Question

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

这类似于 this question but I am using Kendo MVC, and as Telerik's help 报告："NoRecordsTemplate is not available in Kendo UI Grid for ASP.NET MVC"

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

Answer 1

我正在检查 Kendo 网格返回的行数和 add/removing 将显示 "No records" 消息的 class。

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>

Answer 2

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

我使用了我安装的 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>

这是输出：

Answer 3

以防万一需要帮助的人在使用旧版本时遇到困难，就像我一样，使用的是 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);
    }
}

Answer 4

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

版本

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

Answer 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"

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

未显示任何结果时在 Kendo MVC 网格中显示一条消息

Display a message in Kendo MVC grid when no results are displayed

telerik

kendo-asp.net-mvc

JavaScript:

CSS: