Adding Upload Component To Grid Toolbar

[ISD]

I'm in the process of upgrading an existing MVC 5 application to Core 2. Kendo UI Grid is used to display documents and has the Kendo Upload control added to the toolbar of the Grid.

This works fine in the MVC 5 implementation as shown below:

 @(Html.Kendo().Grid<ViewModels.Documents>()
      .Name("filesGrid")
      .ToolBar(t => t.Template(
        @<text>
    )
            @(Html.Kendo().Upload()
                  .Name("files")
                  .HtmlAttributes(new { aria_label = "files" })
                  .Async(a => a.Save("DocumentSave", "Home", new { requestId = ViewBag.RequestId }))
                  .Events(e => e.Success("onUploadSuccess"))
                  .ShowFileList(false) // Hide the file list as we're displaying uploaded files in the Grid
            )
        </text>
      ))
      .Columns(columns =>
      {
          columns.Bound(f => f.FileName).ClientTemplate(Html.ActionLink("#=FileName#", "Download", "Home", new { id = "id" }, null).ToHtmlString().Replace("id", "#=DocumentId#")).Title("File name");
          // Calculate the file size in KB, round it up and display it in a client template
          //columns.Bound(f => f.DataLength).ClientTemplate("#= Math.ceil(DataLength / 1024) #").Title("File size in KB").Width(150);
          columns.Bound(f => f.DataLength).Title("File size").Width(150);
          columns.Command(command => command.Destroy()).Width(100);
      })
      .Sortable()
      .Pageable()
      .DataSource(dataSource => dataSource
          .Ajax()
          .PageSize(10)
          .Model(m => m.Id(f => f.DocumentId))
          .Read(read => read.Action("DocumentsRead", "Home", new { requestId = ViewBag.RequestId }))
          .Destroy(update => update.Action("DocumentDelete", "Home"))
      )
    )

However in ASP.NET Core 2 KendoUICore 2018.1.117, the .ToolBar(t => t.Template() method is no longer available, it appears it has been replaced by ClientTemplate. When I attempt to embed the same markup for UI Upload inside ClientTemplate, I get an error "Cannot convert lambda expression to type 'string' because it is not a delegate type"

.ToolBar(t => t.Create()).ToolBar(toolbar =>
                    {
                      toolbar.ClientTemplate(@<text>Html.Kendo().Upload()</text>);
                    }
                    )

 

Thanks for the input!

 

[Stefan]

Hello,

Thank you for the details.

The issue occurs because before this template was rendered on the server, but in the Core wrappers they are rendered only on the client:

https://docs.telerik.com/aspnet-core/known-issues#grid

In this scenario I can suggest the following approach, to initialize the jQuery Upload on the dataBound event:

.ToolBar(t => t.ClientTemplate("<div id='upload'></div>"))

.Events(events => events.DataBound("onDataBound"))

<script>
    function onDataBound(e) {
        $("#upload").kendoUpload({
            // upload configuration
        })
    }
</script>

I hope this is helpful.

Regards,
Stefan
Progress Telerik