我正在尝试使用MVC5将数据填充到kendo数据网格。虽然,我已正确引用javascript文件,但我收到错误消息jQuery.Deferred异常:未定义Kendo ReferenceError:未定义Kendo。
当我在控制台窗口中看到时,错误出现在以下行
var carsDataSource = new Kendo.Data.DataSource({ data: cars });
请参阅以下代码
布局图中的头部
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
<link href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css" rel="stylesheet" />
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.web.min.js"></script>
@*<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>*@
</head>
DataGridController
public class DataGridController : Controller
{
// GET: DataGrid
public ActionResult Index()
{
return View();
}
}
的index.html
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id="cars"></div>
<script>
$(document).ready(function () {
var cars = [
{ year: 2012, make: "Ferrari", model: "California" },
{ year: 2013, make: "Ferrari", model: "458 Italia" },
{ year: 2014, make: "Lambhorhini", model: "California" },
{ year: 2015, make: "Porche", model: "California" },
{ year: 2015, make: "Audi", model: "A7" },
{ year: 2016, make: "Mercedez", model: "E350" },
{ year: 2016, make: "Nisan", model: "California" },
{ year: 2015, make: "Ford", model: "California" },
{ year: 2014, make: "Jaguar", model: "California" },
{ year: 2015, make: "McLaren", model: "California" },
{ year: 2013, make: "Ferrari", model: "California" },
{ year: 2011, make: "Mercedez", model: "C200" },
{ year: 2017, make: "Mercedez", model: "GLA" },
];
var carsDataSource = new Kendo.Data.DataSource({ data: cars });
carsDataSource.read();
$("#cars").kendoGrid({ dataSource: carsDataSource });
});
</script>
答案 0 :(得分:2)
以下是剑道网格所需的最低配置
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
除非将网格自动绑定设置为false,否则不需要启动read()函数。请查看此文档read method of kendo grid
这是您的代码的实时版本。
此处的Dojo示例working dojo sample
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script></head>
<body>
<div id="cars"></div>
<script>
$(document).ready(function () {
var carsList = [
{ year: 2012, make: "Ferrari", model: "California" },
{ year: 2013, make: "Ferrari", model: "458 Italia" },
{ year: 2014, make: "Lambhorhini", model: "California" },
{ year: 2015, make: "Porche", model: "California" },
{ year: 2015, make: "Audi", model: "A7" },
{ year: 2016, make: "Mercedez", model: "E350" },
{ year: 2016, make: "Nisan", model: "California" },
{ year: 2015, make: "Ford", model: "California" },
{ year: 2014, make: "Jaguar", model: "California" },
{ year: 2015, make: "McLaren", model: "California" },
{ year: 2013, make: "Ferrari", model: "California" },
{ year: 2011, make: "Mercedez", model: "C200" },
{ year: 2017, make: "Mercedez", model: "GLA" },
];
var carsDataSource = new kendo.data.DataSource({data: carsList});
carsDataSource.read();
$("#cars").kendoGrid({ dataSource: carsDataSource });
});
</script>