Kendo Template Invalid in Grid

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.