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.

Hi. Checkout this [code sample](http://docs.telerik.com/aspnet-mvc/helpers/grid/templating/client-detail-template) — shahar eldad, Apr 28 '17 at 03:44
@shahareldad, I am not looking for a nested kendo grid let me know if there is a way to fetch nested modal property as per the kendo header above — Mahanthesh Kumbar, Apr 28 '17 at 05:01
Your view model property name is ingredientlist and in the view you are referring to ingredients, is this a mistake or it is the actual code? — Giovanni Romio, Apr 28 '17 at 06:15
is it a typo: your 'Eatables' class has `ingredientList`, but you use `ingredients` in kendo grid? — Mantas Čekanauskas, Apr 28 '17 at 06:26
I would create a ViewModel that flattens that out with properties called SugarAmt, SaltAmt, OilAmt, etc. Then build those in your action and bind your grid columns to those properties. — Steve Greene, May 04 '17 at 16:52
@SteveGreene I think that should be the solution because the kendo grid accepts only the flat model. — Mahanthesh Kumbar, May 05 '17 at 04:28

Anastasios Selmani · Answer 1 · 2018-07-13T09:55:24.060

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.

How to bind nested model property to kendo grid column?

1 Answers1