Below is the kendo ui nested grid sample code and I highlighted the code which is the issue. Here I am trying to reference the nested grid inside a parent grid, but getting undefined exception. Not sure what I am doing wrong here.
var filterWorkOrderBundleDetails = function (DetailId) {
var control = $("#grid_" + DetailId).data("kendoGrid"); //(undefined): Not able to reference nested grid.
//Todo
return {
WorkOrderDetailId: DetailId
}
}
@(Html.Kendo().Grid<PM.Entities.Model.sp_Sel_WorkOrderDetailByWorkOrderNo_Result>()
.Name("WorkOrderDetailGrid")
.Columns(columns =>
{
columns.Bound(p => p.WorkOrderDetailNo).Title("Order Detail No").Filterable(e => e.Extra(false)).Width(80);
columns.Bound(p => p.Description1).Title(productColumnTitle).Filterable(e => e.Extra(false)).Width(200);
columns.Bound(p => p.AccountDetails).Title("Account").Filterable(e => e.Extra(false)).Width(200);
columns.Bound(p => p.UnitPriceMultiplier).Title("Unit Price").Filterable(e => e.Extra(true)).Width(100).ClientTemplate("$#:kendo.toString(UnitPriceMultiplier, '" + @decimalFormat + "')#");
columns.Bound(p => p.PartnerShare).Title("Partner Share").Filterable(e => e.Extra(true)).Width(100);
columns.Bound(p => p.TelcoShare).Title(userSession.TenantName + " Share").Filterable(e => e.Extra(true)).Width(100);
columns.Bound(p => p.Discount).Title("Adjustment").Filterable(e => e.Extra(true)).Width(100);
columns.Bound(p => p.Description).Title("Description").Filterable(e => e.Extra(true)).Width(200);
})
.ClientDetailTemplateId("rowDetailTemplate")
.DataSource(ds => ds
.Ajax()
.Read(read => read.Action("GetAppWorkOrderDetails1", "WorkOrder").Data("window.pm.order.tracking.filterWorkOrderDetails"))
.PageSize(PageSize)
)
.NoRecords(NoRecordFound)
.AutoBind(true)
.Events(e => e.DataBound("window.pm.order.tracking.onDataBound"))
.Pageable(page => page.PageSizes(PageSizes).Messages(msg => msg.Display("{0} - {1} of {2:n0} items")))
.Scrollable(a => a.Height("auto"))
.Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
.Resizable(e => e.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
)
</div>
<script id="rowDetailTemplate" type="text/x-kendo-template">
#if (WorkOrderDetailId != null){#
@(Html.Kendo().Grid<PM.Entities.Model.sp_Sel_WorkOrderDetailByWorkOrderNo_BundleItems_Result>()
.Name("grid_#=WorkOrderDetailId#")
.Columns(columns =>
{
columns.Bound(o => o.WorkOrderNo).Title("Order").Width(80);
columns.Bound(o => o.WorkOrderDetailNo).Title("Order Detail No").Width(80);
columns.Bound(o => o.Partner).Title("Partner").Width(120);
columns.Bound(o => o.BillChargeCode).Title("Charge Code").Width(80);
columns.Bound(o => o.AccountDetails).Title("Account").Width(120);
columns.Bound(p => p.UnitPriceMultiplier).Title("Unit Price").Filterable(e => e.Extra(true)).Width(100).ClientTemplate("$\\\\#:kendo.toString(UnitPriceMultiplier, '" + @decimalFormat + "')\\\\#");
columns.Bound(p => p.Quantity).Title("Quantity").Filterable(e => e.Extra(true)).Width(100);
columns.Bound(p => p.PartnerShare).Title("Partner Share").Filterable(e => e.Extra(true)).Width(100);
columns.Bound(p => p.TelcoShare).Title(userSession.TenantName + " Share").Filterable(e => e.Extra(true)).Width(100);
columns.Bound(p => p.Discount).Title("Adjustment").Filterable(e => e.Extra(true)).Width(100);
columns.Bound(o => o.Description).Title("Description").Width(120);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(PageSize)
.Read(read => read.Action("GetAppWorkOrderBundleDetails", "WorkOrder").Data("window.pm.order.tracking.filterWorkOrderBundleDetails('#=WorkOrderDetailId#')"))
)
.Pageable()
.Scrollable(a => a.Height("auto"))
.Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
.Resizable(e => e.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.ToClientTemplate()
)
#}else{ }#
</script>
Please help me!