I have a nested grid in a client template. Everything on my pages works great. I would like to refresh the parent grid when the nested gid is updated. The only way I have found to do this is to use the RequestEnd event on the nested grid, so I defined it in the gird's data source:
@(Html.Kendo().Grid<Campaign>()
.Name("grid_#=Id#")
.Columns(columns =>
{
columns.Bound(p => p.Name).Width(200);
columns.Bound(p => p.MailDate1).Width(150).Title("Mail Date");
columns.Bound(p => p.ProjectedQuantityMailed).Width(100).Title("Quantity");
columns.Bound(p => p.ProjectedPercentReturn).Width(50).Title("Percent Return");
columns.Bound(p => p.ProjectedNumberOfGifts).Width(50).Title("Gifts");
columns.Bound(p => p.ProjectedAverageGiftAmount).Width(50).Title("Average Gift");
columns.Bound(p => p.ProjectedGrossIncome).Width(100).Title("Gross Income");
columns.Bound(p => p.ProjectedGrossIncomePerThousand).Width(50).Title("Gross Income/M");
columns.Bound(p => p.ProjectedTotalCost).Width(100).Title("Cost");
columns.Bound(p => p.ProjectedTotalCostPerThousand).Width(100).Title("Cost/M");
columns.Bound(p => p.ProjectedNetIncome).Width(100).Title("Net");
columns.Bound(p => p.ProjectedNetIncomePerThousand).Width(100).Title("Net/M");
columns.Bound(p => p.ProjectedNetIncomePerDonor).Width(100).Title("Net/Donor");
columns.Bound(p => p.ProjectedCostPerDollarRaised).Width(100).Title("Per Dollar Raised").Hidden(true);
columns.Bound(p => p.ProjectedMonthsToRecoupCost).Width(100).Title("Recoup Months").Hidden(true);
columns.Bound(p => p.ProjectedMailshopCost).Width(100).Title("Mail Shop").Hidden(true);
columns.Bound(p => p.ProjectedPostageCost).Width(100).Title("Postage").Hidden(true);
columns.Bound(p => p.ProjectedCopyCost).Width(100).Title("Copy").Hidden(true);
columns.Bound(p => p.ProjectedProofreaderCost).Width(100).Title("Proof Reader").Hidden(true);
columns.Bound(p => p.ProjectedArtCost).Width(100).Title("Art").Hidden(true);
columns.Bound(p => p.ProjectedListCost).Width(100).Title("List").Hidden(true);
columns.Bound(p => p.ProjectedProductionManagementFee).Width(100).Title("Management").Hidden(true);
columns.Bound(p => p.ProjectedMergePurgeCost).Width(100).Title("Merge Purge").Hidden(true);
columns.Bound(p => p.ProjectedPrintingCost).Width(100).Title("Printing").Hidden(true);
columns.Bound(p => p.ProjectedQctCost).Width(100).Title("QCT").Hidden(true);
})
.ToolBar(toolbar =>
{
toolbar.Custom().Text("CAMPAIGNS").HtmlAttributes(new { id = "btnCampaignLabel" });
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Navigatable()
//.ClientDetailTemplateId("panelTemplate")
.ColumnMenu(menu =>
{
menu.ComponentType("modern");
menu.Columns(columns =>
{
columns
.Sort("asc")
.Groups(groups =>
{
groups.Add().Title("Summary Costs").Columns(new List<string> { "ProjectedTotalCost" }); ;
groups.Add().Title("Detailed Costs")
.Columns(new List<string> { "ProjectedMailshopCost", "ProjectedPostageCost","ProjectedCopyCost","ProjectedProofreaderCost"
,"ProjectedArtCost","ProjectedListCost","ProjectedProductionManagementFee","ProjectedMergePurgeCost","ProjectedPrintingCost"
,"ProjectedQctCost"});
});
});
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.FiscalYearId).Editable(false);
model.Field(p => p.ProjectedNumberOfGifts).Editable(false);
model.Field(p => p.ProjectedGrossIncomePerThousand).Editable(false);
model.Field(p => p.ProjectedNetIncomePerThousand).Editable(false);
model.Field(p => p.ProjectedNetIncome).Editable(false);
model.Field(p => p.ProjectedGrossIncome).Editable(false);
model.Field(p => p.ProjectedTotalCostPerThousand).Editable(false);
model.Field(p => p.ProjectedCostPerDollarRaised).Editable(false);
model.Field(p => p.ProjectedNetIncomePerDonor).Editable(false);
})
.Read(read => read.Action("ByProgram", "Campaign", new { programId = "#=Id#" }))
.Create(update => update.Action("CreateFromNestedGrid", "Campaign", new { programId = "#=Id#" }))
.Update(update => update.Action("Update", "Campaign"))
.Destroy(update => update.Action("Delete", "Campaign"))
.Events(events => events.RequestEnd("onCampaignRequestEnd"))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
I have a function defined to handle the event:
<script type="text/javascript">
function onCampaignRequestEnd(e) {
console.log('Campaign grid on request end");
var programGrid = $("#programGrid").data("kendoGrid");
programGrid.dataSource.read();
}
</script>
No matter where I put this script on the page, I receive this error when expanding the parent grid. I even tried adding it the parent grid and received the same error. I have similar scripts defined in outer pages and have never see this happen:
3383:1 Uncaught ReferenceError: onCampaignRequestEnd is not defined
at eval (eval at <anonymous> (jquery.min.js:2:2668), <anonymous>:1:14151)
at Object.syncReady (kendo.aspnetmvc.js:983:21)
at eval (eval at <anonymous> (jquery.min.js:2:2668), <anonymous>:1:7)
at eval (<anonymous>)
at jquery.min.js:2:2668
at Function.globalEval (jquery.min.js:2:2679)
at Ha (jquery.min.js:3:21263)
at n.fn.init.after (jquery.min.js:3:23226)
at n.fn.<computed> [as insertAfter] (jquery.min.js:3:24511)
at init._toggleDetails (kendo.all.js:312399:21)
1 Answer, 1 is accepted
Hello Martin,
Inspecting the code provided I do not see anything obvious that might cause the reported behavior. I tried to reproduce the behavior by adding a RequestEnd event handler to the DataSource of a Grid in a ClientTemplate and the event handler fires as expected, as you can see in this REPL.
I'm obviously missing something, so would it be possible to update the example so the behavior is reproducible and send it back to me for further review.
Regards,
Aleksandar
Progress Telerik