Context object needed for ClientDetailTemplate

[DoomerDGR8]

Hi!

I have this scenario where I want to forward the current model's sub-object as a model to a DisplayTemplate within the Grid's ClientDetailTemplate: Checkout the first Tab of the TabStrip in the ClientDetailTemplate

Main View:

@(Html.Kendo().Grid(Model)
      .Name("gridLetters")
      .Columns(columns =>
      {
	      columns.Bound(p => p.Id).ClientTemplate("<a href='" + Url.Action("View", "Letter", new { letterId = "#:Id#" }) + "'>#=Id#</i></a>");
	      columns.Bound(p => p.Subject);
	      columns.Bound(p => p.CompanyName).Title("Company");
	      columns.Bound(p => p.BrandName).Title("Brand");
	      columns.Bound(p => p.Location.Name).Title("Location");
	      columns.Bound(p => p.LetterType.Name).Title("RL Type");	      
      })
      .ToolBar(toolbar =>
      {
	      toolbar.Search();
      })
      .Sortable()
      .Navigatable()
      .Resizable(r => r.Columns(true))
      .Pageable(pageable => pageable
	                .Refresh(true)
	                .PageSizes(true)
	                .ButtonCount(5))
      .Filterable()
      .Scrollable()
      .ClientDetailTemplateId("detailTemplate")
      .HtmlAttributes(new { style = "height:430px;" })
      .DataSource(dataSource => dataSource
	                  .Ajax()
	                  .Sort(x => x.Add("Id").Descending())
	                  .PageSize(20)
	                  .ServerOperation(false)
	  ))

@section Scripts {
	<script id="detailTemplate" type="text/kendo-tmpl">
	    @(Html.Kendo().TabStrip()
	          .Name("tabStrip_#=Id#")
	          .SelectedIndex(0)
	          .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
	          .Items(items =>
	          {
		          items.Add().Text("History").Content(@<text>@Html.DisplayFor(m => m.History, "LetterHistory")</text>);
		          items.Add().Text("Details").Content("");
	          }).ToClientTemplate())
	</script>
}

Above, the model for the main grid is an IList of my objects. Each object has a History property of type

BusApp.Domain.Models.BusinessObjects.LetterActionHistoryFlatModel

I need to get that property passed on as a model for the DisplayFor

LetterHistory.cshtml

@model IList<BusApp.Domain.Models.BusinessObjects.LetterActionHistoryFlatModel>

@(Html.Kendo().Grid(Model)
      .Name("gridLetterHistory")
      .Columns(columns =>
      {
	      columns.Bound(p => p.ActionStamp).Title("Stamp").Format("{0:dd-MMM-yyyy}");
	      columns.Bound(p => p.LetterActionName).Title("Action");
	      columns.Bound(p => p.ActionTakenByName).Title("Taken By");
      })
      .Navigatable()
      .Resizable(r=>r.Columns(true))
      .Pageable(pageable => pageable
	                .Refresh(true)
	                .PageSizes(true)
	                .ButtonCount(10))
      .Filterable()
      .Scrollable()
      .DataSource(dataSource => dataSource
	                  .Ajax()
	                  .Sort(x => x.Add("ActionStamp").Descending())
	                  .PageSize(20)
	                  .ServerOperation(false)
	  )
	)

Regrds.

[DoomerDGR8]

Still waiting for a solution...

[Mihaela]

Hi Hassan,

Generally, the detail Grid template is a Kendo template, where you can access the master Grid data with JavaScript. The Model property "History" cannot be passed by using JavaScript to the DisplayFor() method. Having this in mind, to achieve the desired result, I would suggest the following approach:

• Use the LoadContentFrom() method of the TabStrip to load the "LetterHistory" View:

<script id="detailTemplate" type="text/kendo-tmpl">
	    @(Html.Kendo().TabStrip()
	          .Name("tabStrip_#=Id#")
	          .SelectedIndex(0)
	          .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
	          .Items(items =>
	          {
		          items.Add().Text("History").LoadContentFrom("GetLetterHistory","ControllerName", new { masterGridId = "#=Id#" });
	          }).ToClientTemplate())
</script>

• Get the Id of the master Grid record through the query string and filter the data on the server to get the respective "History" collection.

public IActionResult GetLetterHistory()
{
            string recordID = HttpContext.Request.Query["masterGridId"];
            var filteredData = masterGridDataCollection.Where(x => x.Id== Int32.Parse(recordID)).SelectMany(f => f.History).ToList();
            return PartialView("LetterHistory", filteredData);
}

I am attaching a runnable sample that demonstrates this solution.

I hope that helps.

Regards, Mihaela Progress Telerik

[DoomerDGR8]

My partial view is called the same LetterHistory.cshtml but it is in the sub-folder DisplayTemplates. This fails to load. Do I have to have a normal view and not a DisplayTemplate?

[DoomerDGR8]

Also, can I have a loader to show the brief loading for the template?

[Mihaela]

You could pass the full path to the "LetterHistory.cshtml" in the PartialView() method. For example:

 return PartialView("~/Views/DisplayTemplates/LetterHistory.cshtml", filteredData);

Regarding the loading indicator, you can handle the DetailExpand event of the master Grid and use the kendo.ui.progress() method to display the overlay with a loading image:

<script>
    function onDetailExpand(e) {
        displayLoading($("#grid"));
    }

    function displayLoading(target) {
        var element = $(target);
        kendo.ui.progress(element, true);
        setTimeout(function(){
            kendo.ui.progress(element, false);
        }, 2000);        
    }
</script>

Also, check out the following KB, where a loading indicator is rendered over a Window:

https://docs.telerik.com/kendo-ui/knowledge-base/display-loading-overlay