This is a migrated thread and some comments may be shown as answers.

Invalid Tempate on nested grids popup editorTemplate

3 Answers 438 Views

Grid

This is a migrated thread and some comments may be shown as answers.

CLOCA asked on 08 Nov 2017, 04:03 PM

consoleerror.png

Hello,

I have a grid nested within another grid using .ClientDetailTemplateId("template").

the template looks like this:

<script id="template" type="text/kendo-tmpl">

@(Html.Kendo().Grid<IMSCore.ViewModels.FolderAttachmentTaskAttachmentsViewModel>()

.Name("gridAttachmentTasks_#=FolderAttachmentTaskId#")

.Columns(columns =>

{

columns.Bound(o => o.Attachment.MigrationAttachmentId);

columns.Bound(o => o.AttachmentId).Hidden();

columns.Template(

"<a role='button' class='k-button k-button-icontext editAttachmentButton ' attachmentid='#:  #' style='font-size:smaller;'>Edit</a>"

)

.Title("Edit Attachment")

.HtmlAttributes(new { @class = "k-button k-button-icontext", attachmentId = "#: AttachmentId #" })

.Width(75);

columns.Command(command => { command.Edit(); }).Width(EditTemplateHelper.COMMAND_WIDTH);

})

.Editable(edit =>

{

edit.Mode(GridEditMode.PopUp).TemplateName("FolderAttachmentTaskAttachmentsEditTemplate").AdditionalViewData(new { caid = Model.Caid });

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(m => m.Id(con => con.AttachmentId))

.PageSize(10)

.Read(read => read.Action("GetFolderAttachmentTaskAttachments_Post", "FolderAttachmentTaskAttachmentsApi", new { folderAttachmentTaskId = "#=FolderAttachmentTaskId#" }))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

Inside the nested grid I am trying to add a pop editor template like so:

edit.Mode(GridEditMode.PopUp).TemplateName("FolderAttachmentTaskAttachmentsEditTemplate").AdditionalViewData(new { caid = Model.Caid });

However, when I go to click the edit button, I get invalid Template error.

The contents of the editorTemplate is:

Form to create or edit a folders attachment

*@

@model IMSCore.ViewModels.FolderAttachmentViewModel

@{

CategorySettings categorySettings = new CategorySettings();

string caid = null;

if (ViewData["CategorySettings"] != null)

{

categorySettings = (CategorySettings)ViewData["CategorySettings"];

}

if (ViewData["CAID"] != null)

{

caid = ViewData["CAID"].ToString();

//Model.Caid = caid;

}

<script>

function ddlDefaultDescriptionSelecet(e) {

var item = this.dataItem(e.item);

var form = $("#FolderAttachmentForm");

var inputs = form.find(":input");

var description = $("#Description");

$.each(inputs, function (inputIndex, input) {

input = $(input);

if (input.attr("id") == "Description") {

input.val(item.Value).trigger("change");

/*Still need to update the actual value. */

description.val(item.Value);

}

});

}

function AttachmentTypeSelect(e) {

var item = this.dataItem(e.item);

var attachmentId = item.AttachmentTypeId;

var attachmentType = item.AttachmentType;

var hiddenAttachmentId = $("#AttachmentTypeId");

/*Update the hidden AttachmentId Field */

hiddenAttachmentId.val(attachmentId).trigger("change");

console.log(hiddenAttachmentId);

}

</script>

@* Click Event for custom Check boxes. *@

<script>

$(document).on('click', '.checkBoxGroup > input', function (e) {

var $this = $(this);

console.log("Changed!");

console.log($(this));

console.log(e);

debugger;

console.log($this.val());

var value = $this.val();

if (value == true || value == "true" || value == "True") {

value = false;

}

else if (value == false || value == "false" || value == "False") {

value = true;

}

console.log("new value");

console.log(value);

/*change the value*/

/*$this.val(value).trigger("change");*/

$this.attr("value", value);

console.log($this.val());

console.log("change done");

});

</script>

<div class="templateForm">

<article class="form-horizontal gridEditForm" id="FolderAttachmentForm" style="">

@* Incase this form is ever going to be used to edit a record in the future. *@

@Html.HiddenFor(m => m.AttachmentId)

@Html.HiddenFor(m => m.AttachmentTypeId)

@Html.HiddenFor(m => m.Caid, new { @Value = caid })

@*@Html.Hidden("Caid", caid)*@

@* Incoming *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.Incoming)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.DropDownListFor(m => m.Incoming)

.BindTo(new List<SelectListItem>() {

new SelectListItem() {

Text = "Incoming"

},

new SelectListItem() {

Text = "Outgoing"

},

new SelectListItem() {

Text = "Internal"

}

})

.DataTextField("Text")

.OptionLabel("Select Status")

)

</div>

</section>

@* Attachment Type *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.AttachmentType)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.ComboBoxFor(m => m.AttachmentType)

.DataTextField("AttachmentType")

.DataValueField("AttachmentTypeId")

.Filter(FilterType.StartsWith)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetAllAttachmentTypes", "AttachmentTypesApi");

});

})

