如何使用開源Kendo Grid顯示數據庫表格的網格？

Question

我需要使用開源的KendoUI Grid來顯示我的模式列表。但這不是成功。我連接數據庫並將數據作爲控制器類中的列表。我需要從數據庫中獲取數據來完成這個網格。

$("#gridd").kendoGrid({ 
      dataSource: { 
       transport: { 
        read: { 
         url: "report/GetData", 
         type:"json" 
        } 
       }, 
       sortable: true, 
       pageable: { 
        input: true, 
        numeric: false 
       }, height: 430, 
       selectable: "multiple", 
       columns: [ 
          { field: "Users.uName", title: "Kullanıcı", width: "80px" }, 
          { field: "Locations.locName", title: "Oda", width: "80px" }, 
          { field: "Devices.devName", title: "Cihaz", width: "80px" }, 
          { field: "Commands.cName", title: "Komut", width: "80px" }, 
          { field: "gasValue", title: "Gaz", width: "80px" }, 
          { field: "tempValue", title: "Sıcaklık", width: "130px" }, 
          { field: "humValue", title: "Nem", width: "80px" }, 
          { field: "AlarmCodes.aName", title: "Alarm", width: "80px" }, 
          { field: "ReasonCodes.rName", title: "Nedeni", width: "80px" }] 
      } 
     }); 

我的控制器類

public JsonResult GetData() 
{ 
    var reports = db.ActivityLog.OrderBy(c => c.dateTime).ToList(); 
    return Json(reports, JsonRequestBehavior.AllowGet); 
} 

編輯我目前的代碼。現在我看到了網格，但我看不到裏面的數據。他們將如何顯示？

Answer 1

終於找到了。是工作。我重新組織我的控制器端和視圖端。我在腳本數據源代碼中寫了錯誤。現在是工作。

<div id="grid" ></div> 
    <div id="details"></div> 
    <script> 
     var wnd, detailsTemplate; 
     $(document).ready(function() { 
      $("#grid").kendoGrid({ 
       sortable: true, 
       pageable: { 
        input: true, 
        numeric: false 
       }, 
       height: 430, 
       selectable: "multiple", 
       dataSource: { 
        transport: { 
          read: "/Index/Getdata", 
          type: "json" 
         } 
       }, 
       columns: [ 
           { field: "username", title: "User", width: "80px" }, 
           { field: "location", title: "Location", width: "80px" }, 
           { field: "gas", title: "Gas Value", width: "80px" }, 
           { field: "temp", title: "Temp Value", width: "130px" }, 
           { field: "hum", title: "Hum Value", width: "80px" }] 
       }); 
     }); 

我的控制器，在這裏響應數據必須是序列化的。感謝大家。

public JsonResult Getdata() 
     { 
      var reports = db.ActivityLog.OrderBy(c => c.dateTime).ToList(); 
      var collection = reports.Select(x => new 
      { 
       username = x.Users.uName, 
       location = x.Locations.locName, 
       gas = x.gasValue, 
       temp = x.tempValue, 
       hum = x.humValue 
      }); 
      return Json(collection, JsonRequestBehavior.AllowGet); 
     } 

Answer 2

您必須在視圖的控制器中提供一個Action，並在網格的讀取方法中將其作爲JSon對象返回。下面的代碼顯示你和例如，通過使用剃刀引擎：

@(Html.Kendo().Grid<System.Data.DataRow>() 
     .Name("grdLocations") 
     .Columns(columns => 
      { 
       columns.Bound("LocationId").Visible(false); 
       columns.Bound("Name").Title("Nombre").ClientTemplate("<strong>#:Name # </strong>"); 
       columns.Bound("Latitude").Title("Latitud").Format("{0:n6}"); 
       columns.Bound("Longitude").Title("Longitud").Format("{0:n6}"); 
       columns.Bound("Altitude").Title("Altitud"); 
       columns.Bound("Comments").Title("Comentario"); 

       columns.Command(cmd => { }).Width(90); 
      })    
     .Pageable() 
     .Sortable() 
     .DataSource(dataSource => dataSource 
      .Ajax() 
      .PageSize(10) 
      .ServerOperation(false) 
      .Model(model => 
      { 
       model.Id("LocationId"); 
       model.Field("LocationId", typeof(int)); 
       model.Field("Name", typeof(string)); 
       model.Field("Latitude", typeof(decimal)); 
       model.Field("Longitude", typeof(decimal)); 
       model.Field("Altitude", typeof(decimal)); 
       model.Field("Comments", typeof(string)); 
      }) 
      .Read(read => read.Action("Read", "Location")) 
     )) 

，你可以看到，我們有「.Read（）」這臺控制器的作用。

public virtual ActionResult Read([DataSourceRequest] DataSourceRequest request) 
    { 
     try 
     { 
      return Json(Location.GetList().ToDataSourceResult(request), JsonRequestBehavior.AllowGet); 
     } 
     catch (Exception ex) 
     { 
      EventLog.Handle(ex); 

      throw; 
     } 
    } 

類「位置」具有返回從數據庫填充一個DataTable的靜態方法。 希望它有幫助！