Kendo Upload Inside Kendo Grid will not pass value back to model

[AJ]

Hello All,

 

I have a Kendo Grid that has a Kendo upload inside of a column. I am currently getting the byte array of an image uploaded thru the Kendo Upload control but having difficulty passing that back to the Kendo Gird so it can add it to its model and  call then .Update method from its controller once the update button from the Kendo Grid is pressed.

 

My Editor template is returning a byte array I am having trouble getting the Kendo grid to recieve this data and add it to its model before it calls the .Update Method from my controller... Currently the grid calls .Update but the field where the byte[] should be set to is null. 

 

Please let me know if I should attach more code and how I can resolve this issue, Thanks In advance!

 

 

Grid 

@(Html.Kendo().Grid<AuctionItemModel>()
          .Name("UserGrid")

          .Columns(columns =>
          {
              columns.Bound(p => p.ItemName).Filterable(true).Width(50);
              columns.Bound(p => p.ItemDescription).Filterable(true).Width(250);
              columns.Bound(p => p.BidIncrement).Filterable(true).Width(25);
              columns.Bound(p => p.ItemPrice).Filterable(true).Width(25);
              columns.Bound(p => p.ImageBytes).ClientTemplate("<img height = '100' width = '100' src='" + "data:image/gif;base64,#=Image64#'").Title("Photo").EditorTemplateName("ResumeFileUrl");
              columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250); // command.Destroy();
          })
          .ToolBar(toolbar => toolbar.Create().Text("Add AuctionItem"))
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .Filterable(filter => filter.Enabled(true))
          .Pageable()
          .Sortable()

          .Resizable(x => x.Columns(false))
          .Events(x => x.Edit("doOnRowSelect"))

          .DataSource(dataSource => dataSource

              .Ajax()
              .PageSize(20)

              .Model(model => {  model.Id(p => p.AuctionItemID);  })
              .Create(update => update.Action("Create", "AuctionItem"))
              .Read(read => read.Action("Read", "AuctionItem"))
              .Update(update => update.Action("Update", "AuctionItem").Data("ItemFormValues"))
           .Destroy(update => update.Action("Destroy", "AuctionItem"))
          ))

 

EditorTemplate:

@model byte[]
@(Html.Kendo().Upload()
.Name("ResumeFileUrl")

.Events(events =>
{
     events.Select("onSelectResumeFile");
     events.Success("onUploadSuccessResumeFile");
})
.Messages(messages =>
{
    messages.Select("Upload");
})
.Async(async =>
{
    async.Save("SaveResumeFile", "AuctionItem");
    async.Remove("DeleteResumeFile", "AuctionItem");
    async.AutoUpload(true);
})
.Multiple(false))

 

SaveImageFunction:

public JsonResult SaveResumeFile()
       {
           string filename = String.Empty;
           const string sessionKey = "RESUMEFILE";
           byte[] fileBytes = null;
           if (HttpContext.Request.Files != null && HttpContext.Request.Files.Count > 0 && HttpContext.Session != null)
           {
               List<HttpPostedFileBase> files = HttpContext.Session[sessionKey] as List<HttpPostedFileBase>;
               foreach (string fileName in HttpContext.Request.Files)
               {
                   HttpPostedFileBase newFile = HttpContext.Request.Files[fileName];
                   if (files == null)
                   {
                       files = new List<HttpPostedFileBase> { newFile };
                   }
                   else
                   {
                       files.Add(newFile);
                   }
                   HttpContext.Session[sessionKey] = files;
                   if (newFile != null)
                       filename = Path.GetFileName(newFile.FileName);

                   Stream fileStream = newFile.InputStream;
                   var mStraemer = new MemoryStream();
                   mStraemer.SetLength(fileStream.Length);
                   fileStream.Read(mStraemer.GetBuffer(), 0, (int)fileStream.Length);
                   mStraemer.Seek(0, SeekOrigin.Begin);
                   fileBytes = mStraemer.GetBuffer();

               }
           }
           return Json(new { Type = "Upload", FileName = filename, /*Image64 = Convert.ToBase64String(fileBytes)*/ ImageBytes = fileBytes }, JsonRequestBehavior.AllowGet);
       }

 

[Dimiter Topalov]

Hello AJ,

The same question is already answered in the respective support thread (Ticked ID 1079318), but I will paste the answer here, so others can benefit also:

The Upload helper will expose to the model the string value for the uploaded file URL and an example for your scenario could be found at the following link:
https://www.sitereq.com/post/kendo-mvc-upload-inside-kendo-grid

You can also take a look at the Code Library below for uploading files with PopUp edit mode:
http://www.telerik.com/support/code-library/upload-in-grid-popup-editor

On a side note, please choose only one of the threads, if further communication is needed. This will help avoid duplicates, and will facilitate a tidier support history of your account and better support service. Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress

[Anita]

I am having exactly same issue. I do not know how to post back Json result. It is not filling data back to grid. I think there is something to do with Note: Both callbacks above should be placed under the grid's error callback not in the ResumeFileUrl.cshtml.

This article does not  define clearly how to place this call back function.

This line isnt working columns.Bound(e =>
e.ResumeFileUrl).EditorTemplateName("ResumeFileUrl").Title("Resume").ClientTemplate("#:Filename#");
where my code isnt working due to ClientTemplate("#:Filename#")

[Stefan]

Hello, Anita,

I can assume that the error occurs because the "FileName" will refer to a FileName property in the model. If this property is not present in the model of the real application an undefined error will occur:

public class Employee
 {
 public int Id { set; get; }
 public string FirstName { set; get; }
 public string LastName { set; get; }
 public string ResumeFileUrl { set; get; }
 public string Filename { set; get; }
 }

If the error is different, please provide more details and I will gladly assist further.

Regards,
Stefan
Progress Telerik