.Events(e =>

{

e.Select("AttachmentTypeSelect");

})

.HtmlAttributes(new

{

style = "width: 100%;"

})

)

</div>

</section>

@* Reveived Date *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.Received)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.DatePickerFor(m => m.Received)

//.Value("10/10/2011")

.HtmlAttributes(new { style = "width: 100%", title = "datepicker" })

)

</div>

</section>

@* From *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.From)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.TextBoxFor(m => m.From)

.HtmlAttributes(new { style = "width: 100%; " })

)

</div>

</section>

@* To *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.To)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.TextBoxFor(m => m.To)

.HtmlAttributes(new { style = "width: 100%; " })

)

</div>

</section>

@* Report Author *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.ReportAuthor)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.TextBoxFor(m => m.ReportAuthor)

.HtmlAttributes(new { style = "width: 100%; " })

)

</div>

</section>

@* Description *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.Description)

</div>

<div class="pull-right col-sm-5">

@(

Html.TextAreaFor(m => m.Description, 0, 0, new

{

@class = "k-textbox",

style = "width: 100%"

})

)

</div>

</section>

@* Default Description Drop down list *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.DropDownList()

.Name("ddlDefaultDescription")

.BindTo(new List<SelectListItem>() {

new SelectListItem() {

Text = "Legal Inquiry"

},

new SelectListItem() {

Text = "Permit Application"

},

new SelectListItem() {

Text = "Response To"

},

new SelectListItem() {

Text = "Signed Permit"

},

new SelectListItem() {

Text = "Statutory Requestfor Comments"

},

})

.OptionLabel("SELECT A DEFAULT DESCRIPTION")

.HtmlAttributes(new { style = "width: 100%; " })

.Events(e =>

{

e.Select("ddlDefaultDescriptionSelecet");

})

)

</div>

</section>

@* Item Date *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.ItemDate)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.DatePickerFor(m => m.ItemDate)

//.Value("10/10/2011")

.HtmlAttributes(new { style = "width: 100%", title = "datepicker" })

)

</div>

</section>

@* Date Response *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.DateReponse)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.DatePickerFor(m => m.DateReponse)

//.Value("10/10/2011")

.HtmlAttributes(new { style = "width: 100%", title = "datepicker" })

)

</div>

</section>

@* Date Due *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.DateDue)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.DatePickerFor(m => m.DateDue)

//.Value("10/10/2011")

.HtmlAttributes(new { style = "width: 100%", title = "datepicker" })

)

</div>

</section>

@* Confidential *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.Confidential)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.CheckBoxFor(m => m.Confidential)

.Checked(false)

.HtmlAttributes(new { value = "false" })

)

</div>

</section>

@* Owner ID *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.OwnerId)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

