Reloading of Kendo Grid after any of the CRUD Operation by inline editing

Question

I am working on Kendo Grid CRUD Operations and want to use its inline editing. I would like to perform some operations and refresh my grid after performing the add, delete or update operation.

I have seen many solutions for it. They have suggested some events like "Change" , "RequestEnd" etc. But my RequestEnd event function is not getting called, And Change Event function called but it gets called before any of the CRUD operations not after the operation.

Similarly I have tried to check which operation performed inside the "ParameterMap" in the Kendo Grid but it is also getting called before the CRUD Operation. Please suggest me some solution to implement Grid reloading after any of the CRUD Operations. Here is my code:

@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")

End Code

<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

You can use the dataSource requestEnd event, like this:

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

From the documentation:

Fired when a remote service request is finished.

Answer 2

The data source sync event seems perfect for this, it is invoked after create, update and delete operations.