Kendo ui 全局设置剑道网格的NoRecords设置_Kendo Ui_Kendo Grid_Kendo Asp.net Mvc

Kendo ui 全局设置剑道网格的NoRecords设置

kendo-ui

Kendo ui 全局设置剑道网格的NoRecords设置,kendo-ui,kendo-grid,kendo-asp.net-mvc,Kendo Ui,Kendo Grid,Kendo Asp.net Mvc,我已经在我的项目中实现了剑道网格。如果数据不存在，我想向网格显示“无可用记录”消息。我为我的网格将noRecords设置为true，它按预期工作。现在我的项目中有这么多网格，所以我想为所有网格全局设置此设置有没有办法做到这一点以下是我的示例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kendo UI Snippet</titl

我已经在我的项目中实现了剑道网格。如果数据不存在，我想向网格显示“无可用记录”消息。我为我的网格将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>


剑道UI片段
第一格：
第二个网格：
$（“#网格”）.kendoGrid({
栏目：[
{字段：“名称”}，
{字段：“年龄”}
],
pageable:对，
诺雷科德：{
模板：“无可用数据”
},
数据源：{
页码：1，
页面大小：10
}
});
$（“#grid1”）。肯多格里德({
栏目：[
{字段：“名称”}，
{字段：“年龄”}
],
pageable:对，
数据源：{
页码：1，
页面大小：10
}
});

您可以找到一个工作的dojo。

您好，您可以像这样扩展网格。您可以将其放在单独的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));

（函数（$，剑道）{
var_init=kendo.ui.Grid.fn.init；
var extendedGrid=kendo.ui.Grid.extend({
初始化：函数（元素，选项）{
var getTemplate=函数（textP、iconP）{
var icon=iconP | |“icon”；
var text=textP | |“无可用数据”；
var tpl=`${text}`；
返回第三方物流；
}
选项=$.extend（{
诺雷科德：{
模板：getTemplate（options.noRecordsText，options.noRecordsIcon）
}
}，选项）；
//调用基构造函数。
_初始调用（此、元素、选项）；
}               
});
插件（extendedGrid）；
}（window.kendo.jQuery，window.kendo））；

你可以查一下