How to bind nested model property to kendo grid column?

Question

I have a model which includes a property of datatype list of another model as below.

public class Eatables
{
 int id {get;set;}
 string name{get;set;}
 List<Ingredient> ingredientList{get;set;}
}

public class Ingredient
{
 int id {get;set;}
 quantity {get;set;}
 calories {get;set;}
}

if I want to display the list of eatables with their ingredient required as per below kendo header.

SL.No | Eatable | Sugar(KG) | Salt(gram) | Oil(L)

I am passing List of eatables to the view which is consumed in displaying the kendo list if sugar ingredient id is 2 and salt ingredient id is 4 I have below column bound LINQ query to fetch the quantity of the ingredient as below.

columns.Bound(x => x.ingredientList.Find(x=>x.id=="2").quantity) -- to fetch sugar quantity
columns.Bound(x => x.ingredientList.Find(x=>x.id=="4").quantity) -- to fetch salt quantity

But the above queries are not fetching the quantity though the values are available in the model being sent from the controller. please suggest if I am missing anything the query, it been a day I am in a maze to fix the issue.

Answer 1

As it is mentioned in the comments too a way to handle this is to flatten the model since the kendo grid is designed to work with flat data. Let's say we will use the ViewModel EatableSSOVM

public class EatableSSOViewModel
{
   public int id {get;set;}
   public string name{get;set;}
   public string sugar {get; set;}
   public string salt{get; set;}
   public string oil{get; set;}
}

Map with your LINQ Queries the values of sugar, salt and oil and bind your grid to the List<EatableSSOViewModel>

According however to this link which talks about client templates of the grid, one option could be to do something like the following

columns.Template( @<text>
     @item.ingredientList.Find(x=>x.id=="2").quantity
    </text>
);

Inside the template you could write Razor syntax and pretty much do a lot of things that would result to a string input that the column could bind to.