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
>
</
div
>
</
div
>
</
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
>
</
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
>
</
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