如何使用开放源码的Kendo网格显示数据库表的网格？

Question

我需要使用开源的KendoUI网格从模式中显示我的列表。但这并不是成功。我连接数据库，并在控制器类中以数据作为列表。我需要通过从数据库获取数据来完成这个网格。

 $("#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，并在网格的read方法中将其作为JSon对象返回。下面的代码通过使用Razor引擎向您和示例展示：

@(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;
        }
    }

类"Location“有一个静态方法，它返回一个从数据库中填充的DataTable。希望能帮上忙！