Detail Grid in Javascript not hitting Read function

[Joshua]

The code below does not hit the read function so the details shows every detail row for each of the outer rows.(There should only be one detail row per outer row) I am following this example here: ASP.NET MVC Grid Detail Template Demo | Telerik UI for ASP.NET MVC which I use basically the same syntax for it and for an unknown reason theirs works and mine doesnt. My Javascript console gives me a 500 error which doesnt provide me with any way to resolve. Ive commented out stuff in the outer grid as I populate in the get method anyway. Can someone please look into this?

Outer grid:

<div id="RelatedAppearances-scheduling" style="margin-right:8px;border:none;padding:0;color:black; padding-bottom: 20px;">
	<div id="RelatedAppearancesTopRowInfo" >
		<div id="RelatedAppearances-Grid" style="width:99%;">
		@Html.Kendo().Grid(Model.RelatedAppearanceList).Name("RelatedAppearancesGrid").Size(ComponentSize.Small).Editable(GridEditMode.PopUp).Resizable(r => r.Columns(true)).ToolBar(r =>
		{
			r.Create().Text("Add Appearance");
		}

		).Columns(col =>	{
						   col.Bound(c => c.FileNumber).Title("File Number").Width(175);
						   col.Bound(c => c.CourtDate).Title("Court Date").Width(150);
						   col.Bound(c => c.CourtTime).Title("Court Time").Width(150);
						   col.Bound(c => c.Purpose).Width(100);
						}).Sortable().DataSource(dataSource => dataSource
						.Ajax()
			                        // .Read(r => r.Url("/Appearances/SchedulingInformation?handler=ReadEntity").Data("forgeryToken"))
					        // .Update(r => r.Url("/Appearances/SchedulingInformation?handler=UpdateEntity").Data("forgeryToken"))
						// .Destroy(r => r.Url("/Appearances/SchedulingInformation?handler=DestroyEntity").Data("forgeryToken"))
						// .Model(model =>
						// {
						// 	model.Id(p => p.AppearanceID);
						// })
						).ClientDetailTemplateId("RelatedAppearancesDetail");
							</div>
						</div>
					</div>

 

Javascript detail grid:

<script id="RelatedAppearancesDetail" type="text/kendo-tmpl">
		 	@(Html.Kendo().Grid(Model.RelatedAppearanceList).Name("innergrid_#=AppearanceID#")
			      .Columns(columns =>
		        	{
				columns.Bound(o => o.AppearanceDetails.AppearanceJudge).Title("Judge").Width(80);
				columns.Bound(o => o.AppearanceDetails.AppearanceType).Title("Appearance Type").Width(80);
				columns.Bound(o => o.AppearanceDetails.Outcome).Title("Outcome").Width(80);
				columns.Bound(o => o.AppearanceDetails.ToTH).Title("To T & H").Width(80);
				})
				.DataSource(dataSource => dataSource
				.Ajax()
				.Read(read => read.Action("ReadRelatedAppearanceDetail", "Grid", new { AppearanceID = "#=AppearanceID#" })))
				.Sortable()
				.ToClientTemplate())
</script>

 

Razor method:

        public JsonResult ReadRelatedAppearanceDetail(int AppearanceID, [DataSourceRequest] DataSourceRequest request)
        {
            var curAppearance = RelatedAppearanceList.Where(a => a.AppearanceID == AppearanceID).FirstOrDefault();
            return new JsonResult(new[] { curAppearance }.ToDataSourceResult(request, ModelState));

        }

 

Related Appearance Model:

 public class RelatedAppearanceDTO
 {
     public int AppearanceID {  get; set; }

     public string FileNumber {  get; set; }

     public string CourtDate { get; set; }

     public string CourtTime { get; set; }

     public string Purpose {  get; set; }

     public string AppearanceType {  get; set; }

     public string CalendarRemarks {  get; set; }

     public string Outcome {  get; set; }

     public string OutcomeComments {  get; set; }

     public string ToTAndH {  get; set; }

     public RelatedAppearancesDetailModel AppearanceDetails { get; set; }

 }

 

 

Related Appearance Detail Model:

  public class RelatedAppearancesDetailModel
  {
      public int AppearanceID { get; set; }
      public string AppearanceJudge { get; set; }

      public string AppearanceType { get; set;}

      public string CalendarRemarks { get; set; }

      public string Outcome { get; set; }

      public string OutcomeComment { get; set; }

      public string ToTH { get; set; }

      public string Minutes { get; set; }

      public string Disposition { get; set; }


  }

[Ivaylo]

Hello Joshua,

Thank you for the details provided.

I have developed a sample application in which the Detail Grid functions as expected. Upon reviewing your implementation, I noticed that you are configuring the Grid's DataSource while also binding a property from the model to the Grid. These two approaches are mutually exclusive and cannot be used simultaneously—you must choose one. The sample application I created utilizes the model binding approach and is attached to this message.

Please review it and let me know if it meets your requirements. If not, feel free to provide additional details, and we will be glad to assist you further.

Regards,
Ivaylo
Progress Telerik