Kendo TabStrip:how to pass a partial view with different Model to Tbstrip mvc3

i created a kendo Tabstrip in a kendo  popup window as it's shown here: 

   @model NeoPaie.ViewModels.GrilleSalaireVM
@using Kendo.Mvc.UI;
@using NeoPaie.ViewModels;

<div class="popupError"></div>

@(Html.Kendo().TabStrip()
 .HtmlAttributes(new { style = "width:430px;height:400px" })
.Name("tabstrip")
.SelectedIndex(0)
.Items(items =>
    {
        items.Add()
            .Text("Grille De Salaire")
            .Content(@Html.Partial("Gestion De La Grille").ToHtmlString());
        items.Add()
            .Text("Fiche Administartive")
        **.LoadContentFrom("Liste", "GrilleRubriqueFixe");**
    })    
)

in the seceond tab i want to display a GrilleRubriqueFixe****list : a kendo grid with its crud methode:but this Exception occured:The model item passed into the dictionary is of type 'System.String', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable1[NeoPaie.ViewModels.GrilleSalaireVM]'` isn't possible to use another Model in the second tab?? how can i fixe this??

there is my GrilleRubriqueFixe List:`

@model  IEnumerable<NeoPaie.ViewModels.GrilleRubriqueFixeVM>
@using Kendo.Mvc.UI;

@{
    ViewBag.Title = "Rubrique Fixes";

}

@section  headerView {
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    <link href="@Url.Content("~/Content/Edit.css")" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/Common/Edit.js"></script>

}

<h2>Rubrique Fixes</h2>


@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .HtmlAttributes(new { style = "width:500px;height:300px" })
    .Editable(editing =>

{
            editing.Mode(GridEditMode.InCell).TemplateName("PopupEditors/PopupGrilleRubriqueFixe")
            .Window(w => w.Title("NeoPaie : Ajouter/Modifier une RubriqueFixe").Width(400).Height(350));

            editing.DisplayDeleteConfirmation("Êtes-vous sûr de vouloir supprimer RubriqueFixe?");
        })
    .ToolBar(commands =>
    {
        commands.Create().Text("Ajouter").HtmlAttributes(new { style = "width:100px;float:right" });

    })
     .DataSource(dataSource => dataSource
            .Ajax()
            .Read("Read", "GrilleRubriqueFixe")
            .Create("Save","GrilleRubriqueFixe")
            .Update("Save", "GrilleRubriqueFixe")
            .Destroy("Delete", "GrilleRubriqueFixe")
           .Model(model => model.Id(p => p.Grille_Rubrique_FixeId))

           .Events(e => e.RequestEnd("OnKendoGridSaveEnd").Error("OnKendoGridPopupListSaveError"))
             )
             .Columns(columns =>
    {
        columns.Bound(p => p.Grille_Rubrique_FixeId).Groupable(false).Hidden();
        columns.Bound(p => p.CODE).Width(50).Title("Rubrique");
        columns.Bound(p => p.VALEUR).Width(100).Title("Valeur");

        columns.Bound(p => p.LIBELLE).Width(300).Hidden();
        columns.Bound(p => p.RubriqueId).Width(100).Hidden();
        columns.Bound(p => p.GrilleId).Width(100).Hidden();

        columns.Command(command => command.Destroy().Text(" ")).Width(60).Title("Supprimer").HtmlAttributes(new { style = "text-align:center" });
        columns.Command(command => command.Edit().Text(" ")).Width(60).Title("Modifier").HtmlAttributes(new { style = "text-align:center" });

    })

    .Scrollable()
            .Selectable(selectable => selectable
                .Mode(GridSelectionMode.Single)
                .Type(GridSelectionType.Row))

    .Navigatable()

    )
   and my GrilleRubriqueFixe Controller:

public ActionResult Liste( ) { try {

    List<GrilleRubriqueFixeVM> lstVM = ServiceApplicatif.GetListe().OrderBy(x => x.RubriqueId).ToList();

    //  Drop Down List des listRubrique

     IEnumerable<RubriqueVM> listRubrique = RefDataManager.GetRefData<RubriqueVM>() as IEnumerable<RubriqueVM>;

     ViewData["CodeRubrique"] = new SelectList(listRubrique, "RubriqueId", "CODELIBELLE");

     return PartialView(lstVM);
    }
   catch (Exception ex)
   {
        LoggerGrilleRubriqueFixe.Error(string.Format("Exception : {0}", ex.Message.ToString()));
        throw new Exception("Erreur lors du chargement.");
   }
}

[HttpPost]
public JsonResult Read([DataSourceRequest] DataSourceRequest dsRequest)

{ try { // Drop Down List des listRubrique

      IEnumerable<RubriqueVM> listRubrique = RefDataManager.GetRefData<RubriqueVM>() as IEnumerable<RubriqueVM>;
      if (listRubrique.Any())
      {
          ViewBag.idrub = listRubrique.First().RubriqueId;
      }

      ViewData["Rubrique"] = new SelectList(listRubrique, "RubriqueId", "CODELIBELLE");
      List<GrilleRubriqueFixeVM> lstVM = ServiceApplicatif.GetListe().OrderBy(x => x.GrilleId).ToList();

      return Json(lstVM.ToDataSourceResult(dsRequest));
  }
  catch (Exception ex)
  {
      LoggerGrilleRubriqueFixe.Error(string.Format("Exception : {0}", ex.Message.ToString()));
      throw new Exception("Erreur lors du chargement.");
  }

} `

Solution

Rather than trying to pass the model.children this way, pass the Id of the model you are working with (Im assuming this is a readonly model at this point), and have the controller load up the model.

Here's my example where I've got a partialview which I'll load into a tabstrip.

tabstrip.Add()
   .Text("P11D")
   .LoadContentFrom("Dashboard_P11D", "Vehicle", 
            new { VehicleId =  ViewBag.VehicleId });

And then my controller does the heavy lifting to get the model.

public PartialViewResult Dashboard_P11D(string vehicleId)
{
   VehicleP11DData p11d = this.vehicleP11DDataRepo.Read(this.UserProfile, vehicleId);
   return PartialView(p11d);
}

I've also got an example where I'm just showing a Kendo grid, so the partial view loads up with no @model statement at the top (I stuff the Id I need to get in the ViewBag), but then the grid fires an Ajax method to populate the grid contents.