如何使用开源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的静态方法。 希望它有帮助！