当没有显示结果时，在Kendo MVC网格中显示消息

Question

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

这与this question类似，但我使用的是Kendo MVC，并且Telerik's help报告：“在Windows MVC的Kendo UI Grid中无法使用NoRecordsTemplate”

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

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

这是输出：

Answer 2

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

的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 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

如果您的网格是可分页的，则替代解决方案是这样做：

.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（）将消息放置在表主体内部时，此方法将其放置在表页脚的右侧。

Answer 5

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

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