Upload inside Grid with GridEditMode.PopUp

7 posts, 0 answers
  1. Marek
    Marek avatar
    11 posts
    Member since:
    Aug 2012

    Posted 25 Aug 2012 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 27 Aug 2012 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Aaron
    Aaron avatar
    10 posts
    Member since:
    Mar 2013

    Posted 08 May 2013 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 May 2013 Link to this post

    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!
  6. amit
    amit avatar
    3 posts
    Member since:
    Jan 2014

    Posted 27 Jan 2014 in reply to Dimo Link to this post

    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.
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Jan 2014 Link to this post

    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!
  8. amit
    amit avatar
    3 posts
    Member since:
    Jan 2014

    Posted 28 Jan 2014 in reply to Dimo Link to this post

    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.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready