I am using a master detail grid in Ajax mode with a client grid in a client template. If I don't include the client template, everything is fine. When I do include the client template, I get a syntax error for every line in the master grid. The syntax error is the ImageId (the model id) of the master grid. I can see no reference to it anywhere in the runtime code.
A second, somewhat related question is how do I reference items in the client grid? For instance when I am creating the client grid in the template, I can get the value of the ImageId from the master grid using "#=ImageId#'. However, if I try to reference the fields of the client grid data structure the same way I get an error saying it can't find the field. I am assuming this is because it is looking in the master grid data structure. How do I reference the client data structure's fields?
Thank you,
Kerry
The aspx is included below:
01.
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<
int
?>" %>
02.
<%@ Import Namespace="WellsFargo.NewsPub.Web.UI.Areas.Attachment.Models" %>
03.
<%
04.
var workflowUrl = Url.Content("~/" + Constants.Areas.Attachment + "/" + Constants.Controllers.Image + "/" + Constants.ImageController.ExecuteImageWorkflowCommand);
05.
%>
06.
<% Html.Kendo().Grid<
ImageModel
>()
07.
.Name("PublicationImagesGrid")
08.
.DataSource(dataSource => dataSource
09.
.Ajax()
10.
.Model(model => model.Id(i => i.ImageId))
11.
.Read(Constants.ImageController.ReadPublicationImages, Constants.Controllers.Image, new { publicationId = Model })
12.
.Destroy(destroy => destroy.Action(Constants.ImageController.DeleteImage, Constants.Controllers.Image))
13.
)
14.
.HtmlAttributes(new { @class = "image-grid" })
15.
.Columns(columns =>
16.
{
17.
columns.Bound(pub => pub.PublicationId).Hidden(true);
18.
columns.Bound(pub => pub.ImageId);
19.
columns.Bound(c => c.Thumbnail)
20.
.Title("Thumbnail")
21.
.Width(1)
22.
.ClientTemplate("<
img
src
=
'#= ThumbnailSrc #" + "'
alt
=
'#= Tag #'
/>");
23.
columns.Bound(pub => pub.ImageSortOrder).Title("Sort Order");
24.
columns.Bound(c => c.FileName)
25.
.Title("File Name")
26.
.Width(1);
27.
columns.Bound(c => c.Dimensions)
28.
.Width(1);
29.
columns.Bound(c => c.Tag);
30.
columns.Bound(c => c.Caption);
31.
columns.Bound(c => c.ImageId)
32.
.ClientTemplate("#= get_image_approval_control('"
33.
+ workflowUrl
34.
+ "', ImageId, 1, '"
35.
+ Constants.ImageController.ReadPublicationImages + "', "
36.
+ (int)DataConstants.ImageStatus.Approved + ", "
37.
+ (int)DataConstants.ImageStatus.Rejected + ", "
38.
+ (int)DataConstants.ImageStatus.ApprovalRequired + ") #")
39.
.Width(150)
40.
.Title("Status");
41.
columns.Command(command => command.Destroy());
42.
columns.Bound(c => c.Height).Hidden(true);
43.
})
44.
.ClientDetailTemplateId("child-image-template")
45.
.ToolBar(toolbar => toolbar.Template(() =>
46.
{ %> <
a
onclick='create_image(<%= Model %>)' class='k-button'>Add New Image</
a
> <% }))
47.
.Events(e => e
48.
.DataBound("image_grid_data_bound")
49.
)
50.
.Render();
51.
%>
52.
53.
<
script
id
=
"child-image-template"
type
=
"text/x-kendo-template"
>
54.
<%= Html.Kendo().Grid<
ChildImageDto
>()
55.
.Name("ChildImages_#=ImageId#")
56.
.DataSource(ds => ds.Ajax().Read(Constants.ImageController.ReadChildImages, Constants.Controllers.Image, new {parentImageIdStr = "#=ImageId#"}))
57.
.Columns(col => {
58.
col.Bound(i => i.ChildImageId);
59.
col.Bound(i => i.MimeType);
60.
col.Bound(i => i.Dimensions);
61.
col.Bound(i => i.BinarySrc).ClientTemplate("<
img
src
=
'#=BinarySrc#'
alt
=
'#=Tag#'
/>");
62.
})
63.
.ToClientTemplate() %>
64.
</
script
>
function
createNewItem() {
var
tree = $(
"#dvTree"
).data(
"kendoTreeView"
);
var
selected = tree.dataItem(tree.select());
var
newnode = { text:
'<new>'
, type:itemtype };
newelement = tree.append(newnode, $(tree.select()),
function
() { alert(
"success"
); });
console.log(newelement);
if
(newelement) {
tree.select(newelement);
tree.trigger(
"select"
, { node: newelement });
}
}
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
></
title
>
<
link
href
=
"Content/kendo/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"Content/kendo/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"Scripts/jquery.min.js"
></
script
>
<
script
src
=
"Scripts/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
class
=
"k-content"
>
<
div
id
=
"mydiv"
></
div
>
</
div
>
<
script
>
$(function () {
$("#mydiv").kendoScheduler({
height: 600
});
});
</
script
>
</
body
>
</
html
>
@(Html.Kendo().DropDownListFor(model => model.EmploymentId)
.OptionLabel("* Not Selected")
.DataTextField("Name")
.DataValueField("Id")
.BindTo(Model.Employments)
.Events(e => e.Select("EmploymentSelected")))
private
IEnumerable<ReqAssess> GetRequests()
{
var reqassess = reqAssessService.GetReqAssess();
return reqassess;
}
public
ActionResult Products_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(GetRequests().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
@(Html.Kendo().Grid(Model)
.Name(
"Grid")
.Columns(columns =>
{
columns.Bound(p => p.ReqId).Width(100).Groupable(
false).Title("Request ID").ClientTemplate(
"# if (Urgent == \"Y\") { #" +
"<div style=\"background-color: Red;\">#: ReqId #</div>" +
"# } else { #" +
"#: ReqId #" +
"# } #"
);
columns.Bound(p => p.CompId).Title(
"Company ID").Width(110);
columns.Bound(p => p.Facid).Title("Facility ID").Width(110);
columns.Bound(p => p.Mtrlcode).Title("Code").Width(90);
columns.Bound(p => p.Tradename).Title("Tradename").Width(170);
columns.Bound(p => p.Requested).Format("{0:dd/MM/yyyy:hh:mm:ss}").Width(110); ;
columns.Bound(p => p.DateDue).Format("{0:dd/MM/yyyy}").Title("Date due").Width(100); ;
columns.Bound(p => p.Completed).Format("{0:dd/MM/yyyy}").Title("Completed").Width(100); ;
columns.Bound(p => p.Status).Width(150);
columns.Bound(p => p.AssignedTo).Width(100);
})
.ClientDetailTemplateId(
"employeesTemplate")
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Selectable()
.Pageable(pager => pager
.Refresh(
true)
.PageSizes(new int[4] {10, 20, 30, 40}))
.ColumnMenu()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action(
"Products_Read", "InTray"))
.PageSize(30)
))