ASP.NET MVC Using Grid Upload in a Custom Popup Edit Template

New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Updated on Oct 28, 2025

Environment

Product

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

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 MVC Upload initialized as an editor has another name: FileUploads.files. This occurs because of the Html.EditorFor() syntax.

Instead:

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:

Razor

   @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))
    )

Add a ClientTemplate which caters for the difference in the file names sent by the success handler and the IFormFile:

Razor

    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>

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also