Kendo UI Grid CRUD firing multiple times

Question

I have a kendo UI grid in my page. Below is the code of kendo UI grid with CRUD datasource actions.

@(Html.Kendo().Grid<Gts.GlaspacLX.Web.ViewModel.ProductViewModel>()
      .Name("xyzGrid")
      .Columns(columns =>
          {
              columns.Bound(p => p.SelectedProductCategory).EditorTemplateName("_ProductDropDownList").Title("Product Category").HtmlAttributes(new { @tabindex = "8" });
              columns.Bound(p => p.Name).Width(130).Title("% Off").HtmlAttributes(new { @tabindex ="9" });
              columns.Bound(p => p.Rate).Width(130).HtmlAttributes(new { @class = "prodDiscRtAlign",@tabindex= "10" });
              columns.Bound(p => p.Hours).Width(130).HtmlAttributes(new { @class = "prodDiscRtAlign",@tabindex= "11" });
              if (SiteContext.CurrentUser.HasPrivilege(PrivilegeNames.Maintenance, PermissionNames.DELETE))
              {
                  columns.Command(command => { command.Destroy(); }).Width(110).Title("Delete").HtmlAttributes(new { @tabindex = "12" });
              }
          })
      .ToolBar(commands =>
          {
              commands.Create();
              commands.Save();
          })
      .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
      .Sortable()
      .Navigatable()
      .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Batch(true)
                                    .ServerOperation(false)
                                    .Model(model =>
                                        {
                                            model.Id(p => p.ProductID);
                                            model.Field(p => p.SelectedProductCategory).DefaultValue(ViewBag.DefaultProductCategory);
                                        })                                            
                                    .Read(read => read.Action("Product_Read", "ProductController"))
                                    .Update(update => update.Action("Product_Update", " ProductController "))
                                    .Create(create => create.Action("Product_Create", " ProductController "))
                                    .Destroy(update => update.Action("Product_Destroy", " ProductController ")
                                    ))
      .Events(e => e.Edit("proField").DataBound("boundProductChange"))
      )

Below is the screen shot of "Save" button just after the kendo grid. It's responsible for any create/update operation of the page.

My problem is once I clicked on Save button for any create or update operation its posting the action method twice. You can see the console of above screen shot.

Below is the piece of the code of my controller's action method:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult  Product_Create([DataSourceRequest] DataSourceRequest request,       [Bind(Prefix = "models")]IEnumerable<ProductViewModel> product){
        return Json(results.ToDataSourceResult(request, ModelState));
    }

Below is proField function code :-

 function proField(e) {
   var defaultproduct = $("#DefaultProductCategory").val();
   defaultproduct = "\n" + defaultproduct + "select ";
   if (e.model.SelectedProductCategory == "Default" && (e.sender._editContainer[0].textContent == defaultproduct || e.sender._editContainer[0].textContent == "\n select ")) {
           e.sender._editContainer[0].disabled = true;
           e.sender._editContainer[0].children[0].textContent = "Default";
           e.sender.table[0].rows[1].cells[1].click();
           e.sender.table[0].rows[1].cells[4].disabled = true;
   }

}

Answer 1

after insert any record you should return primary(Id) key to view. see kendo demo.