通过内联编辑重新加载Kendo Grid后内联编辑

问题描述:

我正在Kendo Grid CRUD Operations上工作,并希望使用其内联编辑。 我想在执行添加,删除或更新操作后执行一些操作并刷新我的网格。通过内联编辑重新加载Kendo Grid后内联编辑

我见过很多解决方案。他们建议了一些事件,如"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> 

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

可以使用dataSourcerequestEnd事件,像这样:

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

从文档:

Fired when a remote service request is finished.