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

Using Grid Upload in a 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, it receives 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 while the one sent from the Telerik UI for ASP.NET Core 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>
    

More ASP.NET Core Grid Resources

See Also

In this article