Grid with upload in custom editor template popup

8 posts, 0 answers
  1. Eduardo
    Eduardo avatar
    21 posts
    Member since:
    Jan 2011

    Posted 23 Oct 2012 Link to this post

    Hi,

    I've been trying to set a grid in popup edit mode, with an upload in a custom editor template, but can't get this to work, the  doesn't have a value. Here's my editor template and controller, the view only have a grid set with ajax CRUD operations and popup edit mode. If this possible (a sync upload in editor template), or I need to set async save for the upload?

    Controller:

    public JsonResult InsertWithImage([DataSourceRequest]DataSourceRequest request, HttpPostedFileBase Picture)
            {
                var item = repository.CreateNew();
                try
                {
                    UpdateModel(item);
                    if (Picture != null)
                    {
                        Picture.InputStream.Read(item.Image, 0, (int) Picture.InputStream.Length);
                        item.Image_Ext = Picture.ContentType;
                    }
                    repository.Add(item);
                    unitOfWork.SaveChanges();
                }
                catch (Exception err)
                {
                    ...
                }
                return
                    Json((new[] { item }.ToDataSourceResult(request, ModelState)));
            }


    EditorTemplate:

    <fieldset>
        ...
        <div class="row">
                @Html.LabelFor(model => model.Image)<br />
                @(Html.Kendo().Upload().Name("Picture").Multiple(false)
                    .HtmlAttributes(new Dictionary<stringobject>{
                                                                      {
                                                                          "style""width: 100%"
                                                                      }}))
                @Html.ValidationMessageFor(model => model.Image)
            </div>
    </fieldset>

    Eduardo
  2. Stargazer
    Stargazer avatar
    2 posts
    Member since:
    Sep 2008

    Posted 10 Aug 2013 Link to this post

    Hello!

    I'm trying to accomplish the same thing. Tried many variations but I seem to get to nowhere. I'm able to upload the files, but when it comes to put the file in my entity (Open Access) I can't seem to find a way to do it.

    What's even more surprising is that it seems that more people trying this and not being able to do it and there are no replies. So I ask: is there any one out there with this working?

    Thanks!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 14 Aug 2013 Link to this post

    Hi Nuno,


    The following behavior could not be achieved. The files cannot be send with AJAX along with the Grid data. As a solution I would suggest you to use the Async Upload and upload the files separately. I am attaching a solution to demonstrate a sample approach.

    I hope that this information was helpful for you. I wish you a great day!

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Stargazer
    Stargazer avatar
    2 posts
    Member since:
    Sep 2008

    Posted 14 Aug 2013 Link to this post

    Hello Dimiter,

    Thanks for the sample code. It may help (haven't tested yet) when updating, since I can send the entity ID or something to identify it to the controller and I may do some sort of renaming operation or similar on the files so I can identify which belongs to which.

    But If I'm creating a new entity I have no ID yet, only after I actually save it to the database. And iin this case, the files do need to go to the database.

    So, if I understood correctly your suggestion, my system must rely that in a given moment, the uploaded file belong to the entity being edited, new or existing. Then, in the update or create action on my controller I go get the file and save the bytes on my entity, right? This is the approach you recommend?

    Or am I not making myself clear?

    Best wishes,
    Nuno
  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 14 Aug 2013 Link to this post

    Hello Nuno,


    The suggested approach was just an example, since I was not aware of the exact scenario. Thank you for providing the additional information in the support thread. Please take a look at my answer there, since you may find it more suitable in the current case.


    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Stargazer
    Stargazer avatar
    2 posts
    Member since:
    Sep 2008

    Posted 14 Aug 2013 Link to this post

    Hello again Dimiter,

    I'll do just that. Thanks again. :)

    If it works, I'll then post the solution implemented here so others can benefit of it.

    Have a nice day! :)
    Nuno
  8. Mark
    Mark avatar
    3 posts
    Member since:
    Oct 2013

    Posted 29 Apr 2014 in reply to Dimiter Madjarov Link to this post

    Can you please post the answer from the support thread? It would be helpful for those of us who are attempting to accomplish the same thing. 
  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 30 Apr 2014 Link to this post

    Hi Mark,


    My suggestion in the support thread was to upload the file, store it with some unique name and return it as metadata from the save handler as demonstrated in the following documentation page.
    E.g.
    public ActionResult Save(IEnumerable<HttpPostedFileBase> attachments)
    {
        var attachmentName = ... ;
      
        return Json(new { fileName = attachmentName }, "text/plain");
    }

    //retrieve the unique name in the success event handler of the Upload widget
    var lastUploadedFile;
    function onSuccess(e) {
       lastUploadedFile = e.response.fileName;
    }

    This name could be then send as additional data with the Grid requests.
    E.g.
    .Create(create => create.Action("Create", "Grid").Data("additionalInfo"))

    function additionalInfo() {
        return {
            filename: lastUploadedFile
        }
    }

    public ActionResult Create([DataSourceRequest]DataSourceRequest request, Product product, string filename)
    { ... }

    I hope this information was helpful.

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready