multiple grids, each with detail templates giving error

[Joey]

I have two grids, each with a detail template, all pulling from different data sources.  

If I comment out one or the other, I get no errors on either.  If have them both render, the second grid gives an error 'PaymentId' is not defined when try to expand the row into detail.  There is no PaymentId in any of the code for the second grid.  I'm including the code for both grids is below.  

Any help is greatly appreciated as I've been trying to hunt it down for hours but having no luck.

@model Domain.Loan

 

 

@(Html.Kendo().Grid<AmortizationScheduleGridModel>()

      .Name("AmortizationScheduleGrid")

      .Columns(columns =>

          {

              columns.Bound(p => p.AmortizationLineId).Visible(false);

              columns.Bound(p => p.LineNumber);

              columns.Bound(p => p.PrincipalPaid).Title("Principal").Format("{0:c}")

                     .ClientTemplate("# if (!IsPrincipalSatisfied) { #" +

                                     "<span class='not-satisfied'>" + "#=PrincipalPaid#" + "</span>" + "<span class='expected'> (#=PrincipalExpected#)</span>" +

                                     "# } else { #" +

                                     "<span class='satisfied'>" + "#=PrincipalPaid#" + "</span>" + " <span class='expected'>(#=PrincipalExpected#)</span>" +

                                     "# } #")

                     .ClientFooterTemplate("<b>#=sum#</b><input id='pmtTotal' type='hidden' value='#=sum#' />");

              columns.Bound(p => p.InterestPaid).Format("{0:c}");

              columns.Bound(p => p.LateFeesPaid).Format("{0:c}");

              columns.Bound(p => p.SpecialFeesPaid).Format("{0:c}");

              columns.Bound(p => p.SpecialFeesComments);

              columns.Bound(p => p.AmortizationPrincipalBalance);

              columns.Bound(p => p.ActualPrincipalBalance);

               

          })

          .ClientDetailTemplateId("paymentApplicationTemplate")

      .Sortable()

      .Scrollable()

      .DataSource(dataSource => dataSource

                                    .Ajax()

                                    .Aggregates(agg =>

                                        {

                                            agg.Add(al => al.PrincipalPaid).Sum();

                                        })

                                    .Read(read => read.Action("CustomerAmortizationScheduleRead", "Payments", new { loanId = Model.Id }))

      )

      .Events(ev => ev.DataBound("amoritzationDataBound"))

      .ToolBar(tb =>

                {

                    tb.Custom().Action<PaymentsController>(pc => pc.PrintLoanPayments(Model.Id)).Text("Print").Name("Print");

                    tb.Template("<button type='button' class='k-button k-button-icontext' onclick='toggleAmortizationPayments()'>Toggle Open</button>");

                })

      )

 

<script id="paymentApplicationTemplate" type="text/kendo-tmpl">

    @(Html.Kendo().Grid<PaymentApplicationModel>()

            .Name("paymentApplication_#=AmortizationLineId#")

            .Columns(columns =>

            {

                columns.Bound(p => p.PaymentApplicationId).Visible(false);

                columns.Bound(p => p.DueDate).Title("Due").Format("{0:MM/dd/yyyy}");

                columns.Bound(p => p.AmortizationLineNumber).Title("Line");

                columns.Bound(p => p.PrincipalApplied).Title("Principal").Format("{0:c}")

                        .ClientTemplate("\\# if (!IsPrincipalSatisfied) { \\#" +

                                  "<span class='not-satisfied'>" + "\\#=PrincipalApplied\\#" + "</span>" + "<span class='expected'> (\\#=PrincipalExpected\\#)</span>" +

                                  "\\# } else { \\#" +

                                  "<span class='satisfied'>" + "\\#=PrincipalApplied\\#" + "</span>" + " <span class='expected'>(\\#=PrincipalExpected\\#)</span>" +

                                  "\\# } \\#");

                columns.Bound(p => p.InterestApplied).Title("Interest").Format("{0:c}")

                    .ClientTemplate("\\# if (!IsInterestSatisfied) { \\#" +

                                  "<span class='not-satisfied'>" + "\\#=InterestApplied\\#" + "</span>" + "<span class='expected'> (\\#=InterestExpected\\#)</span>" +

                                  "\\# } else { \\#" +

                                  "<span class='satisfied'>" + "\\#=InterestApplied\\#" + "</span>" + " <span class='expected'>(\\#=InterestExpected\\#)</span>" +

                                  "\\# } \\#");

                columns.Bound(p => p.LateFeesApplied).Title("Late").Format("{0:c}")

                    .ClientTemplate("\\# if (!IsLateFeeSatisfied) { \\#" +

                                  "<span class='not-satisfied'>" + "\\#=LateFeesApplied\\#" + "</span>" + "<span class='expected'> (\\#=LateFeesExpected\\#)</span>" +

                                  "\\# } else { \\#" +

                                  "<span class='satisfied'>" + "\\#=LateFeesApplied\\#" + "</span>" + " <span class='expected'>(\\#=LateFeesExpected\\#)</span>" +

                                  "\\# } \\#");

                columns.Bound(p => p.SpecialFeesApplied).Title("Special Fees").Format("{0:c}").ClientTemplate("\\# if (!IsSpecialFeeSatisfied) { \\#" +

                                  "<span class='not-satisfied'>" + "\\#=SpecialFeesApplied\\#" + "</span>" + "<span class='expected'> (\\#=SpecialFeesExpected\\#)</span>" +

                                  "\\# } else { \\#" +

                                  "<span class='satisfied'>" + "\\#=SpecialFeesApplied\\#" + "</span>" + " <span class='expected'>(\\#=SpecialFeesExpected\\#)</span>" +

                                  "\\# } \\#");

            })

            .DataSource(dataSource => dataSource

                .Ajax()

                .PageSize(5)

                .Read(read => read.Action("PaymentApplicationsReadByAmortizationLine", "Payments", new { amortizationLineId = "#=AmortizationLineId#" }))

            )

            .ToClientTemplate()

    )

</script>

 

 

 

 

<script type="text/javascript">

    var amortizationPaymentsExpanded = false;

    function amoritzationDataBound() {

         

    }

    function toggleAmortizationPayments() {

        

        var paymentHistoryGrid = $("#AmortizationScheduleGrid").data("kendoGrid");

         

        if (!amortizationPaymentsExpanded) {

            paymentHistoryGrid.expandRow(paymentHistoryGrid.tbody.find("tr.k-master-row"));

            amortizationPaymentsExpanded = true;

        } else {

            paymentHistoryGrid.collapseRow(paymentHistoryGrid.tbody.find("tr.k-master-row"));

            amortizationPaymentsExpanded = false;

        }

    }

</script>

-- Second Grid ---

@model Tristate.Domain.Loan

<style>
    .k-grid td {
        font-size: 12px;
    }
</style>

@(Html.Kendo().Grid<AmortizationScheduleGridModel>()
      .Name("AmortizationScheduleGrid")
      .Columns(columns =>
          {
              columns.Bound(p => p.AmortizationLineId).Visible(false);
              columns.Bound(p => p.LineNumber);
              columns.Bound(p => p.PrincipalPaid).Title("Principal").Format("{0:c}")
                     .ClientTemplate("# if (!IsPrincipalSatisfied) { #" +
                                     "<span class='not-satisfied'>" + "#=PrincipalPaid#" + "</span>" + "<span class='expected'> (#=PrincipalExpected#)</span>" +
                                     "# } else { #" +
                                     "<span class='satisfied'>" + "#=PrincipalPaid#" + "</span>" + " <span class='expected'>(#=PrincipalExpected#)</span>" +
                                     "# } #")
                     .ClientFooterTemplate("<b>#=sum#</b><input id='pmtTotal' type='hidden' value='#=sum#' />");
              columns.Bound(p => p.InterestPaid).Format("{0:c}");
              columns.Bound(p => p.LateFeesPaid).Format("{0:c}");
              columns.Bound(p => p.SpecialFeesPaid).Format("{0:c}");
              columns.Bound(p => p.SpecialFeesComments);
              columns.Bound(p => p.AmortizationPrincipalBalance);
              columns.Bound(p => p.ActualPrincipalBalance);

          })
          .ClientDetailTemplateId("paymentApplicationTemplate")
      .Sortable()
      .Scrollable()
      .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Aggregates(agg =>
                                        {
                                            agg.Add(al => al.PrincipalPaid).Sum();
                                        })
                                    .Read(read => read.Action("CustomerAmortizationScheduleRead", "Payments", new { loanId = Model.Id }))
      )
      .Events(ev => ev.DataBound("amoritzationDataBound"))
      .ToolBar(tb =>
                {
                    tb.Custom().Action<PaymentsController>(pc => pc.PrintLoanPayments(Model.Id)).Text("Print").Name("Print");
                    tb.Template("<button type='button' class='k-button k-button-icontext' onclick='toggleAmortizationPayments()'>Toggle Open</button>");
                })
      )

<script id="paymentApplicationTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<PaymentApplicationModel>()
            .Name("paymentApplication_#=AmortizationLineId#")
            .Columns(columns =>
            {
                columns.Bound(p => p.PaymentApplicationId).Visible(false);
                columns.Bound(p => p.DueDate).Title("Due").Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.AmortizationLineNumber).Title("Line");
                columns.Bound(p => p.PrincipalApplied).Title("Principal").Format("{0:c}")
                        .ClientTemplate("\\# if (!IsPrincipalSatisfied) { \\#" +
                                  "<span class='not-satisfied'>" + "\\#=PrincipalApplied\\#" + "</span>" + "<span class='expected'> (\\#=PrincipalExpected\\#)</span>" +
                                  "\\# } else { \\#" +
                                  "<span class='satisfied'>" + "\\#=PrincipalApplied\\#" + "</span>" + " <span class='expected'>(\\#=PrincipalExpected\\#)</span>" +
                                  "\\# } \\#");
                columns.Bound(p => p.InterestApplied).Title("Interest").Format("{0:c}")
                    .ClientTemplate("\\# if (!IsInterestSatisfied) { \\#" +
                                  "<span class='not-satisfied'>" + "\\#=InterestApplied\\#" + "</span>" + "<span class='expected'> (\\#=InterestExpected\\#)</span>" +
                                  "\\# } else { \\#" +
                                  "<span class='satisfied'>" + "\\#=InterestApplied\\#" + "</span>" + " <span class='expected'>(\\#=InterestExpected\\#)</span>" +
                                  "\\# } \\#");
                columns.Bound(p => p.LateFeesApplied).Title("Late").Format("{0:c}")
                    .ClientTemplate("\\# if (!IsLateFeeSatisfied) { \\#" +
                                  "<span class='not-satisfied'>" + "\\#=LateFeesApplied\\#" + "</span>" + "<span class='expected'> (\\#=LateFeesExpected\\#)</span>" +
                                  "\\# } else { \\#" +
                                  "<span class='satisfied'>" + "\\#=LateFeesApplied\\#" + "</span>" + " <span class='expected'>(\\#=LateFeesExpected\\#)</span>" +
                                  "\\# } \\#");
                columns.Bound(p => p.SpecialFeesApplied).Title("Special Fees").Format("{0:c}").ClientTemplate("\\# if (!IsSpecialFeeSatisfied) { \\#" +
                                  "<span class='not-satisfied'>" + "\\#=SpecialFeesApplied\\#" + "</span>" + "<span class='expected'> (\\#=SpecialFeesExpected\\#)</span>" +
                                  "\\# } else { \\#" +
                                  "<span class='satisfied'>" + "\\#=SpecialFeesApplied\\#" + "</span>" + " <span class='expected'>(\\#=SpecialFeesExpected\\#)</span>" +
                                  "\\# } \\#");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .Read(read => read.Action("PaymentApplicationsReadByAmortizationLine", "Payments", new { amortizationLineId = "#=AmortizationLineId#" }))
            )
            .ToClientTemplate()
    )
</script>




<script type="text/javascript">
    var amortizationPaymentsExpanded = false;
    function amoritzationDataBound() {

    }
    function toggleAmortizationPayments() {

        var paymentHistoryGrid = $("#AmortizationScheduleGrid").data("kendoGrid");

        if (!amortizationPaymentsExpanded) {
            paymentHistoryGrid.expandRow(paymentHistoryGrid.tbody.find("tr.k-master-row"));
            amortizationPaymentsExpanded = true;
        } else {
            paymentHistoryGrid.collapseRow(paymentHistoryGrid.tbody.find("tr.k-master-row"));
            amortizationPaymentsExpanded = false;
        }
    }
</script>

[Joey]

I should have mentioned that the key tying the first grid and it's detail template together is 'PaymentId'.

The second grid is using a different key, but is throwing the error when I try to expand the detail template: Uncaught ReferenceError: PaymentId is not defined