//.TextBoxFor(m => m.CreatedBy)

.ComboBoxFor(m => m.OwnerId)

.Placeholder("Select an Owner")

.DataTextField("Name")

.DataValueField("UserId")

//.Template("<div><span>#:data.FirstName# #:data.LastName#</span></div>")

.DataSource(ds =>

{

ds.Read(read => read.Action("Get_OwnerUsers", "UsersApi"));

})

.Suggest(true)

.HtmlAttributes(new { style = "width: 100%;" })

)

</div>

</section>

@* Default Task *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.DefaultTask)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.CheckBoxFor(m => m.DefaultTask)

.Checked(false)

.HtmlAttributes(new { value = "false" })

)

<span>Enter an attachment Owner above to assign a default attachment task</span>

</div>

</section>

@* Email Notification *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.EmailNotification)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.CheckBoxFor(m => m.EmailNotification)

.Checked(false)

.HtmlAttributes(new { value = "false" })

)

<span>Send Task Recipients a Notification Email?</span>

</div>

</section>

@*@if (categorySettings.PlanReviews == true)

{

<section class="form-group no-padding" style="">

<div class="pull-left text-left col-sm-5">

@Html.LabelFor(m => m.FolderAttachmentRegulations)

</div>

<div class="pull-right col-sm-5">

@(

Html.Kendo()

.MultiSelectFor(m => m.FolderAttachmentRegulations)

.Placeholder("Select Associated Regulations")

.DataTextField("RegulationNumber")

.DataValueField("RegulationItemId")

.AutoClose(false)

.DataSource(ds =>

{

ds.Read(read => read.Action("GetRegulationItems", "RegulationItemsApi", new { caid = caid }));

})

)

</div>

</section>

}*@

@if (categorySettings.PlanReviews == true)

{

@* Regulation Numbers *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-12">

@Html.LabelFor(m => m.RegulationNumber)

</div>

<div class="pull-right col-sm-12" style="margin-top: 10px;">

@await Component.InvokeAsync("RegulationCheckboxWidget")

</div>

</section>

@* Municipal Numbers *@

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-12">

@Html.LabelFor(m => m.MunicipalNumber)

</div>

<div class="pull-right col-sm-12" style="margin-top: 10px;">

@await Component.InvokeAsync("MunicipalNumberCheckboxWidget")

</div>

</section>

}

<section class="form-group " style="padding-bottom: 3em;">

<div class="pull-left text-left col-sm-12">

@Html.LabelFor(m => m.AssociatedAttachmentIds)

</div>

<div class="pull-right col-sm-12" style="margin-top: 10px;">

@await Component.InvokeAsync("AssociatedAttachmentCheckboxWidget")

</div>

</section>

<div class="row col-md-12">

@* Folder Attachments *@

<div class="row col-md-12">

<section style="background-color: #3f51b5; padding-top: 3px; padding-bottom: 5px; padding-left: 5px;">

<h3 style="color:#fff;" class="no-padding">File Attachments</h3>

</section>

</div>

<section class="form-group no-padding" style="">

<script>

