Display Foreign Key Field in Responsive Column Template

Question

I have a kendo grid with fields as below:

@(Html.Kendo().Grid<MyApp.Models.FlightLog>()
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(p => p.FlightLogID).Visible(false);
    columns.Bound(p => p.FlightDate).Format("{0:d}").Media("(min-width: 450px)");
    columns.ForeignKey(p => p.AircraftID, @Model.Aircraft, "AircraftID", "Registration").Title("Aircraft").EditorTemplateName("ComboBox").Media("(min-width: 450px)");
    columns.ForeignKey(p => p.PersonID, @Model.Person, "PersonID", "FullName").Title("Pilot").EditorTemplateName("ComboBox").Media("(min-width: 450px)");
    columns.ForeignKey(p => p.OrganisationID, @Model.Organisation, "OrganisationID", "Name").Title("Client").EditorTemplateName("ComboBox").Media("(min-width: 450px)");
    columns.Bound(p => p.FlightTime).Format("{0:n1}").Media("(min-width: 450px)");
    columns.Bound(p => p.Starts).Media("(min-width: 450px)");
    columns.Bound(p => p.Landings).Media("(min-width: 450px)");
    columns.Bound(p => p.Route).Media("(min-width: 450px)");
    columns.Bound(p => p.TaskNumber).Media("(min-width: 450px)");
    columns.Bound(p => p.Locked).Media("(min-width: 450px)").Visible(false);
    columns.Template("#=resColTemplate(data)#").Title("Trip Record").Media("(max-width: 450px)");    

And a responsive column template:

<script id="responsive-column-template" type="text/x-kendo-template">
    <p class="col-template-val"><strong>Date: </strong>#=kendo.toString(FlightDate, "dd/MM/yyyy")#</p>
    <p class="col-template-val"><strong>Registration: </strong>#=data.AircraftID#</p>
</script>

Main part of Model:

public class IndexModel : PageModel
{
    public IndexModel(ApplicationDbContext context)
    {
        _context = context;
    }

   private readonly ApplicationDbContext _context;

   public IEnumerable<Models.Aircraft> Aircraft { get; set; }

   public IEnumerable<Models.Person> Person { get; set; }

   public IEnumerable<Models.Organisation> Organisation { get; set; }

   public async Task OnGet()
   {
       Aircraft = await _context.Aircraft.AsNoTracking().ToListAsync();
       Person = await _context.Person.AsNoTracking().ToListAsync();
       Organisation = await _context.Organisation.AsNoTracking().ToListAsync();
   }
   public async Task<IActionResult> OnPostRead([DataSourceRequest] DataSourceRequest request)
   {
       var flightLogs = await _context.FlightLog.AsNoTracking().ToList().ToDataSourceResultAsync(request);

       return new JsonResult(flightLogs);
   }
....

Instead of the AircraftID field, I would like to display Registration from the ForeignKey field.

Is that possible?

Answer 1

You can access the ForeignKey column data through the "values" property of the Grid columns. For example:

<script id="responsive-column-template" type="text/x-kendo-template">
    # var foreignKeyColData = $("\\#grid").getKendoGrid().columns[2].values; # // Replace "2" with the index of the ForeignKey column
    # var getvalue = $.grep(foreignKeyColData, function(indx, item){ return (indx.value == data.AircraftID) });#
    <p class="col-template-val"><strong>Date: </strong>#=kendo.toString(FlightDate, "dd/MM/yyyy")#</p>
    <p class="col-template-val"><strong>Registration: </strong>#=getvalue[0].text#</p>
</script>