javascript - kendo Ui - 网格不调用 Controller

Question

我的 KendoUi 网格有一点问题。非常简单:

JS 文件

 $("#gridPlannif").kendoGrid({
    datasource: ds_VEHICULE_SANSDATEFIN,
    height: 200,
    toolbar: ["create"],
    sortable: true,
    filterable: true,
    scrollable: true,
    columns: [{
        field: "sDateArriveePrevue",
        title: "Arrivée à partir du",
    }, {
         [... some columns... ]
    },{
        command: ["edit", "destroy"], title: " ", width: "200px" }
    ],
    editable: {
        mode: "popup",
        [... some configurations ... ]
    }
});

Controller

 public ActionResult UpdateVehicule([DataSourceRequest]DataSourceRequest request, Planification vehicule)
    { 
        try
        {
            if (this.ModelState.IsValid)
            {
              [...]
            }
            else
            {
               [...]
            }
            return Json(new[] { vehicule }.ToDataSourceResult(request, ModelState));
        }
        catch (Exception e)
        {
            return Json(new[] { vehicule });
        }
    }

查看 (.ascx)

[...]
<script>
 ds_VEHICULE_SANSDATEFIN = new kendo.data.DataSource({
            autoSync: true,
            transport: {
                read: {
                    url: '<%= Url.Action("GetVehicules_SansDateFin", "Plannification") %>'
                },
                update: {
                    url: '<%= Url.Action("UpdateVehicule", "Plannification") %>'
                },
                destroy: {
                    url: '<%= Url.Action("DeleteVehicule", "Plannification") %>'
                },
                create: {
                    url: '<%= Url.Action("AddVehicule", "Plannification") %>'
                }

            }
        });

</script>
[...]

问题

-> 第一个问题:数据源定义不起作用。我必须在网格初始化后执行该指令:

$("#gridPlannif").data("kendoGrid").setDataSource(ds_VEHICULE_SANSDATEFIN);
$("#gridPlannif").data("kendoGrid").dataSource.read();
$("#gridPlannif").data("kendoGrid").refresh();

因此，网格可以正确显示数据。

-> 第二个问题，也是最重要的: “添加”、“编辑”和“销毁”不会调用 Controller 。使用 Firebug ，我没有看到对 Controller 的调用，我不知道为什么。我在同一页面上使用调度程序组件，它可以工作，它使用 Controller 上的相同功能来添加/更新/删除。

有人有建议吗？

谢谢。

Answer 1

听起来你的 JavaScript 库代码“$("#gridPlannif").kendoGrid({ "没有被 document.ready 包装(假设你也使用 jQuery)并在 View 的 JavaScript 代码(类库)之前加载在查看代码之前加载，除非另有说明)。

因此，请务必像这样包装您的 JavaScript 库代码:

$(function() {  // This is jQuery shorthand for document.ready
    $("#gridPlannif").kendoGrid({
        datasource: ds_VEHICULE_SANSDATEFIN,
        height: 200,
        toolbar: ["create"],
        sortable: true,
        filterable: true,
        scrollable: true,
        columns: [{
            field: "sDateArriveePrevue",
            title: "Arrivée à partir du",
        }, {
             [... some columns... ]
        },{
            command: ["edit", "destroy"], title: " ", width: "200px" }
        ],
    editable: {
        mode: "popup",
        [... some configurations ... ]
    }
});

这将允许渲染所有 View 页面代码，包括在尝试连接 Kendo 网格之前定义的内联 <script> block 。所有这些都是为了确保数据源在尝试从 Kendo Grid 初始化中调用之前存在。