Multiple ViewModels in View - asp.net-mvc-3

Question

I'm looking to display two Telerik Kendo grids with different information(models) in one view and I'm not sure how to do it.
Model:
using System.Collections.Generic;
namespace KendoUIMvcApplication1.Models
{
public class Car
{
public int Id { get; set; }
public string Name { get; set; }
}
public class Truck
{
public int Id { get; set; }
public string Name { get; set; }
}
public class Vehicles
{
public IEnumerable<Car> CarCol { get; set; }
public IEnumerable<Truck> TruckCol { get; set; }
}
}
Controller (Creating some test objects):
using System.Collections.Generic;
using System.Web.Mvc;
using KendoUIMvcApplication1.Models;
namespace KendoUIMvcApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var carList = new List<Car>();
var truckList = new List<Truck>();
var vehCol = new Vehicles();
var car1 = new Car
{
Id = 1,
Name = "Passat"
};
var car2 = new Car
{
Id = 2,
Name = "Passat"
};
carList.Add(car1);
carList.Add(car2);
var truck1 = new Truck
{
Id = 1,
Name = "S10"
};
var truck2 = new Truck
{
Id = 1,
Name = "Blazer"
};
truckList.Add(truck1);
truckList.Add(truck2);
vehCol.CarCol = carList;
vehCol.TruckCol = truckList;
return View(vehCol);
}
}
}
View (Here I'm trying to display the two grids. The first one for cars and the second one for trucks):
#using KendoUIMvcApplication1.Models
#model IEnumerable<Vehicles>
#*// Car Grid*#
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns => {
columns.Bound(c => c.Id);
columns.Bound(c => c.Name);
})
)
<div></div>
#*// Truck Grid*#
#(Html.Kendo().Grid(Model))
.Name("Grid")
.Columns(columns => {
columns.Bound(t => t.Id);
columns.Bound(t => t.Name);
})
)

Answer 1

Your model should be of type Vehicles:
#model Vehicles
Then you can access the two collections:
#Html.Kendo().Grid(Model.CarCol)
...
and
#Html.Kendo().Grid(Model.TruckCol)
...