全局设置 kendo 网格的 NoRecords 设置

Question

我在我的项目中实现了 kendo 网格。如果数据不存在，我想向网格显示 "No Records Available" 消息。我为我的网格将 noRecords 设置为 true，它按预期工作。现在我的项目中有这么多网格，所以我想为所有网格全局设置此设置。

有什么办法可以实现吗？

这是我的示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>
</head>
<body>
  First Grid:
<div id="grid"></div>
  Second Grid:
  <div id="grid1"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  pageable: true,
  noRecords: {
    template: "No data available"
  },
  dataSource: {
    page: 1,
    pageSize: 10
  }
});

  $("#grid1").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  pageable: true,
  dataSource: {
    page: 1,
    pageSize: 10
  }
});
</script>
</body>
</html>

你可以找到一个工作的道场 here。

Answer 1

您好，您可以像这样扩展网格。你可以把它放在一个单独的 js 文件中，并在使用网格之前包含它。

(function ($, kendo) {

var _init = kendo.ui.Grid.fn.init;
var extendedGrid = kendo.ui.Grid.extend({

    init: function (element, options) {           
        var getTemplate = function (textP, iconP) {
            var icon = iconP || 'icon';
            var text = textP || 'No data available';
            var tpl = `<div class="no-records-table"><div class="no-records-table-cell"><div class="grid-no-records-icon ${icon}"></div><div>${text}</div></div></div>`;
            return tpl;
        }

        options = $.extend({                
            noRecords: {
                template: getTemplate(options.noRecordsText, options.noRecordsIcon)
            }
        }, options);

        //call the base constructor.
        _init.call(this, element, options);                
    }               
});
kendo.ui.plugin(extendedGrid);
}(window.kendo.jQuery, window.kendo));

您可以查看 dojo here

全局设置 kendo 网格的 NoRecords 设置

Globally set NoRecords setting for kendo grid

kendo-ui

kendo-grid

kendo-asp.net-mvc