使用MVC 4中的模型数据绑定KendoUI网格

时间:2013-05-09 07:15:58

标签: asp.net-mvc-4 kendo-ui kendo-grid

例如,我有一个模型IEnumerable<Correspondence>的视图。我想将它绑定到KendoUI网格。我该怎么办?我试过了

    @model IEnumerable<Correspondence>
    <div id="Correspondence"></div>
    <script>
        $(document).ready(function () {
            $('#Correspondence').kendoGrid({
                dataSource: {
                        data: @Html.Raw(Json.Encode(Model)),
                        editable: { destroy: true },
                        batch: true,
                        pageSize: 15,
                        schema: {
                            model: {
                                id: "Id",
                                fields: {
                                    Subject: { type: "string" },
                                    CorrespondenceType: { type: "number" },
                                    SentDate: { type: "date" }
                                }
                            }
                        }
                    },
                    navigatable: true,
                    selectable: "row",
                    filterable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true
                    },
                    columns: [
                        {
                            title: "Subject",
                            field: "Subject"
                        },
                        {
                            title: "Type",
                            field: "CorrespondenceType"
                        },
                        {
                            title: "Sent Date",
                            field: "SentDate",
                            format: "{0:MM/dd/yyyy}"
                        },
                        {
                            command: [{ name: "openCorrespondence", text: "Open", className: "k-grid-openLaboratory", imageClass: "k-icon k-i-maximize", click: Open },
                                { name: "deleteCorrespondence", text: "Delete", className: "k-grid-deleteLaboratory", imageClass: "k-icon k-delete", click: Delete },
                                { name: "EditCorrespondence", text: "Edit", className: "k-grid-editLaboratory", imageClass: "k-icon k-edit", click: Edit }],
                            title: "Action"
                        }
                    ]
                });
            }); // end ready
    </script>

但它不起作用。该表甚至没有显示出来。请帮我。谢谢。

编辑!!!

1 个答案:

答案 0 :(得分:3)

我已经解决了自己的问题。因为我使用了命令列,所以我必须添加3个函数:OpenEditDelete。然后,网格显示成功。