Display Foreign Key Field in Responsive Column Template

[Reafidy]

I have a kendo grid with fields as below:

columns.Bound(p => p.FlightID).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)");
... more columns
columns.Template("#=resColTemplate(data)#").Title("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>

Razor PageModel:

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.  Note the ForeignKey field is populated from another model.

Is that possible?

[Mihaela]

Hello Reafidy,

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>

I hope that helps.

 

Regards,
Mihaela
Progress Telerik