Hello,
Using the Fluent UI cshtml helpers, I am loading a Kendo UI window, using a template.
The template contains a grid, for which I utilise aggregates; namely the Sum.
When the window is activated on my page, I receive a javascript error "sum is undefined".
Note: the window is loading a grid of child elements to a parent row of data on the main page's grid. (Hierarchy).
In my investigations,
- the template loads the grid correctly and functions perfectly if I do not have aggregates
Any ideas guys?
Thanks,
Brendan
---- TEMPLATE ----
** for brevity, I cut out the .Add(), .Destroy() datasource calls
<script id="MaterialTraceItemsAdvancedTemplate" type="text/kendo-tmpl">
<div id="details-container">
<h4>#= Description #</h4>
@(Html.Kendo().Grid<TraceItem>().Name("grid_#=OID#").Columns(columns =>
{
columns.Bound(o => o.Cert).Width(70);
columns.Bound(o => o.Trace).Width(110);
columns.Bound(o => o.ExpectedQty).Width(110).ClientFooterTemplate("Sum: #=sum#");
columns.Command(command =>
{
command.Destroy();
command.Edit();
}).Width(110);
}).Editable(editable => editable.Mode(GridEditMode.InLine)).ToolBar(toolbar =>
{
toolbar.Create();
}).DataSource(dataSource => dataSource.Ajax()
.Batch(true)
.Model(model =>
{
model.Id(mt => mt.Id);
})
.Aggregates(aggregates =>
{
aggregates.Add(p => p.ExpectedQty).Sum();
})
.Read(read => read.Action("MrclItems_TraceItems", "Receiving", new { OID = "#=OID#" }))
.Events(events => events.Error("error_handler"))).Sortable().Scrollable().ToClientTemplate()
)
</div>
</script>
------ WINDOW
@(Html.Kendo().Window().Name("MaterialTraceItemsAdvanced")
.Title("Material Trace")
.Visible(false)
.Modal(true)
.Draggable(true).Width(800))
------ PARENT Grid command snippet
....
columns.Command(command => command.Custom("TraceItems").Click("grid_ShowDetails")).Width(100);
....
------ PARENT Grid invocation javascript
var materialTraceItemsAdvancedTemplate = kendo.template($("#MaterialTraceItemsAdvancedTemplate").html());
var dataItem;
function grid_ShowDetails(e, scope) {
e.preventDefault();
dataItem = scope.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#MaterialTraceItemsAdvanced").data("kendoWindow");
wnd.content(materialTraceItemsAdvancedTemplate(dataItem));
wnd.bind("activate", window_activate);
wnd.center().open();
}
function window_activate() {
var gridName = "#grid_" + dataItem.OID;
var grid = $(gridName).getKendoGrid();
grid.bind("edit", function (e) {
if (e.model.isNew() && !e.model.dirty) {
e.container
.find("input[name=Cert]")
.val(traceCertTemplate) //variable provided from _MrclItemsGridView
.change();
e.container
.find("input[name=Trace]")
.val(traceValueTemplate) //variable provided from _MrclItemsGridView
.change();
}
});
}
Using the Fluent UI cshtml helpers, I am loading a Kendo UI window, using a template.
The template contains a grid, for which I utilise aggregates; namely the Sum.
When the window is activated on my page, I receive a javascript error "sum is undefined".
Note: the window is loading a grid of child elements to a parent row of data on the main page's grid. (Hierarchy).
In my investigations,
- the template loads the grid correctly and functions perfectly if I do not have aggregates
Any ideas guys?
Thanks,
Brendan
---- TEMPLATE ----
** for brevity, I cut out the .Add(), .Destroy() datasource calls
<script id="MaterialTraceItemsAdvancedTemplate" type="text/kendo-tmpl">
<div id="details-container">
<h4>#= Description #</h4>
@(Html.Kendo().Grid<TraceItem>().Name("grid_#=OID#").Columns(columns =>
{
columns.Bound(o => o.Cert).Width(70);
columns.Bound(o => o.Trace).Width(110);
columns.Bound(o => o.ExpectedQty).Width(110).ClientFooterTemplate("Sum: #=sum#");
columns.Command(command =>
{
command.Destroy();
command.Edit();
}).Width(110);
}).Editable(editable => editable.Mode(GridEditMode.InLine)).ToolBar(toolbar =>
{
toolbar.Create();
}).DataSource(dataSource => dataSource.Ajax()
.Batch(true)
.Model(model =>
{
model.Id(mt => mt.Id);
})
.Aggregates(aggregates =>
{
aggregates.Add(p => p.ExpectedQty).Sum();
})
.Read(read => read.Action("MrclItems_TraceItems", "Receiving", new { OID = "#=OID#" }))
.Events(events => events.Error("error_handler"))).Sortable().Scrollable().ToClientTemplate()
)
</div>
</script>
------ WINDOW
@(Html.Kendo().Window().Name("MaterialTraceItemsAdvanced")
.Title("Material Trace")
.Visible(false)
.Modal(true)
.Draggable(true).Width(800))
------ PARENT Grid command snippet
....
columns.Command(command => command.Custom("TraceItems").Click("grid_ShowDetails")).Width(100);
....
------ PARENT Grid invocation javascript
var materialTraceItemsAdvancedTemplate = kendo.template($("#MaterialTraceItemsAdvancedTemplate").html());
var dataItem;
function grid_ShowDetails(e, scope) {
e.preventDefault();
dataItem = scope.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#MaterialTraceItemsAdvanced").data("kendoWindow");
wnd.content(materialTraceItemsAdvancedTemplate(dataItem));
wnd.bind("activate", window_activate);
wnd.center().open();
}
function window_activate() {
var gridName = "#grid_" + dataItem.OID;
var grid = $(gridName).getKendoGrid();
grid.bind("edit", function (e) {
if (e.model.isNew() && !e.model.dirty) {
e.container
.find("input[name=Cert]")
.val(traceCertTemplate) //variable provided from _MrclItemsGridView
.change();
e.container
.find("input[name=Trace]")
.val(traceValueTemplate) //variable provided from _MrclItemsGridView
.change();
}
});
}