New to Telerik UI for ASP.NET Core? Download free 30-day trial

Grid Upload in Custom Popup Edit Template

Environment

Product Grid for Progress® Telerik® UI for ASP.NET Core

Description

When adding an Upload component to a grid, using EditorTemplateName, the component seems to work, however, when I check my Save method on , it is always receiving an empty list. The origin of the problem is that the payload is not automatically bound to the IEnumerable<IFormFile> files but it is sent to the server.

Solution

The expected parameter is files and the sent one from the Kendo UI Upload initialized as an editor has another name - FileUploads.files. This occurs because of the Html.EditorFor() syntax.

Instead:

  1. Do not use the @Html.EditorFor() syntax to call the Upload in the form. Include it in the custom PopUp editor, to avoid the issue with the name:

    • the Upload event handler passes the model Id so it can be intercepted in the controller
    • the Success handler ensures that the grid column template will reflect the change instantly and show the name of the file:
       @model CoreEditableGrid.Models.OrderViewModel
    
        @Html.HiddenFor(m => m.OrderID)
        @(Html.Kendo().TextBoxFor(model => model.ShipName))
    
        @(Html.Kendo().Upload()
           .Name("files")
           .Multiple(true)
           .HtmlAttributes(new { aria_label = "files" })
           .Events(e => e
           .Upload(@<text>
               function(e) {
                 e.data = { id: $("#OrderID").val() };
               }
           </text>).Success(@<text>
               function(e) {
                var grid = $("#grid").data("kendoGrid");
                var dataItem = grid.dataSource.get($("#OrderID").val());
                dataItem.FileUploads = e.files;
               }
           </text>))
              .Async(a => a
              .Save("Post", "Grid")
              .AutoUpload(true))
        )
    
  2. Add a ClientTemplate which caters for the difference in the file names sent by the success handler and the IFormFile:

        columns.Bound(p => p.FileUploads).ClientTemplate("#=getFileTemplate(data)#");
        <script>
            function getFileTemplate(data) {
                    var fileNames = data.FileUploads.map(function (file) {
                        return file.FileName ? file.FileName : file.name + " ";
                    });
                    return fileNames;
            }
        </script>
    

See Also

In this article