function onSuccess(e) {

if (e.operation == "upload") {

for (var i = 0; i < e.files.length; i++) {

var file = e.files[i].rawFile;

if (file) {

var reader = new FileReader();

reader.onloadend = function () {

$("<div class='product'><img src=" + this.result + " /></div>").appendTo($("#products"));

};

reader.readAsDataURL(file);

}

</script>

<div class="demo-section k-content wide">

<div class="wrapper">

<div id="products"></div>

<div class="dropZoneElement">

<div class="textWrapper">

<p><span>+</span>Add Image</p>

<p class="dropImageHereText">Drop image here to upload</p>

</div>

<script type="text/x-kendo-template" id="template">

<div class="product">

<img src="../shared/web/foods/#= name #" alt="#: name # image" />

</div>

</script>

<script id="fileTemplate" type="text/x-kendo-template">

<span class='k-progress'></span>

<div class='file-wrapper'>

<div style="display: flex;" class="attachmentsWrapper">

<div style="width: 50%">

<span class="file-icon k-file-extension-wrapper"><span class="k-file-extension">#=files[0].extension#</span><span class="k-file-state">uploaded</span></span>

<h4 class='file-heading file-name-heading'>Name: <span class="file-name">#=name#</span></h4>

<h4 class='file-heading file-size-heading'>Size: <span class="file-size">#=size#</span> bytes</h4>

<input type="hidden" name="attachmentId" value="" class="newFolderAttachmentId FolderAttachmentDocumentId" />

</div>

<div style="width: 50%;">

<select id="uploadAttachmentType" class="uploadType uploadAttachmentType" name="uploadType"></select>

</div>

<strong class="k-upload-status">

<button type='button' class='k-upload-action'></button>

@*<button type='button' class='k-upload-action'></button>*@

</strong>

</div>

</script>

@* Get the required info needed Create or Update an attached document *@

<script>

function getAttachmentInfo() {

debugger;

var attachmentId = $("#AttachmentId").val();

var fileName = $(".file-name").last().html();

var selected = $(".uploadAttachmentType").last().find(":selected").text();

return { attachmentId: attachmentId, fileName: fileName, caid: "@caid", documentType: selected };

}

</script>

<script>

function uploadComplete(e) {

/*Find the parent wrapper to update the record. */

var url = "@Url.Action("UpdateDocumentType", "FolderAttachmentUpload")";

$.post(url, getAttachmentInfo(), function (data) { })

.success(function (data) { })

.fail(function (data) { });

}

</script>

<script>

function uploadGetCaid(e) {

uploadSelect(e);

var attachmentId = $("#AttachmentId").val();

var output = { caid: "@caid", attachmentId: attachmentId };

console.log(output);

e.data = output;

}

function uploadSuccess(e) {

/* Success Event for Uploading the file. */

if (e.operation == "upload") {

var id = e.response.AttachmentId;

/* var attachmentId = $("#AttachmentId").data("kendoAutoComplete");

attachmentId.value(id);

attachmentId.trigger("change");*/

$("#AttachmentId").val(id).trigger("change");

/*Get the attachment ID. The controller will check to see if it is set or not. */

var attachmentId = $("#AttachmentId");

}

function getAttachmentId() {

return { attachmentId: $("#AttachmentId").val() };

}

</script>

@* Event for deleting the record. *@

<script>

function uploadRemove(e) {

var attachmentName = e.files[0].name;

var data = { attachmentId: getAttachmentInfo().attachmentId, fileName: attachmentName };

e.data = data;

}

</script>

@* Change Event for a folder attachments document type dropdown list change *@

<script>

$(document).on('change', '.uploadAttachmentType', function (e) {

var attachmentInfo = getAttachmentInfo();

/**

* Update the file name to THIS files name.

*/

var fileName = $(this).closest(".file-wrapper").find(".file-name").html();

/*

* Update the dropdown list values.

*/

var ddList = $(this).find('option:selected');

attachmentInfo.fileName = fileName;

attachmentInfo.documentType = ddList.text();

debugger;

var url = "@Url.Action("UpdateDocumentType", "FolderAttachmentUpload")";

$.post(url, attachmentInfo, function (data) { })

.success(function (data) { $.ShowNotification({ type:"success", title: "Document Type Changed" }); })

.fail(function (data) { $.ShowNotification({ type: "error", title: "Unable to Change Document Type" }); });

});

</script>

<script>

function uploadSelect(e) {

/*use jquery to get the list of attachment types. */

var url = "@Url.Action("GetAttachmentTypes", "AttachmentTypesApi")";

var ddlAttachmentType = $(".uploadAttachmentType").last();

$.get(url, function (data) {

})

.success(function (data) {

/*Loop through each one and append it to the drop down list.*/

ddlAttachmentType.empty();

$.each(data, function (index, attachmentType) {

var listItem = $("<option>", {

value: attachmentType.AttachmentTypeId,

text: attachmentType.AttachmentType

});

ddlAttachmentType.append(listItem);

});

ddlAttachmentType.val(1);

})

.fail(function (data) {

debugger;

});

}

</script>

@(Html.Kendo().Upload()

.Name("files")

.TemplateId("fileTemplate")

.Async(a => a

.Save("Save", "FolderAttachmentUpload")

.Remove("Remove", "FolderAttachmentUpload")

.AutoUpload(true)

)

.Events(e =>

{

e.Upload("uploadGetCaid");

e.Success("uploadSuccess");

e.Complete("uploadComplete");

e.Remove("uploadRemove");

})

.ShowFileList(true)

.DropZone(".dropZoneElement")

)

@* Template for existing attachments *@

<div class="col-sm-10 ">

<ul class="k-upload-files k-reset " id="ExistingFolderAttachmentDocuments">

<li class="k-file k-file-success documentWrapper" id="FolderAttachmentDocumentRecord" style="display: none;">

<div class="file-wrapper">

<div style="display: flex;" class="attachmentWrapper">

<div style="width: 50%; margin-right: 5px;" class="border-hover bold">

<span class="file-icon k-file-extension-wrapper">

<span class="k-file-extension">.jpg</span>

<span class="k-file-state">uploaded</span>

</span>

<h4 class="file-heading file-name-heading">Name: <span class="temp-file-name">7jWBoem.jpg</span></h4>

<h4 class="file-heading file-size-heading">Size: <span class="file-size">510514</span> bytes</h4>

<input type="hidden" name="attachmentId" value="31" class="folderAttachmentDocumentId">

</div>

<div style="width: 50%;">

<div style="width: 100%;">

Type: <span class="folderAttachmentDocumentType" style="font-weight:600;"></span>

</div>

<select class="uploadType existingUploadAttachmentType" name="uploadType"></select>

</div>

<strong class="k-upload-status">

<button type="button" class="k-upload-action k-button" style="display: inline-block;">

<span class="k-icon k-i-close k-i-x removeDocument" title="Remove" aria-label="Remove"></span>

</button>

</strong>

</div>

</li>

</ul>

</div>

</section>

</div>

</article>

</div>

<script>

$(document).ready(function () {

var grid = $("#gridFolderAttachments").data("kendoGrid");

$(".k-grid-update, .k-grid-cancel").click(function (e) {

grid.dataSource.read();

console.log("click");

});

$("[aria-label=Close]").click(function (e) {

console.log("click");

});

</script>

<script>

$(document).on("click", ".removeDocument, [title='Remove']", function (e) {

var document = $(this).closest(".documentWrapper");

debugger;

var documentId = document.attr("document_Id");

var urlRemoveDoc = "@Url.Action("RemoveAttachmentDocument", "FolderAttachmentsApi", new { documentId = "{documentId}" })";

urlRemoveDoc = urlRemoveDoc.replace("%7BdocumentId%7D", documentId);

$.get(urlRemoveDoc, function (data) { })

.success(function (data) {

console.log("successfully removed document");

document.hide();

})

.fail(function (data) {

console.log("failed to remove document");

});

</script>

and the error im getting can be seen in the attached image.

I am hoping for some insight on this issue.

thanks,

Andrew

3 Answers, 1 is accepted

answered on 13 Nov 2017, 11:16 AM

Hi Andrew,

The invalid template exception is usually shown when there are non-escaped hash characters (#) in the template. These can be in a jQuery selector, anchor tag, etc.

Please ensure that all # characters in the template are escaped and see how the behavior changes. If you would like more information on using templates with the Kendo components you would find the article below interesting.

https://docs.telerik.com/kendo-ui/framework/templates/overview

Regards,
Viktor Tachev
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.