Update button and delete not working on KendoUI Grid with Javascript

i'm currently working on a slider which has the slider table itself different from the slider images table where the primary key of the slider table is a foreign key on the slider images table. the idea is you create a slider, save and upload the slider images(1 or more) so when you upload the images and save its refreshes a kendoui grid with the image.The issue now is with deleting and updating some columns like (caption , Url) images from this kendoui grid. This is my view code:

  $(document).ready(function() {
                    $("#productpictures-grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: {
                                    url: "@Html.Raw(Url.Action("GetPromoImagesList", "PromoSlider", new {PromoSliderId = Model.PromoSliderId }))",
                                    type: "POST",
                                    dataType: "json",
                                    data: addAntiForgeryToken
                                },
                                update: {
                                    url: "@Html.Raw(Url.Action("UpdatePromoImage", "PromoSlider"))",
                                    type: "POST",
                                    dataType: "json",
                                    contentType: "application/json; charset=utf-8",
                                    data: addAntiForgeryToken
                                },
                                destroy: {
                                    url: "@Html.Raw(Url.Action("DeletePromoImage", "PromoSlider"))",
                                    type: "POST",
                                    dataType: "json",
                                    contentType: "application/json; charset=utf-8",
                                    data: addAntiForgeryToken
                                },

                              parameterMap: function (options, operation) {
                                  if (operation !== "read" && options.models) {
                                      return { models: kendo.stringify(options.models) };
                                  }
                                  else if (operation !== "update" && options.models) {
                                      return { models: kendo.stringify(options.models) };
                                  }
                                  else if (operation !== "destroy" && options.models) {
                                      return { models: kendo.stringify(options.models) };
                                  }
                            },
                            schema: {
                                data: "Data",
                                total: "Total",
                                errors: "Errors",
                                model: {
                                    id: "PromoImageId",  

This is my controller:

  [HttpPost]
    public ActionResult UpdatePromoImage(PromoImageRecord imageUpdate)
    {
       PromoImageRecord  image = _imageRepo.GetById(imageUpdate.PromoImageId);

        image.DisplayOrder = imageUpdate.DisplayOrder;
        image.Url = imageUpdate.Url;
        image.Caption = imageUpdate.Caption;

        _imageRepo.Update(image);

        return new NullJsonResult();
    }

    [HttpPost]
    public ActionResult DeletePromoImage(int PromoImageId)
    {
        PromoImageRecord image = _imageRepo.GetById(PromoImageId);
        _imageRepo.Delete(image);

        return new NullJsonResult();
    }

When i debug i can see that the Primary key of the sliders images table is 0 and the primary key of the sliders table which is a foreign key on the sliders images table is null. so essentially it cannot identify the particular row on the grid on which the button is clicked. please help!