This is a migrated thread and some comments may be shown as answers.

Upload inside Grid with GridEditMode.PopUp

6 Answers 467 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Marek
Top achievements
Rank 1
Marek asked on 25 Aug 2012, 03:31 PM
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

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Aug 2012, 12:05 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aaron
Top achievements
Rank 1
answered on 08 May 2013, 05:33 PM
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
0
Dimo
Telerik team
answered on 10 May 2013, 05:10 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
amit
Top achievements
Rank 1
answered on 27 Jan 2014, 06:21 PM
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.
0
Dimo
Telerik team
answered on 28 Jan 2014, 12:09 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
amit
Top achievements
Rank 1
answered on 28 Jan 2014, 05:58 PM
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.
Tags
Upload
Asked by
Marek
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Aaron
Top achievements
Rank 1
amit
Top achievements
Rank 1
Share this question
or