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:
-
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)) )
- the
-
Add a
ClientTemplate
which caters for the difference in the file names sent by the success handler and theIFormFile
: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>