Question

我正在使用Kendo Grid CRUD Operations并希望使用其内联编辑功能。我想在执行添加，删除或更新操作后执行一些操作并刷新网格。

我见过很多解决方案。他们提出了一些事件，如"Change" , "RequestEnd"等。但我的RequestEnd事件函数没有被调用，并且调用了Change Event函数，但是在操作之前的任何CRUD操作之前都会调用它。

同样地，我试图检查在Kendo Grid中“ParameterMap”内执行的操作但它也在CRUD操作之前被调用。请建议我在任何CRUD操作之后实现网格重新加载的一些解决方案。这是我的代码：

@Imports [Shared].Models
@Imports [Shared].Enums
@code    

Layout = "~/Views/Shared/_AdminLayout.vbhtml"

@Styles.Render("~/Content/Kendo.min/css")  
@Scripts.Render("~/bundles/kendo")

Dim eventId As Guid = ViewData("EventId")

结束代码

<div>
    <br />
    Shift Grid Demo
    <br />
</div>

<div id="divEventsGrid">

    <div id="example" class="k-content">
        <div id="TestShiftGrid" style="width: 660px;"></div>
    </div>

</div>


</section>


<pre>

<script type="text/javascript">

    $(document).ready(function () {

        var crudServiceBaseUrl = '@Url.Action("JsonGetShiftList", "ManageEvents")' + "?eventId=" + '@eventId',
                   dataSource = new kendo.data.DataSource({
                       transport: {
                           read: {
                               url: '@Url.Action("JsonGetShiftList", "ManageEvents")' + "?eventId=" + '@eventId',
                               dataType: "json"

                           },
                           update: {
                               url: '@Url.Action("JsonShiftUpdate", "ManageEvents")' + "?eventId=" + '@eventId',
                               dataType: "jsonp",

                           },


                           destroy: {
                               url: '@Url.Action("JsonShiftDelete", "ManageEvents")' + "?eventId=" + '@eventId',
                               dataType: "jsonp",
                               success: function (data) {
                                   if (data == true) {
                                       alert("Record Updated Successfully")
                                   }
                               }
                           },

                           create: {

                               url: '@Url.Action("JsonShiftCreate", "ManageEvents")' + "?eventId=" + '@eventId',
                               dataType: "jsonp",
                               type: "Post"
                           },
                           parameterMap: function (options, operation) {
                               if (operation !== "read" && options.models) {
                                   return { models: kendo.stringify(options.models) };

                               }                  
                           }                         
                       },

                       change: function (e) {

                           // alert(e.type); == is not working it is showing undefined..
                           // e.action is showing my current operation but before the operation not after. 
                           if (e.action == "add")
                           {
                               $("#TestShiftGrid").data("kendoGrid").dataSource.read();
                           }


                       },
                       //requestEnd is unable to call. ?
                       requestEnd: function (data) {

                           $("#TestShiftGrid").data("kendoGrid").dataSource.read(); 
                       },
                       batch: true,
                       pageSize: 15,
                       schema: {
                           model: {
                               id: "ShiftId",
                               fields: {
                                   EventId: { editable: false, nullable: true },
                                   ShiftId: { validation: { required: true } },
                                   ShiftDate: { validation: { required: true } },
                                   FromTime: { validation: { required: true } },
                                   ToTime: { validation: { required: true } },

                               }
                           }
                       }
                   });

        $("#TestShiftGrid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            toolbar: ["create"],
            pageable: true,
            sortable: true,
            height: 300,
            columns: [
                    {
                        field: "ShiftDate",
                        title: "Shift Date"
                    },
                    {
                        field: "FromTime",
                        title: "From Time"

                    },
                    {
                        field: "ToTime",
                        title: "To Time"

                    },
                    {
                        command: ["edit", "destroy"],
                        title: "&nbsp;",
                        width: "190px"
                    },

            ],
            editable: "inline"
        });

    });


</script>
</pre>

Answer 1

data source sync事件似乎是完美的，它在创建，更新和删除操作后调用。

Answer 2

您可以使用dataSource requestEnd事件，如下所示：

requestEnd: function (e) {
        if (e.type != "read") {
            // refresh the grid
            e.sender.read();
        }
    }

来自文档：

Fired when a remote service request is finished.

通过内联编辑在任何CRUD操作之后重新加载Kendo Grid

2 个答案: