MVC Grid Detail Template - where to add the kendo upload control - Invalid template error?

[Sean Bornstein]

Hello all,

I have the following below which is my detail template for my main grid.   The tab attachments has a grid in it.  I want to place an update control after the detail attachments grid.  I tried adding it in a few places but I get an error "Invalid Template" anywhere I try and place it.  Below is the code for the detail template and also below that the form I have on another view that works fine.:

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().TabStrip()
.Name("tabStrip_#=CustomerNumber#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Attachments").Content(@<text>
@(Html.Kendo().Grid<ABC.DataModel.Document.DocumentModel>()
.Name("grid_#=CustomerNumber#")
.Columns(columns =>
{
columns.Bound(p => p.DocumentType).Width(40).Title("Type").ClientTemplate("\\#=RenderImage(data)\\#");
columns.Bound(p => p.DocumentName).ClientTemplate(@Html.ActionLink("\\#=DocumentName\\#", "DownloadFile",
new { ID = "\\#=DocID\\#", fileRef = "\\#=FileRef\\#", fileName = "\\#=DocumentNameExt\\#" }).ToHtmlString());
columns.Bound(p => p.ModifiedDate).Format("{0:M/dd/yyyy h:mm tt}").Title("Modified");
columns.Bound(p => p.ModifiedBy).Title("Modified By");
columns.Bound(p => p.LatestVersion).Title("Latest Version");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("CustomerAttachments_Read", "Customers", new { library = "Customers", folder = "#=CustomerNumber#" }))
)
.Sortable()
.ToClientTemplate())
</text>
);
})
.ToClientTemplate()
)
</script>

//I want to place this below the grid in the tab also not sure how to pass two params id and folder.  Below the sample only has id.

@(Html.Kendo().Upload()
.Name("attachments")
.Async(async => async
 .SaveUrl(@Url.Action("FileUpload"))
.AutoUpload(true)
 ).Events(e => e
.Upload(@<text>
function(e) {
e.data = { id: $("#Id").val() };
}
</text>)
)
)

[Petur Subev]

Hello Sean,

Few points that you need to cover:

1. call the ToClientTemplate extensions when you position widget inside a client template.
2. escape the sharp symbols if you have used any inside your widget declaration:

function(e) {
e.data = { id: $("\\#Id").val() };
}

    3. ensure that you have unique name for the widget use #= # expression to append the id to the name
      .Name("attachments#=EmployeeID#")
    4. because of 3 you will need to change the SafeField option so the file is always send using the same name
      .SaveField("Attachments")

So finally it should look something like this:

<script type="text/kendo">
//... other widgets


  @(Html.Kendo().Upload()
        .Name("attachments#=CustomerNumber#")
.Async(async => async
 .SaveUrl(@Url.Action("FileUpload"))
 .SaveField("test")
.AutoUpload(true)

 ).Events(e => e
.Upload(@<text>
function(e) {
e.data = { id: $("\\#Id").val() };
}
</text>)
)
.ToClientTemplate()
)
</script>

Greetings,
Petur Subev
the Telerik team