Question

我有现有的休息服务，我正在尝试在Kendo Grid中显示返回值。

返回结构：

[{"Form":"xxx","Revision":x,"Status":"xxx"}]

我正在使用Razor语法，所以我创建了这样的网格：

@(Html.Kendo()
      .Grid<FormViewModel>()
      .Name("form-list")
      .AutoBind(false)
      .Columns(columns =>
          { 
              columns.Bound(m => m.Form).Title("Name");
              columns.Bound(m => m.Revision).Title("Revision");
          })
      .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Read(read => read.Url(string.Format("{0}/{1}", Html.WebApiBaseUrl(), "Forms")).Type(HttpVerbs.Get))
                                    .Model(model =>
                                        {
                                            model.Id(m => m.Form);
                                            model.Field(m => m.Revision);
                                        })
                                    .Events(events => events.Error("errorHandler"))))

但我的网格无法绑定到DataSource。据我所知，Kendo需要ToDataSourceResult()方法调用才能执行正确的JSON格式化。但是可以直接从客户端进行吗？

控制器：

public class FormController : Controller
{
    public ActionResult GetFormList()
    {
        return View();
    }

}

Answer 1

不确定为什么它不适用于Razor，但我能够解决问题。所以我创建了这样的网格：

<div id="form-list-view" class="k-content">
    <div id="form-list-grid"></div>
</div>

var formListDataSource = new kendo.data.DataSource({
   transport: {
       read: {
           url: "@Url.Content(string.Format("{0}/{1}", Html.WebApiBaseUrl(), "Forms"))",
           dataType: "json"
       }
   },
    schema: {
        model: {
            id: "Form",
            fields: {
                Form: { type: "string" },
                Revision: { type: "number" },
                Status: { type: "string" }
            }
        }
    },
   pageSize: 10
});

$("#form-list-grid").kendoGrid({
    autoBind: false,
    dataSource: formListDataSource,
    pageable: true,
    columns: [
        {
            field: "Form",
            title: "Name"
        },
        {
            field: "Revision",
            title: "Revision"
        },
        {
            field: "Status",
            title: "Status"
        }
    ]
});

现在我已经预料到了行为，我的网格正确绑定到返回的数据。

Kendo UI Grid和外部服务JSON绑定

1 个答案: