Kendo Template Invalid in Grid - asp.net-mvc

Question

What am I doing wrong? I get the following error. I am using MVC but not using the MVC wrappers.
Uncaught Error: Invalid template:'
<form action="/Intranet/GalleryFile/Edit" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#slideoutmenu" id="form1" method="post"> <input type="hidden" id="fileID" name="fileID" value='#= fileID #' />
<input type="submit" value="Save" class="btn btn-default" />
</form> ' Generated code:'var o,e=kendo.htmlEncode;with(data){o='\n<form action="/Intranet/GalleryFile/Edit" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="';slideoutmenu" id="form1" method="post"> <input type="hidden" id="fileID" name="fileID" value=';o+='= fileID ';' />
<input type="submit" value="Save" class="btn btn-default" />
</form> ;o+=;}return o;'
JavaScript:
$(document).ready(function () {
var dsGalleryItemFile = new kendo.data.DataSource({
transport: {
read: "#Url.Content("~/Intranet/GalleryItemFile/ListFiles/")#Model.galleryItemID"
},
// determines if changes will be send to the server individually or as batch
batch: false,
schema: {
model: {
id: "fileID",
fields: {
fileID: {
nullable: true
},
filename: {},
fileType: { defaultValue: {fileTypeID: 1, fileType: "Web JPEG"} },
fileType: {},
width: { type: "number" },
height: { type: "number" },
}
}
}
});
$("#gvGalleryItemFile").kendoGrid({
columns: [{
field: "filepath",
title: "File Upload",
width:"250px",//,
//template: "<img src='#=filepath.filepath#' />"
}, {
field: "fileType",
title: "File Type",
template: "#=fileType.fileType#",
}, {
field: "width",
title: "Width(px)",
format: "{0:n0}",
width: "110px"
}, {
field: "height",
title: "Height(px)",
format: "{0:n0}",
width: "110px"
}, {
field: "fileID",
title: "",
template: kendo.template($("#gridEditButtonTemplate").html())
}],
dataSource: dsGalleryItemFile
});
});
Template:
<script type="text/x-kendo-template" id="gridEditButtonTemplate">
#using (Ajax.BeginForm("Edit", "GalleryFile", null, new AjaxOptions { UpdateTargetId = "slideoutmenu", InsertionMode = InsertionMode.Replace, HttpMethod = "Post" }))
{
<input type="hidden" id="fileID" name="fileID" value='#= fileID #' />
<input type="submit" value="Save" class="btn btn-default" />
}
</script>
This isn't even reaching the MVC side of things so I am not including that code. It just won't read the template into my grid column.

Answer 1

The # character has a special meaning in kendo templates and thus it has to be escaped if you want to use it as a regular character.
Your Ajax.BeginForm is creating the attribute
data-ajax-update="#slideoutmenu"
which is what breaks your template. It should be
data-ajax-update="\#slideoutmenu"
I'm not sure if there is a way around this using the Html helpers. The easiest fix would be using plain Html instead.