Upload inside Grid with GridEditMode.PopUp

[Marek]

I'm trying to use Upload inside Grid with GridEditMode.PopUp

I have already created custom Edit Template for property:

    public class Contact

    {

        [UIHint("PhotoFileNameEditor")]

        public string PhotoFileName { get; set; }

    }

}

@(Html.Kendo().Upload()

    .Name("PhotoFileName")

    .Multiple(false)

    .Async(async => async.Save("SavePhoto", "Contact").Remove("RemovePhoto", "Contact").AutoUpload(true))

)

And Save method

  public ActionResult SavePhoto(IEnumerable<HttpPostedFileBase> PhotoFileName)

        {

            if (PhotoFileName != null)

            {

                foreach (var file in PhotoFileName)

                {

                    var fileName = Path.GetFileName(file.FileName);

                    var physicalPath = Path.Combine(Server.MapPath("~/Images/"), fileName);

                     file.SaveAs(physicalPath);

                }

            }

            return Content("");

}

It saves the file without problem, but Contact.PhotoFileName is not changed so the PopUp form is not submited at all.

How do I change the value of PhotoFileName so i can save it to database?

Thank you

[Dimo]

Hello Marek,

You can use the widget's success event and fill in some hidden field in the edit form. The Upload component does not have a value during submit when async uploading is used.

Kind regards,
Dimo
the Telerik team

[Aaron]

Hi,

I have the same problem with uploading a file inside a grid popup. I'm pretty new to using mvc/kendo so I may not be doing this properly, and not very good in js.

You said to fill in a hidden field from the Success/Upload event of the Upload widget but I can't get it to work. I'm not even sure whether it's suppose to go to the Action of the Save method (async Save) upon selecting a file or after when I click the Update button on the popup.

Grid

@(Html.Kendo().Grid<Scholarship2013.Models.Donor>()
        .Name("Grid")

        .Columns(columns =>
        {
            columns.Bound(e => e.DonorID).Visible(false).Width(120);
            columns.Bound(e => e.Name).Width(120);
            columns.Bound(e => e.RaisersEdgeID).Width(140);
            columns.Bound(e => e.PhoneNumber).Width(120);
            columns.Bound(e => e.EmailAddress).Width(120);
            columns.Bound(e => e.WebAddress).Width(120);
            columns.Bound(e => e.Contact).Width(120);
            columns.Bound(e => e.Logo).Width(120);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Title("Command").Width(200);
        })

        //.ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Donors"))

        .Pageable()
        .Sortable()
        .Scrollable()
        .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("error_handler"))
        .Model(model =>
            {
                model.Id(p => p.DonorID);
                model.Field(p => p.DonorID).Editable(false);
                model.Field(p => p.Name).Editable(false);
            })

           // .ServerOperation(false)
        .Read(read => read.Action("Donor_ReadJSon", "DataMaintenance"))
        .PageSize(10)
        .Create(update => update.Action("Donor_Create", "DataMaintenance"))
        .Update(update => update.Action("Donor_Update", "DataMaintenance"))
        .Destroy(update => update.Action("Donor_Destroy", "DataMaintenance"))
        )
   )

popup template .cshtml

@Html.HiddenFor(model => model.DonorID)
@Html.HiddenFor(model => model.Logo)

@(Html.Kendo().Upload()

      .Name("LogoFile")

      .Multiple(false)

      .Async(async => async.Save("UploadImage", "DataMaintenance").Remove("RemoveImage", "DataMaintenance").AutoUpload(true))

      .Events(events => events

              .Upload(@<text>

              function(e) {

                  e.data = { id: $("#DonorID").val() };

              }

      </text>)

      )

  )

 

 

 @if (Model.Logo != null)

 {

      <img src="@Model.Logo" />

 }

Controller

public ActionResult UploadImage(IEnumerable<HttpPostedFileBase> LogoFile)
         {
             if (LogoFile != null)
             {
                 var test = false;
             }

             return View();
         }
 public ActionResult Donor_Update([DataSourceRequest] DataSourceRequest request, Donor donor)
         {
             if (donor != null && ModelState.IsValid)
             {
                 Donor target = (from s in context.Donors
                                    where s.DonorID == donor.DonorID
                                    select s).SingleOrDefault();



                 if (target != null)
                 {
                     target.Name = donor.Name;
                     target.Address = donor.Address;
                     target.City = donor.City;
                     target.LastUpdatedDate = DateTime.Now;
                     target.Logo = donor.Logo;
                     context.SaveChanges();

                     //target.MarriedCommonLawOneChildren = budget.MarriedCommonLawOneChildren;

                     //BudgetRepository.Update(target);
                 }
             }

             return Json(ModelState.ToDataSourceResult());
         }

Please help thanks in advance

Aaron

[Dimo]

Hello Aaron,

I don't see where the Upload's success event is used in the provided code snippets. The handler should be used to set some value to a hidden field that belongs to the Model. In this way the submitted form will contain information that a file has been uploaded. All this is needed only if the uploaded file is required.

>> I'm not even sure whether it's suppose to go to the Action of the Save method (async Save) upon selecting a file or after when I click the Update button on the popup.

In the provided configuration, the UploadImage action method should be hit as soon as a file is selected, because AutoUpload is set to True and the upload method is asynchronous.

Regards,
Dimo
the Telerik team

[amit]

Hi Dimo,

I tried exactly the way you suggested, but the update is posting old value of the image name instead of the new one. I have made use of hidden field for that model field.

[Dimo]

Hello Amit,

If the new file is successfully uploaded and the hidden field is populated with the new name in the Upload's success event, then how is the old name submitted? Did you debug the code to check for anything unusual?

Please send a runnable demo if you need further assistance.

Regards,
Dimo
Telerik

[amit]

Hi Dimo,

The problem is now solved. Now I am using editor template for only one field the image one. and placed the [UIHint("")] attribute over the model property. And its working perfectly now.

Earlier code I couldn't figure out how the old value was getting posted. I debugged right across using firebug.
On doing $("ImageName").val() , this was giving the current value but the one that was being posted was the old value.

Thanks anyways, everything's fine now
Amit.