1

我的 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 ... ]
    }
});

控制器

 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();

多亏了这一点，网格才能正确显示数据。

-> 第二个问题，最重要的：“add”、“edit”和“destroy”不调用控制器。使用萤火虫，我看不到对控制器的调用，我不知道为什么。我在同一页面上使用了一个调度程序组件，它可以工作，它使用控制器上的相同功能来添加/更新/删除。

有人有建议吗？

谢谢你。

4

1 回答 1

0

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

所以，一定要像这样包装你的 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: "&nbsp;", width: "200px" }
        ],
    editable: {
        mode: "popup",
        [... some configurations ... ]
    }
});

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

于 2014-09-11T12:47:28.690 回答