2016-11-21 50 views
0

我對劍道很新,我仍然在努力學習它。我想在窗體上顯示我的網格,但不顯示。該頁面只會改變顏色。我想要的只是網格出現在窗體上,然後我會綁定來自我的模型的數據。但現在我已經創建了對象數組來將數據傳遞給窗體。我不確定是否需要安裝某些東西或添加更多參考。如何顯示視圖上的虛擬數據的Kendo握把

這是我迄今所做的,

我查看

<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> 
+0

你看到在你的瀏覽器開發商窗口任何控制檯錯誤? –

+0

我沒有檢查。我現在將看看它 –

+0

我去控制檯廣告我得到這個錯誤:未捕獲的ReferenceError:firstName沒有定義。你能爲我澄清嗎? –

回答

0

我已經通過先渲染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> 

}