如何在视图上显示带有虚拟数据的剑道握把答案

【问题标题】：How to display Kendo grip with dummy data on the view如何在视图上显示带有虚拟数据的剑道握把
【发布时间】：2016-11-21 13:39:49
【问题描述】：

我对剑道很陌生，并且仍在努力学习它。我想在表单上显示我的网格，但它没有显示。页面只改变颜色。我想要的只是出现在表单上的网格，然后我稍后将绑定来自我的模型的数据。但现在我创建了对象数组来将数据传递给表单。不确定我是否必须安装一些东西或添加更多参考。

这是我到目前为止所做的，

我的观点

 <fieldset class="fieldsetStyle">
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h2 class="box-title">Reports</h2>
                </div>
                <br />
                <form role="form">
                    <div class="box-body">
                        <div id="grid"> //my grid

                        </div>
                       </div>
                    <div class="box-footer">
                        <button type="button" id="btnSave" class="btn btn-primary">Save</button>
                    </div>


                </form>
            </div>
        </div>
    </fieldset>

Javascript

 @section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(document).ready(function () {

        $(function ()
        {
            //array objects which will add the data to the table
            var People = [{ firstName: "Enos", lastName: "Es" }, { firstName: "Ray", lastName: "Rs" },
                            { firstName: "Justice", lastName: "Js" }, { firstName: "RR", lastName: "ESW" },
                            { firstName: "Gop", lastName: "Gp" }, { firstName: "DS", lastName: "JN" },
                            { firstName: "Raven", lastName: "Rv" }, { firstName: "FD", lastName: "FDGH" },
                            { firstName: "Andrew", lastName: "Ar" }, { firstName: "DDD", lastName: "GFG" },
                            { firstName: "Shayne", lastName: "S" }, { firstName: "YYY", lastName: "GHFGH" },
                            { firstName: "Walter", lastName: "W" }, { firstName: "EEE", lastName: "LUIO" },
                            { firstName: "ZKZG", lastName: "RD" }, { firstName: "JJJ", lastName: "FGJHGH" }
              ]
            //creating my grid and defining the column headers
            $("#grid").kendoGrid({
                columns: [
                    { title: "First Name", field: firstName },
                    { title: "Last Name", field: lastName }],

                //now am specifying the data or binding the data to the datasource
                dataSource: {
                    data: People,
                    pageSize: 10
                },
                height: 400,
                scrollable: true,
                pagebale: true,
                sortable: {mode: "multiple"}
            }

        });

    });
</script>

}

样式表

   <link href="~/Content/Kendo/styles/examples-offline.css" rel="stylesheet" />
   <link href="~/Content/Kendo/styles/kendo.common.min.css" rel="stylesheet" />
   <link href="~/Content/Kendo/styles/kendo.rtl.min.css" rel="stylesheet" />
   <link href="~/Content/Kendo/styles/kendo.default.min.css" rel="stylesheet" />
   <link href="~/Content/Kendo/styles/kendo.default.mobile.min.css" rel="stylesheet" />

   <script src="~/Content/Kendo/js/jquery.min.js"></script>
   <script src="~/Content/Kendo/js/jszip.min.js"></script>
   <script src="~/Content/Kendo/js/kendo.all.min.js"></script>
   <script src="~/Content/Kendo/js/console.js"></script>

【问题讨论】：

您是否在浏览器开发者窗口中看到任何控制台错误？
我没有检查。我现在去看看
我去控制台广告我得到了这个错误：未捕获的引用错误：未定义名字。你能帮我澄清一下吗？
将dataSource 属性放在columns 属性上方
我已经修复了之前的错误，现在出现了这个错误：kendoGrid 不是函数。 @vispan 我试过了，但没有用。请帮忙

标签： javascript jquery asp.net-mvc kendo-grid

【解决方案1】：

我已经通过先渲染 javascript 解决了我的问题。它会加载网格

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")
<script src="~/Content/Kendo/js/jquery.min.js"></script>
<script src="~/Content/Kendo/js/kendo.all.min.js"></script>

}

【讨论】：